fix(eslint): ensure all config values are contained in config file

close #1006, close #1313

Author: yyx990803

packages/@vue/cli-plugin-eslint/__tests__/eslintGenerator.spec.js

@@ -8,9 +8,11 @@ test('base', async () => {
   })
 
   expect(pkg.scripts.lint).toBeTruthy()
-  expect(pkg.eslintConfig).toEqual({
-    root: true,
-    extends: ['plugin:vue/essential', 'eslint:recommended']
+  expect(pkg.eslintConfig.extends).toEqual([
+    'plugin:vue/essential', 'eslint:recommended'
+  ])
+  expect(pkg.eslintConfig.parserOptions).toEqual({
+    parser: 'babel-eslint'
   })
 })
 
@@ -24,9 +26,12 @@ test('airbnb', async () => {
   })
 
   expect(pkg.scripts.lint).toBeTruthy()
-  expect(pkg.eslintConfig).toEqual({
-    root: true,
-    extends: ['plugin:vue/essential', '@vue/airbnb']
+  expect(pkg.eslintConfig.extends).toEqual([
+    'plugin:vue/essential',
+    '@vue/airbnb'
+  ])
+  expect(pkg.eslintConfig.parserOptions).toEqual({
+    parser: 'babel-eslint'
   })
   expect(pkg.devDependencies).toHaveProperty('@vue/eslint-config-airbnb')
 })
@@ -41,9 +46,12 @@ test('standard', async () => {
   })
 
   expect(pkg.scripts.lint).toBeTruthy()
-  expect(pkg.eslintConfig).toEqual({
-    root: true,
-    extends: ['plugin:vue/essential', '@vue/standard']
+  expect(pkg.eslintConfig.extends).toEqual([
+    'plugin:vue/essential',
+    '@vue/standard'
+  ])
+  expect(pkg.eslintConfig.parserOptions).toEqual({
+    parser: 'babel-eslint'
   })
   expect(pkg.devDependencies).toHaveProperty('@vue/eslint-config-standard')
 })
@@ -58,9 +66,12 @@ test('prettier', async () => {
   })
 
   expect(pkg.scripts.lint).toBeTruthy()
-  expect(pkg.eslintConfig).toEqual({
-    root: true,
-    extends: ['plugin:vue/essential', '@vue/prettier']
+  expect(pkg.eslintConfig.extends).toEqual([
+    'plugin:vue/essential',
+    '@vue/prettier'
+  ])
+  expect(pkg.eslintConfig.parserOptions).toEqual({
+    parser: 'babel-eslint'
   })
   expect(pkg.devDependencies).toHaveProperty('@vue/eslint-config-prettier')
 })
@@ -82,10 +93,12 @@ test('typescript', async () => {
   ])
 
   expect(pkg.scripts.lint).toBeTruthy()
-  expect(pkg.eslintConfig).toEqual({
-    root: true,
-    extends: ['plugin:vue/essential', '@vue/prettier', '@vue/typescript']
-  })
+  expect(pkg.eslintConfig.extends).toEqual([
+    'plugin:vue/essential',
+    '@vue/prettier',
+    '@vue/typescript'
+  ])
+  expect(pkg.eslintConfig).not.toHaveProperty('parserOptions')
   expect(pkg.devDependencies).toHaveProperty('@vue/eslint-config-prettier')
   expect(pkg.devDependencies).toHaveProperty('@vue/eslint-config-typescript')
 })

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

