feat: upgrade to eslint 6 (#4933)

* feat: scaffold projects with eslint 6

* style: eslint fix

* refactor: do not use hard-coded ecmaVersion, use babel-eslint for now

* fix: upgrade to @vue/eslint-config-standard

* style: continue fix lint errors

* chore: upgrade to eslint-plugin-vue@^6.1.2

* refactor: use `ecmaVersion: 2020` for dynamic import syntax support

* test: fix baseESLintConfig

* chore: also update yarn.lock to fix CI caches

* chore: update lockfile again, fix babel regressions

* test: nightwatch tests should fail if lint errors occur

* chore: update the lockfile (again), fixing a bug in airbnb config

package.json

@@ -45,22 +45,27 @@
   },
   "devDependencies": {
     "@babel/core": "^7.7.4",
-    "@vue/eslint-config-airbnb": "^4.0.0",
-    "@vue/eslint-config-prettier": "^5.0.0",
-    "@vue/eslint-config-standard": "^4.0.0",
-    "@vue/eslint-config-typescript": "^4.0.0",
+    "@vue/eslint-config-airbnb": "^5.0.1",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-standard": "^5.1.0",
+    "@vue/eslint-config-typescript": "^5.0.1",
     "@vuepress/plugin-pwa": "^1.2.0",
     "@vuepress/theme-vue": "^1.2.0",
+    "@typescript-eslint/eslint-plugin": "^2.10.0",
+    "@typescript-eslint/parser": "^2.10.0",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.0.3",
     "babel-jest": "^24.9.0",
     "chromedriver": "^78.0.1",
     "debug": "^4.1.0",
-    "eslint": "^5.16.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-graphql": "^3.1.0",
     "eslint-plugin-node": "^9.1.0",
     "eslint-plugin-prettier": "^3.1.1",
-    "eslint-plugin-vue": "^5.2.2",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^6.1.2",
     "eslint-plugin-vue-libs": "^4.0.0",
     "execa": "^1.0.0",
     "geckodriver": "^1.19.1",

packages/@vue/babel-preset-app/index.js

@@ -174,7 +174,7 @@ module.exports = (context, options = {}) => {
       decoratorsBeforeExport,
       legacy: decoratorsLegacy !== false
     }],
-    [require('@babel/plugin-proposal-class-properties'), { loose }],
+    [require('@babel/plugin-proposal-class-properties'), { loose }]
   )
 
   // transform runtime, but only for helpers

packages/@vue/cli-plugin-e2e-nightwatch/__tests__/nightwatchPlugin.spec.js

@@ -20,6 +20,8 @@ describe('nightwatch e2e plugin', () => {
       }
     })
 
+    await project.run('vue-cli-service lint')
+
     await fs.copy(path.join(__dirname, './lib/globals-generated.js'),
       path.join(project.dir, 'tests/e2e/globals-generated.js'))
 

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

@@ -14,9 +14,6 @@ test('base', async () => {
   expect(pkg.eslintConfig.extends).toEqual([
     'plugin:vue/essential', 'eslint:recommended'
   ])
-  expect(pkg.eslintConfig.parserOptions).toEqual({
-    parser: 'babel-eslint'
-  })
 })
 
 test('airbnb', async () => {
@@ -33,9 +30,6 @@ test('airbnb', async () => {
     'plugin:vue/essential',
     '@vue/airbnb'
   ])
-  expect(pkg.eslintConfig.parserOptions).toEqual({
-    parser: 'babel-eslint'
-  })
   expect(pkg.devDependencies).toHaveProperty('@vue/eslint-config-airbnb')
 })
 
@@ -53,9 +47,6 @@ test('standard', async () => {
     'plugin:vue/essential',
     '@vue/standard'
   ])
-  expect(pkg.eslintConfig.parserOptions).toEqual({
-    parser: 'babel-eslint'
-  })
   expect(pkg.devDependencies).toHaveProperty('@vue/eslint-config-standard')
 })
 
