feat: add 3rd option to lintOnSave to support 'default' behaviour (fix #3552) (#3572)

Author: LinusBorg

docs/config/README.md

@@ -140,14 +140,16 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
 
 ### lintOnSave
 
-- Type: `boolean | 'error'`
+- Type: `boolean | 'warning' | 'default' | 'error'`
 - Default: `true`
 
   Whether to perform lint-on-save during development using [eslint-loader](https://github.com/webpack-contrib/eslint-loader). This value is respected only when [`@vue/cli-plugin-eslint`](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint) is installed.
 
-  When set to `true`, `eslint-loader` will emit lint errors as warnings. By default, warnings are only logged to the terminal and does not fail the compilation.
+  When set to `true` or `'warning'`, `eslint-loader` will emit lint errors as warnings. By default, warnings are only logged to the terminal and does not fail the compilation, so this is a good default for development.
 
-  To make lint errors show up in the browser overlay, you can use `lintOnSave: 'error'`. This will force `eslint-loader` to always emit errors. this also means lint errors will now cause the compilation to fail.
+  To make lint errors show up in the browser overlay, you can use `lintOnSave: 'default'`. This will force `eslint-loader` to actually emit errors. this also means lint errors will now cause the compilation to fail.
+
+  Setting it to `'errors'` will force eslint-loader to emit warnings as errors as well, which means warnings will also show up in the overlay.
 
   Alternatively, you can configure the overlay to display both warnings and errors:
 

packages/@vue/cli-plugin-eslint/index.js

@@ -17,7 +17,7 @@ module.exports = (api, options) => {
       'eslint-loader',
       {
         'eslint-loader': require('eslint-loader/package.json').version,
-        'eslint': eslintPkg.version
+        eslint: eslintPkg.version
       },
       [
         '.eslintrc.js',
@@ -30,7 +30,13 @@ module.exports = (api, options) => {
     )
 
     api.chainWebpack(webpackConfig => {
-      webpackConfig.resolveLoader.modules.prepend(path.join(__dirname, 'node_modules'))
+      webpackConfig.resolveLoader.modules.prepend(
+        path.join(__dirname, 'node_modules')
+      )
+
+      const { lintOnSave } = options
+      const allWarnings = lintOnSave === true || lintOnSave === 'warning'
+      const allErrors = lintOnSave === 'error'
 
       webpackConfig.module
         .rule('eslint')
@@ -46,8 +52,9 @@ module.exports = (api, options) => {
               extensions,
               cache: true,
               cacheIdentifier,
-              emitWarning: options.lintOnSave !== 'error',
-              emitError: options.lintOnSave === 'error',
+              emitWarning: allWarnings,
+              // only emit errors in production mode.
+              emitError: allErrors,
               eslintPath: resolveModule('eslint', cwd) || require.resolve('eslint'),
               formatter:
                 loadModule('eslint/lib/formatters/codeframe', cwd, true) ||
@@ -56,18 +63,25 @@ module.exports = (api, options) => {
     })
   }
 
-  api.registerCommand('lint', {
-    description: 'lint and fix source files',
-    usage: 'vue-cli-service lint [options] [...files]',
-    options: {
-      '--format [formatter]': 'specify formatter (default: codeframe)',
-      '--no-fix': 'do not fix errors or warnings',
-      '--no-fix-warnings': 'fix errors, but do not fix warnings',
-      '--max-errors [limit]': 'specify number of errors to make build failed (default: 0)',
-      '--max-warnings [limit]': 'specify number of warnings to make build failed (default: Infinity)'
+  api.registerCommand(
+    'lint',
+    {
+      description: 'lint and fix source files',
+      usage: 'vue-cli-service lint [options] [...files]',
+      options: {
+        '--format [formatter]': 'specify formatter (default: codeframe)',
+        '--no-fix': 'do not fix errors or warnings',
+        '--no-fix-warnings': 'fix errors, but do not fix warnings',
+        '--max-errors [limit]':
+          'specify number of errors to make build failed (default: 0)',
+        '--max-warnings [limit]':
+          'specify number of warnings to make build failed (default: Infinity)'
+      },
+      details:
+        'For more options, see https://eslint.org/docs/user-guide/command-line-interface#options'
     },
-    details: 'For more options, see https://eslint.org/docs/user-guide/command-line-interface#options'
-  }, args => {
-    require('./lint')(args, api)
-  })
+    args => {
+      require('./lint')(args, api)
+    }
+  )
 }

packages/@vue/cli-service/lib/options.js

@@ -51,7 +51,7 @@ const schema = createSchema(joi => joi.object({
   ),
 
   // known runtime options for built-in plugins
-  lintOnSave: joi.any().valid([true, false, 'error']),
+  lintOnSave: joi.any().valid([true, false, 'error', 'warning', 'default']),
   pwa: joi.object(),
 
   // 3rd party plugin options
@@ -95,7 +95,9 @@ exports.defaults = () => ({
   runtimeCompiler: false,
 
   // deps to transpile
-  transpileDependencies: [/* string or regex */],
+  transpileDependencies: [
+    /* string or regex */
+  ],
 
   // sourceMap for production build?
   productionSourceMap: !process.env.VUE_CLI_TEST,
@@ -126,7 +128,7 @@ exports.defaults = () => ({
   lintOnSave: true,
 
   devServer: {
-  /*
+    /*
     open: process.platform === 'darwin',
     host: '0.0.0.0',
     port: 8080,