@@ -1,20 +1,30 @@
-module.exports = api => {
-  const options = {
-    extensions: ['.js', '.vue'],
-    envs: ['node'],
+exports.config = api => {
+  const config = {
+    root: true,
+    env: { node: true },
+    extends: ['plugin:vue/essential'],
     rules: {
-      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+      'no-console': makeJSOnlyValue(`process.env.NODE_ENV === 'production' ? 'error' : 'off'`),
+      'no-debugger': makeJSOnlyValue(`process.env.NODE_ENV === 'production' ? 'error' : 'off'`)
     }
   }
-
-  if (api.hasPlugin('typescript')) {
-    options.extensions.push('.ts')
-  } else {
-    options.parserOptions = {
-      parser: require.resolve('babel-eslint')
+  if (!api.hasPlugin('typescript')) {
+    config.parserOptions = {
+      parser: 'babel-eslint'
     }
   }
+  return config
+}
 
-  return options
+// __expression is a special flag that allows us to customize stringification
+// output when extracting configs into standalone files
+function makeJSOnlyValue (str) {
+  const fn = () => {}
+  fn.__expression = str
+  return fn
 }
+
+const baseExtensions = ['.js', '.jsx', '.vue']
+exports.extensions = api => api.hasPlugin('typescript')
+  ? baseExtensions.concat('.ts', '.tsx')
+  : baseExtensions

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

@@ -3,40 +3,39 @@ module.exports = (api, { config, lintOn = [] }) => {
     lintOn = lintOn.split(',')
   }
 
+  const eslintConfig = require('./eslintOptions').config(api)
+
   const pkg = {
     scripts: {
       lint: 'vue-cli-service lint'
     },
-    eslintConfig: {
-      root: true,
-      extends: ['plugin:vue/essential']
-    },
+    eslintConfig,
     devDependencies: {}
   }
 
   if (config === 'airbnb') {
-    pkg.eslintConfig.extends.push('@vue/airbnb')
+    eslintConfig.extends.push('@vue/airbnb')
     Object.assign(pkg.devDependencies, {
       '@vue/eslint-config-airbnb': '^3.0.0-beta.10'
     })
   } else if (config === 'standard') {
-    pkg.eslintConfig.extends.push('@vue/standard')
+    eslintConfig.extends.push('@vue/standard')
     Object.assign(pkg.devDependencies, {
       '@vue/eslint-config-standard': '^3.0.0-beta.10'
     })
   } else if (config === 'prettier') {
-    pkg.eslintConfig.extends.push('@vue/prettier')
+    eslintConfig.extends.push('@vue/prettier')
     Object.assign(pkg.devDependencies, {
       '@vue/eslint-config-prettier': '^3.0.0-beta.10'
     })
   } else {
     // default
-    pkg.eslintConfig.extends.push('eslint:recommended')
+    eslintConfig.extends.push('eslint:recommended')
   }
 
   // typescript support
   if (api.hasPlugin('typescript')) {
-    pkg.eslintConfig.extends.push('@vue/typescript')
+    eslintConfig.extends.push('@vue/typescript')
     Object.assign(pkg.devDependencies, {
       '@vue/eslint-config-typescript': '^3.0.0-beta.10'
     })

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

@@ -1,6 +1,6 @@
 module.exports = (api, { lintOnSave }) => {
   if (lintOnSave) {
-    const options = require('./eslintOptions')(api)
+    const extensions = require('./eslintOptions').extensions(api)
     api.chainWebpack(webpackConfig => {
       webpackConfig.module
         .rule('eslint')
@@ -12,10 +12,11 @@ module.exports = (api, { lintOnSave }) => {
           .test(/\.(vue|(j|t)sx?)$/)
           .use('eslint-loader')
             .loader('eslint-loader')
-            .options(Object.assign(options, {
+            .options({
+              extensions,
               emitWarning: lintOnSave !== 'error',
               formatter: require('eslint/lib/formatters/codeframe')
-            }))
+            })
     })
   }
 

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

@@ -20,12 +20,13 @@ module.exports = function lint (args = {}, api) {
   const chalk = require('chalk')
   const cwd = api.resolve('.')
   const { CLIEngine } = require('eslint')
-  const options = require('./eslintOptions')(api)
   const { log, done } = require('@vue/cli-shared-utils')
 
   const files = args._ && args._.length ? args._ : ['src', 'tests', '*.js']
+  const extensions = require('./eslintOptions').extensions(api)
   const argsConfig = normalizeConfig(args)
-  const config = Object.assign({}, options, {
+  const config = Object.assign({
+    extensions,
     fix: true,
     cwd
   }, argsConfig)
@@ -36,7 +37,7 @@ module.exports = function lint (args = {}, api) {
   if (config.fix) {
     CLIEngine.outputFixes(report)
   }
-  
+
   const maxErrors = argsConfig.maxErrors || 0
   const maxWarnings = typeof argsConfig.maxWarnings === 'number' ? argsConfig.maxWarnings : Infinity
   const isErrorsExceeded = report.errorCount > maxErrors
@@ -63,10 +64,10 @@ module.exports = function lint (args = {}, api) {
     }
   } else {
     console.log(formatter(report.results))
-    if (isErrorsExceed && typeof argsConfig.maxErrors === 'number') {
+    if (isErrorsExceeded && typeof argsConfig.maxErrors === 'number') {
       log(`Eslint found too many errors (maximum: ${argsConfig.maxErrors}).`)
     }
-    if (isWarningsExceed) {
+    if (isWarningsExceeded) {
       log(`Eslint found too many warnings (maximum: ${argsConfig.maxWarnings}).`)
     }
     process.exit(1)

packages/@vue/cli/lib/util/configTransforms.js

@@ -1,7 +1,16 @@
 const fs = require('fs')
 const path = require('path')
 const extendJSConfig = require('./extendJSConfig')
-const stringifyJS = require('javascript-stringify')
+const stringify = require('javascript-stringify')
+
+function stringifyJS (value) {
+  return stringify(value, (val, indent, stringify) => {
+    if (val && val.__expression) {
+      return val.__expression
+    }
+    return stringify(val)
+  }, 2)
+}
 
 function makeJSTransform (filename) {
   return function transformToJS (value, checkExisting, context) {