build: Linting for .vue files

Install eslint-plugin-vue, which lints JS inside <script> blocks in
.vue files, and also lints Vue templates. Configure eslint and stylelint
to run on .vue files. stylelint automatically picks up on CSS in <style>
tags.

You may have to change a setting in your text editor or IDE to make it
run eslint and stylelint in .vue files. For eslint, see
https://eslint.vuejs.org/user-guide/#editor-integrations ; for
stylelint, I had to install the linter-stylelint-plus Atom plugin then
add source.css.embedded.html to the "Base Scopes" setting for that
plugin.

Change-Id: I7e6a13317792fc25c29106739b0c24864fd8d301

1 files changed, 5 insertions, 5 deletions

diff --git a/Gruntfile.js b/Gruntfile.js
index f924235ba324..79952c628dec 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -21,11 +21,11 @@ module.exports = function ( grunt ) {
 	grunt.initConfig( {
 		eslint: {
 			options: {
-				extensions: [ '.js', '.json' ],
+				extensions: [ '.js', '.json', '.vue' ],
 				cache: true
 			},
 			all: [
-				'**/*.{js,json}',
+				'**/*.{js,json,vue}',
 				'!docs/**',
 				'!node_modules/**',
 				'!resources/lib/**',
@@ -35,8 +35,8 @@ module.exports = function ( grunt ) {
 				'!tests/coverage/**',
 				'!vendor/**',
 				// Explicitly say "**/*.js" here in case of symlinks
-				'!extensions/**/*.js{,on}',
-				'!skins/**/*.js{,on}'
+				'!extensions/**/*.{js,json,vue}',
+				'!skins/**/*.{js,json,vue}'
 			]
 		},
 		banana: {
@@ -52,7 +52,7 @@ module.exports = function ( grunt ) {
 			paramvalidator: 'includes/libs/ParamValidator/i18n/'
 		},
 		stylelint: {
-			src: '{resources/src,mw-config}/**/*.{css,less}'
+			src: '{resources/src,mw-config}/**/*.{css,less,vue}'
 		},
 		svgmin: {
 			options: {