refactor: sub-package eslint maintance (vuejs#6078)

using eslint@7 and @babel/eslint-parser in sub-package

Author: fangbinwei

.eslintrc.js

@@ -1,33 +1,33 @@
 module.exports = {
   extends: [
-    "plugin:vue-libs/recommended"
+    'plugin:vue-libs/recommended'
   ],
   plugins: [
-    "node"
+    'node'
   ],
   env: {
-    "jest": true
+    'jest': true
   },
   globals: {
     name: 'off'
   },
   rules: {
-    "indent": ["error", 2, {
-      "MemberExpression": "off"
+    'indent': ['error', 2, {
+      'MemberExpression': 'off'
     }],
-    "no-shadow": ["error"],
-    "node/no-extraneous-require": ["error", {
-      "allowModules": [
-        "@vue/cli-service",
-        "@vue/cli-test-utils"
+    'no-shadow': ['error'],
+    'node/no-extraneous-require': ['error', {
+      'allowModules': [
+        '@vue/cli-service',
+        '@vue/cli-test-utils'
       ]
     }]
   },
   overrides: [
     {
-      files: ['**/__tests__/**/*.js', "**/cli-test-utils/**/*.js"],
+      files: ['**/__tests__/**/*.js', '**/cli-test-utils/**/*.js'],
       rules: {
-        "node/no-extraneous-require": "off"
+        'node/no-extraneous-require': 'off'
       }
     }
   ]

packages/@vue/cli-service-global/__tests__/entry.vue

@@ -3,9 +3,9 @@
 </template>
 
 <script>
-  export default {
-    data: () => ({ msg: 'hi' })
-  }
+export default {
+  data: () => ({ msg: 'hi' })
+}
 </script>
 
 <style>

packages/@vue/cli-service-global/__tests__/globalService.spec.js

@@ -53,6 +53,28 @@ test('global serve', async () => {
   )
 })
 
+test('global serve with eslint', async () => {
+  try {
+    await serve(
+      () => execa(binPath, ['serve', 'foo.js'], { cwd }),
+      async ({ page, nextUpdate, helpers }) => {
+        expect(await helpers.getText('h1')).toMatch('hi')
+
+        write('foo.js', entryJs.replace(`$mount('#app')`, `$mount('#app');`))
+        const data = await nextUpdate()
+        expect(data).toMatch('App updated')
+
+        write('foo.js', entryJs.replace(`$mount('#app')`, `$mount('#app');;`))
+        await nextUpdate()
+      }
+    )
+  } catch (err) {
+    // Failed because of no-extra-semi
+    expect(err).toMatch('Failed to compile with 1 errors')
+  }
+  expect.assertions(3)
+})
+
 let server, browser, page
 test('global build', async () => {
   const { stdout } = await execa(binPath, ['build', 'foo.js'], { cwd })

packages/@vue/cli-service-global/lib/globalConfigPlugin.js

@@ -1,17 +1,19 @@
 const path = require('path')
 const resolve = require('resolve')
 const { findExisting } = require('./util')
+const { loadPartialConfigSync } = require('@babel/core')
 
 module.exports = function createConfigPlugin (context, entry, asLib) {
   return {
     id: '@vue/cli-service-global-config',
     apply: (api, options) => {
+      const _entry = path.resolve(context, entry)
       api.chainWebpack(config => {
         // entry is *.vue file, create alias for built-in js entry
         if (/\.vue$/.test(entry)) {
           config.resolve
             .alias
-              .set('~entry', path.resolve(context, entry))
+              .set('~entry', _entry)
           entry = require.resolve('../template/main.js')
         } else {
           // make sure entry is relative
@@ -93,6 +95,9 @@ module.exports = function createConfigPlugin (context, entry, asLib) {
           ? !!(require(path.join(context, 'package.json')).eslintConfig)
           : !!ESLintConfigFile
 
+        const babelConfig = loadPartialConfigSync({ filename: _entry })
+        const hasBabelConfig = !!babelConfig && babelConfig.hasFilesystemConfig()
+
         // set inline eslint options
         config.module
           .rule('eslint')
@@ -111,7 +116,9 @@ module.exports = function createConfigPlugin (context, entry, asLib) {
                     'eslint:recommended'
                   ],
                   parserOptions: {
-                    parser: 'babel-eslint'
+                    parser: '@babel/eslint-parser',
+                    requireConfigFile: hasBabelConfig,
+                    babelOptions
                   },
                   rules: {
                     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',

packages/@vue/cli-service-global/package.json

@@ -22,13 +22,14 @@
   },
   "homepage": "https://github.com/vuejs/vue-cli/tree/dev/packages/@vue/cli-service-global#readme",
   "dependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/eslint-parser": "^7.12.1",
     "@vue/cli-plugin-babel": "^4.5.8",
     "@vue/cli-plugin-eslint": "^4.5.8",
     "@vue/cli-service": "^4.5.8",
-    "babel-eslint": "^10.1.0",
     "chalk": "^4.1.0",
     "core-js": "^3.6.5",
-    "eslint": "^6.7.2",
+    "eslint": "^7.13.0",
     "eslint-plugin-vue": "^6.2.2",
     "regenerator-runtime": "^0.13.5",
     "resolve": "^1.17.0",

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

@@ -9,5 +9,11 @@ module.exports = {
     mapSharedData: false,
     Vue: false,
     name: 'off'
+  },
+  parserOptions: {
+    parser: '@babel/eslint-parser',
+    babelOptions: {
+      cwd: __dirname
+    }
   }
 }

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

@@ -18,12 +18,14 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/eslint-parser": "^7.12.1",
     "@vue/cli-plugin-babel": "^4.5.8",
     "@vue/cli-plugin-eslint": "^4.5.8",
     "@vue/cli-service": "^4.5.8",
     "@vue/eslint-config-standard": "^5.1.2",
     "core-js": "^3.6.5",
-    "eslint": "^6.7.2",
+    "eslint": "^7.13.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",

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

@@ -12,7 +12,10 @@ module.exports = {
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
   },
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@babel/eslint-parser',
+    babelOptions: {
+      cwd: __dirname
+    }
   },
   globals: {
     ClientAddonApi: false,

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

@@ -18,12 +18,14 @@
   },
   "license": "MIT",
   "devDependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/eslint-parser": "^7.12.1",
     "@vue/cli-plugin-babel": "^4.5.8",
     "@vue/cli-plugin-eslint": "^4.5.8",
     "@vue/cli-service": "^4.5.8",
     "@vue/eslint-config-standard": "^5.1.2",
     "core-js": "^3.6.5",
-    "eslint": "^6.7.2",
+    "eslint": "^7.13.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",

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

@@ -23,6 +23,9 @@ module.exports = {
   },
 
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@babel/eslint-parser',
+    babelOptions: {
+      cwd: __dirname
+    }
   }
 }

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

@@ -65,6 +65,8 @@
     "watch": "^1.0.2"
   },
   "devDependencies": {
+    "@babel/core": "^7.12.3",
+    "@babel/eslint-parser": "^7.12.1",
     "@vue/cli-plugin-babel": "^4.5.8",
     "@vue/cli-plugin-e2e-cypress": "^4.5.8",
     "@vue/cli-plugin-eslint": "^4.5.8",
@@ -74,10 +76,9 @@
     "ansi_up": "^4.0.4",
     "apollo-client": "^2.6.10",
     "apollo-link": "^1.2.14",
-    "babel-eslint": "^10.1.0",
     "core-js": "^3.6.5",
     "cross-env": "^7.0.2",
-    "eslint": "^6.7.2",
+    "eslint": "^7.13.0",
     "eslint-plugin-graphql": "^3.1.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",