Add 3rd option to lintOnSave to support 'default' behaviour (fix #3552)

docs/config/README.md

@@ -22,7 +22,7 @@ See the [Browser Compatibility](../guide/browser-compatibility.md#browserslist)
 
 The file should export an object containing options:
 
-``` js
+```js
 // vue.config.js
 module.exports = {
   // options...
@@ -50,15 +50,14 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
   - You are using HTML5 `history.pushState` routing;
 
   - You are using the `pages` option to build a multi-paged app.
-  :::
+    :::
 
   This value is also respected during development. If you want your dev server to be served at root instead, you can use a conditional value:
 
-  ``` js
+  ```js
   module.exports = {
-    publicPath: process.env.NODE_ENV === 'production'
-      ? '/production-sub-path/'
-      : '/'
+    publicPath:
+      process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/',
   }
   ```
 
@@ -108,7 +107,7 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
   - An object that specifies its `entry`, `template`, `filename`, `title` and `chunks` (all optional except `entry`). Any other properties added beside those will also be passed directly to `html-webpack-plugin`, allowing user to customize said plugin;
   - Or a string specifying its `entry`.
 
-  ``` js
+  ```js
   module.exports = {
     pages: {
       index: {
@@ -123,14 +122,14 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
         title: 'Index Page',
         // chunks to include on this page, by default includes
         // extracted common chunks and vendor chunks.
-        chunks: ['chunk-vendors', 'chunk-common', 'index']
+        chunks: ['chunk-vendors', 'chunk-common', 'index'],
       },
       // when using the entry-only string format,
       // template is inferred to be `public/subpage.html`
       // and falls back to `public/index.html` if not found.
       // Output filename is inferred to be `subpage.html`.
-      subpage: 'src/subpage/main.js'
-    }
+      subpage: 'src/subpage/main.js',
+    },
   }
   ```
 
@@ -140,35 +139,37 @@ 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: 'default'`. This will force `eslint-loader` to actually 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: 'error'`. This will force `eslint-loader` to always 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:
 
-  ``` js
+  ```js
   // vue.config.js
   module.exports = {
     devServer: {
       overlay: {
         warnings: true,
-        errors: true
-      }
-    }
+        errors: true,
+      },
+    },
   }
   ```
 
   When `lintOnSave` is a truthy value, `eslint-loader` will be applied in both development and production. If you want to disable `eslint-loader` during production build, you can use the following config:
 
-  ``` js
+  ```js
   // vue.config.js
   module.exports = {
-    lintOnSave: process.env.NODE_ENV !== 'production'
+    lintOnSave: process.env.NODE_ENV !== 'production',
   }
   ```
 
@@ -271,7 +272,7 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
 
   Pass options to CSS-related loaders. For example:
 
-  ``` js
+  ```js
   module.exports = {
     css: {
       loaderOptions: {
@@ -280,9 +281,9 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
         },
         postcss: {
           // options here will be passed to postcss-loader
-        }
-      }
-    }
+        },
+      },
+    },
   }
   ```
 
@@ -318,32 +319,32 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
 
   `devServer.proxy` can be a string pointing to the development API server:
 
-  ``` js
+  ```js
   module.exports = {
     devServer: {
-      proxy: 'http://localhost:4000'
-    }
+      proxy: 'http://localhost:4000',
+    },
   }
   ```
 
   This will tell the dev server to proxy any unknown requests (requests that did not match a static file) to `http://localhost:4000`.
 
   If you want to have more control over the proxy behavior, you can also use an object with `path: options` pairs. Consult [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware#proxycontext-config) for full options:
 
-  ``` js
+  ```js
   module.exports = {
     devServer: {
       proxy: {
         '^/api': {
           target: '<url>',
           ws: true,
-          changeOrigin: true
+          changeOrigin: true,
         },
         '^/foo': {
-          target: '<other_url>'
-        }
-      }
-    }
+          target: '<other_url>',
+        },
+      },
+    },
   }
   ```
 
@@ -366,14 +367,14 @@ Deprecated since Vue CLI 3.3, please use [`publicPath`](#publicPath) instead.
 
   This is an object that doesn't go through any schema validation, so it can be used to pass arbitrary options to 3rd party plugins. For example:
 
-  ``` js
+  ```js
   module.exports = {
     pluginOptions: {
       foo: {
         // plugins can access these options as
         // `options.pluginOptions.foo`.
-      }
-    }
+      },
+    },
   }
   ```
 

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,44 +30,57 @@ 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')
-          .pre()
-          .exclude
-            .add(/node_modules/)
-            .add(require('path').dirname(require.resolve('@vue/cli-service')))
-            .end()
-          .test(/\.(vue|(j|t)sx?)$/)
-          .use('eslint-loader')
-            .loader('eslint-loader')
-            .options({
-              extensions,
-              cache: true,
-              cacheIdentifier,
-              emitWarning: options.lintOnSave !== 'error',
-              emitError: options.lintOnSave === 'error',
-              eslintPath: resolveModule('eslint', cwd) || require.resolve('eslint'),
-              formatter:
-                loadModule('eslint/lib/formatters/codeframe', cwd, true) ||
-                require('eslint/lib/formatters/codeframe')
-            })
+        .pre()
+        .exclude.add(/node_modules/)
+        .add(require('path').dirname(require.resolve('@vue/cli-service')))
+        .end()
+        .test(/\.(vue|(j|t)sx?)$/)
+        .use('eslint-loader')
+        .loader('eslint-loader')
+        .options({
+          extensions,
+          cache: true,
+          cacheIdentifier,
+          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) ||
+            require('eslint/lib/formatters/codeframe')
+        })
     })
   }
 
-  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)
+    }
+  )
 }