@@ -71,12 +62,31 @@ test('prettier', async () => {
   expect(pkg.scripts.lint).toBeTruthy()
   expect(pkg.eslintConfig.extends).toEqual([
     'plugin:vue/essential',
+    'eslint:recommended',
     '@vue/prettier'
   ])
+  expect(pkg.devDependencies).toHaveProperty('@vue/eslint-config-prettier')
+})
+
+test('babel', async () => {
+  const { pkg } = await generateWithPlugin([
+    {
+      id: 'eslint',
+      apply: require('../generator'),
+      options: {}
+    },
+    {
+      id: 'babel',
+      apply: require('@vue/cli-plugin-babel/generator'),
+      options: {}
+    }
+  ])
+
+  expect(pkg.scripts.lint).toBeTruthy()
+  expect(pkg.devDependencies).toHaveProperty('babel-eslint')
   expect(pkg.eslintConfig.parserOptions).toEqual({
     parser: 'babel-eslint'
   })
-  expect(pkg.devDependencies).toHaveProperty('@vue/eslint-config-prettier')
 })
 
 test('typescript', async () => {
@@ -98,12 +108,11 @@ test('typescript', async () => {
   expect(pkg.scripts.lint).toBeTruthy()
   expect(pkg.eslintConfig.extends).toEqual([
     'plugin:vue/essential',
+    'eslint:recommended',
+    '@vue/typescript/recommended',
     '@vue/prettier',
-    '@vue/typescript'
+    '@vue/prettier/@typescript-eslint'
   ])
-  expect(pkg.eslintConfig.parserOptions).toEqual({
-    parser: '@typescript-eslint/parser'
-  })
   expect(pkg.devDependencies).toHaveProperty('@vue/eslint-config-prettier')
   expect(pkg.devDependencies).toHaveProperty('@vue/eslint-config-typescript')
 })
@@ -131,7 +140,7 @@ test('lint on commit', async () => {
   expect(pkg.gitHooks['pre-commit']).toBe('lint-staged')
   expect(pkg.devDependencies).toHaveProperty('lint-staged')
   expect(pkg['lint-staged']).toEqual({
-    '*.{js,vue}': ['vue-cli-service lint', 'git add']
+    '*.{js,jsx,vue}': ['vue-cli-service lint', 'git add']
   })
   expect(pkg.vue).toEqual({
     lintOnSave: false
@@ -150,7 +159,7 @@ test('should lint ts files when typescript plugin co-exists', async () => {
   const pkg = JSON.parse(await read('package.json'))
   expect(pkg).toMatchObject({
     'lint-staged': {
-      '*.{js,vue,ts}': ['vue-cli-service lint', 'git add']
+      '*.{js,jsx,vue,ts,tsx}': ['vue-cli-service lint', 'git add']
     }
   })
 })
@@ -196,3 +205,12 @@ test('airbnb config + typescript + unit-mocha', async () => {
     }
   })
 }, 30000)
+
+test('should be able to parse dynamic import syntax', async () => {
+  await create('eslint-dynamic-import', {
+    plugins: {
+      '@vue/cli-plugin-eslint': {},
+      '@vue/cli-plugin-router': {}
+    }
+  })
+}, 30000)

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

@@ -3,12 +3,15 @@ exports.config = api => {
     root: true,
     env: { node: true },
     extends: ['plugin:vue/essential'],
+    parserOptions: {
+      ecmaVersion: 2020
+    },
     rules: {
       'no-console': makeJSOnlyValue(`process.env.NODE_ENV === 'production' ? 'error' : 'off'`),
       'no-debugger': makeJSOnlyValue(`process.env.NODE_ENV === 'production' ? 'error' : 'off'`)
     }
   }
-  if (!api.hasPlugin('typescript')) {
+  if (api.hasPlugin('babel') && !api.hasPlugin('typescript')) {
     config.parserOptions = {
       parser: 'babel-eslint'
     }

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

@@ -2,49 +2,74 @@ const fs = require('fs')
 const path = require('path')
 
 module.exports = (api, { config, lintOn = [] }, _, invoking) => {
-  if (typeof lintOn === 'string') {
-    lintOn = lintOn.split(',')
-  }
-
   const eslintConfig = require('../eslintOptions').config(api)
+  const extentions = require('../eslintOptions').extensions(api)
+    .map(ext => ext.replace(/^\./, ''))  // remove the leading `.`
 
   const pkg = {
     scripts: {
       lint: 'vue-cli-service lint'
     },
     eslintConfig,
     devDependencies: {
-      'eslint': '^5.16.0',
-      'eslint-plugin-vue': '^5.0.0'
+      eslint: '^6.7.2',
+      'eslint-plugin-vue': '^6.1.2'
     }
   }
 
-  if (!api.hasPlugin('typescript')) {
+  if (api.hasPlugin('babel') && !api.hasPlugin('typescript')) {
     pkg.devDependencies['babel-eslint'] = '^10.0.3'
   }
 
-  if (config === 'airbnb') {
+  switch (config) {
+  case 'airbnb':
     eslintConfig.extends.push('@vue/airbnb')
     Object.assign(pkg.devDependencies, {
-      '@vue/eslint-config-airbnb': '^4.0.0'
+      '@vue/eslint-config-airbnb': '^5.0.1',
+      'eslint-plugin-import': '^2.18.2'
     })
-  } else if (config === 'standard') {
+    break
+  case 'standard':
     eslintConfig.extends.push('@vue/standard')
     Object.assign(pkg.devDependencies, {
-      '@vue/eslint-config-standard': '^4.0.0'
+      '@vue/eslint-config-standard': '^5.1.0',
+      'eslint-plugin-import': '^2.18.2',
+      'eslint-plugin-node': '^9.1.0',
+      'eslint-plugin-promise': '^4.2.1',
+      'eslint-plugin-standard': '^4.0.0'
     })
-  } else if (config === 'prettier') {
-    eslintConfig.extends.push('@vue/prettier')
+    break
+  case 'prettier':
+    eslintConfig.extends.push(
+      ...(api.hasPlugin('typescript')
+        ? ['eslint:recommended', '@vue/typescript/recommended', '@vue/prettier', '@vue/prettier/@typescript-eslint']
+        : ['eslint:recommended', '@vue/prettier']
+      )
+    )
     Object.assign(pkg.devDependencies, {
-      '@vue/eslint-config-prettier': '^5.0.0',
+      '@vue/eslint-config-prettier': '^6.0.0',
       'eslint-plugin-prettier': '^3.1.1',
       prettier: '^1.19.1'
     })
-    // prettier & default config do not have any style rules
-    // so no need to generate an editorconfig file
-  } else {
+    break
+  default:
     // default
     eslintConfig.extends.push('eslint:recommended')
+    break
+  }
+
+  // typescript support
+  if (api.hasPlugin('typescript')) {
+    Object.assign(pkg.devDependencies, {
+      '@vue/eslint-config-typescript': '^5.0.1',
+      '@typescript-eslint/eslint-plugin': '^2.10.0',
+      '@typescript-eslint/parser': '^2.10.0'
+    })
+    if (config !== 'prettier') {
+      // for any config other than `prettier`,
+      // typescript ruleset should be appended to the end of the `extends` array
+      eslintConfig.extends.push('@vue/typescript/recommended')
+    }
   }
 
   const editorConfigTemplatePath = path.resolve(__dirname, `./template/${config}/_editorconfig`)
@@ -60,6 +85,10 @@ module.exports = (api, { config, lintOn = [] }, _, invoking) => {
     }
   }
 
+  if (typeof lintOn === 'string') {
+    lintOn = lintOn.split(',')
+  }
+
   if (!lintOn.includes('save')) {
     pkg.vue = {
       lintOnSave: false // eslint-loader configured in runtime plugin
@@ -73,24 +102,13 @@ module.exports = (api, { config, lintOn = [] }, _, invoking) => {
     pkg.gitHooks = {
       'pre-commit': 'lint-staged'
     }
-    if (api.hasPlugin('typescript')) {
-      pkg['lint-staged'] = {
-        '*.{js,vue,ts}': ['vue-cli-service lint', 'git add']
-      }
-    } else {
-      pkg['lint-staged'] = {
-        '*.{js,vue}': ['vue-cli-service lint', 'git add']
-      }
+    pkg['lint-staged'] = {
+      [`*.{${extentions.join(',')}}`]: ['vue-cli-service lint', 'git add']
     }
   }
 
   api.extendPackage(pkg)
 
-  // typescript support
-  if (api.hasPlugin('typescript')) {
-    applyTS(api)
-  }
-
   // invoking only
   if (invoking) {
     if (api.hasPlugin('unit-mocha')) {
@@ -130,7 +148,8 @@ module.exports.hooks = (api) => {
   })
 }
 
-const applyTS = module.exports.applyTS = api => {
+// exposed for the typescript plugin
+module.exports.applyTS = api => {
   api.extendPackage({
     eslintConfig: {
       extends: ['@vue/typescript'],
@@ -139,7 +158,9 @@ const applyTS = module.exports.applyTS = api => {
       }
     },
     devDependencies: {
-      '@vue/eslint-config-typescript': '^4.0.0'
+      '@vue/eslint-config-typescript': '^5.0.1',
+      '@typescript-eslint/eslint-plugin': '^2.7.0',
+      '@typescript-eslint/parser': '^2.7.0'
     }
   })
 }

packages/@vue/cli-plugin-pwa/lib/noopServiceWorker.js

@@ -1,3 +1,4 @@
+/* eslint-disable-next-line no-redeclare */
 /* global self */
 
 // This service worker file is effectively a 'no-op' that will reset any

packages/@vue/cli-ui-addon-webpack/package.json

@@ -21,9 +21,14 @@
     "@vue/cli-plugin-babel": "^4.1.2",
     "@vue/cli-plugin-eslint": "^4.1.2",
     "@vue/cli-service": "^4.1.2",
-    "@vue/eslint-config-standard": "^4.0.0",
+    "@vue/eslint-config-standard": "^5.1.0",
     "core-js": "^3.4.4",
-    "eslint": "^5.16.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.18.0",
+    "eslint-plugin-node": "^9.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^6.1.2",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "vue-progress-path": "^0.0.2",

packages/@vue/cli-ui-addon-webpack/src/mixins/Dashboard.js

@@ -16,8 +16,8 @@ export default {
 
   sharedData () {
     return {
-      serveUrl: `org.vue.webpack.serve-url`,
-      modernMode: `org.vue.webpack.modern-mode`
+      serveUrl: 'org.vue.webpack.serve-url',
+      modernMode: 'org.vue.webpack.modern-mode'
     }
   },
 

packages/@vue/cli-ui-addon-widgets/.eslintrc.js

@@ -3,7 +3,7 @@ module.exports = {
   env: {
     node: true
   },
-  'extends': [
+  extends: [
     'plugin:vue/essential',
     '@vue/standard'
   ],

packages/@vue/cli-ui-addon-widgets/package.json

@@ -21,9 +21,14 @@
     "@vue/cli-plugin-babel": "^4.1.2",
     "@vue/cli-plugin-eslint": "^4.1.2",
     "@vue/cli-service": "^4.1.2",
-    "@vue/eslint-config-standard": "^4.0.0",
+    "@vue/eslint-config-standard": "^5.1.0",
     "core-js": "^3.4.4",
-    "eslint": "^5.16.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-import": "^2.18.0",
+    "eslint-plugin-node": "^9.1.0",
+    "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-vue": "^6.1.2",
     "stylus": "^0.54.7",
     "stylus-loader": "^3.0.2",
     "vue-template-compiler": "^2.6.10"