eslint检测时报错

配置是这样的：
安装的依赖：

"devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0",
    "autoprefixer": "^9.7.5",
    "babel-core": "^6.26.3",
    "babel-eslint": "^10.1.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "babel-loader": "^8.1.0",
    "babel-plugin-syntax-jsx": "^6.18.0",
    "babel-plugin-transform-vue-jsx": "^3.7.0",
    "babel-preset-env": "^1.7.0",
    "cross-env": "^7.0.2",
    "css-loader": "^3.4.2",
    "eslint": "^6.8.0",
    "eslint-config-standard": "^14.1.1",
    "eslint-loader": "^4.0.0",
    "eslint-plugin-html": "^6.0.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1",
    "eslint-plugin-vue": "^6.2.2",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "file-loader": "^6.0.0",
    "html-webpack-plugin": "^4.0.3",
    "postcss-loader": "^3.0.0",
    "rimraf": "^3.0.2",
    "style-loader": "^1.1.3",
    "stylus": "^0.54.7",
    "stylus-loader": "^3.0.2",
    "url-loader": "^4.0.0",
    "vue-loader": "^15.9.1",
    "vue-style-loader": "^4.1.2",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.10.3",
    "webpack-merge": "^4.2.2"
  }

.eslintrc文件中：

{
    "extends" : "standard",
    "plugins" : ["html"],
    "parser": "babel-eslint"
}

package.json文件中:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build:client": "cross-env NODE_ENV=production webpack --config build/webpack.config.client.js",
    "build": "npm run clean && npm run build:client",
    "clean": "rimraf dist",
    "lint": "eslint --ext .js --ext .jsx --ext .vue client/",
    "lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/",
    "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.client.js"
  }

并在webpack.config.base.js中添加了一条rule：

{
   test: /\.(vue|js|jsx)$/,
    loader: "eslint-loader",
    exclude: /node_modules/,
    enforce: 'pre'
}

表示对于.vue/.js/.jsx文件进行预处理，就是说在使用真正的loader加载之前都会先使用eslint-loader预先处理一遍，enforce的值有两个pre/post，可以在之前或者之后都可以指定对应的loader进行预处理或者后处理。

一开始运行npm run lint的时候，会有很多报错， 然后在package.json中添加了"lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue client/"，他应该是会有自动修复功能的，但是设置完之后运行npm run lint-fix还是报错，报错信息是这样的：

G:\MyWeb\vue03-JTodo\client\App.vue
  11:1  error  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

   9 | </template>
  10 | 
> 11 | <script>
     | ^
  12 | import Header from './layout/header.vue'
  13 | import Footer from './layout/footer.jsx'
  14 | import Todo from './views/todo/todo.vue'

G:\MyWeb\vue03-JTodo\client\layout\header.vue
  7:1  error  Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

   5 | </template>
   6 | 
>  7 | <style lang="stylus" scoped>
     | ^
   8 | .main-header
   9 |     text-align center
  10 |     h1

G:\MyWeb\vue03-JTodo\client\views\todo\item.vue
  2:16  error  Parsing error: Unexpected token

  1 | <template>
> 2 |     <div :class="['todo-item', todo.completed ? 'completed' : '']">
    |                ^
  3 |         <input
  4 |             type="checkbox"
  5 |             class="toggle"

G:\MyWeb\vue03-JTodo\client\views\todo\tabs.vue
  7:17  error  Parsing error: Unexpected token

   5 |             <span
   6 |                 v-for="state in states"
>  7 |                 :key="state"
     |                 ^
   8 |                 :class="[state, filter === state ? 'actived' : '']"
   9 |                 @click="toggleFilter(state)"
  10 |             >

G:\MyWeb\vue03-JTodo\client\views\todo\todo.vue
  8:13  error  Parsing error: Unexpected token

   6 |             autofocus
   7 |             placeholder="请输入待完成事项"
>  8 |             @keyup.enter="addTodo"
     |             ^
   9 |         >
  10 |         <item
  11 |             :todo="todo"

✖ 5 problems (5 errors, 0 warnings)

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! vue02-todo@1.0.0 lint-fix: `eslint --fix --ext .js --ext .jsx --ext .vue client/`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the vue02-todo@1.0.0 lint-fix script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-04-04T09_31_37_675Z-debug.log

根据报错信息：

Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

参考的方案为：
在.eslintrc添加"extends": [“standard”, “plugin:vue/recommended”]：

{
    "extends" : ["standard", "plugin:vue/recommended"],
    "plugins" : ["html"],
    "parser": "babel-eslint"
}

结果运行npm run lint-fix出现了更多的error和warning：

G:\MyWeb\vue03-JTodo\client\index.js
  1:1  warning  Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error  vue/attributes-order
  1:1  warning  Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error  vue/no-v-html
  1:1  warning  Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error  vue/this-in-template
  1:1  warning  Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error  vue/attribute-hyphenation
  1:1  warning  Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error  vue/html-closing-bracket-newline

在错误分析里面有一个与错误相关的链接：https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error

.eslintrc文件中的配置就变成了这样：

{
    "extends": ["standard", "plugin:vue/vue3-recommended"],
    "plugins" : [
        "vue"
    ],
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": "babel-eslint",
        "ecmaVersion": 2017,
        "sourceType": "module"
    }
}

npm run lint-fix依然报错：

Oops! Something went wrong! :(

ESLint: 6.8.0.

ESLint couldn't find the config "plugin:vue/vue3-recommended" to extend from. Please check that the name of the config is correct.

The config "plugin:vue/vue3-recommended" was referenced from the config file in "G:\MyWeb\vue03-JTodo\.eslintrc".

If you still have problems, please stop by https://gitter.im/eslint/eslint to chat with the team.

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! vue02-todo@1.0.0 lint-fix: `eslint --fix --ext .js --ext .jsx --ext .vue client/`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the vue02-todo@1.0.0 lint-fix script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2020-04-04T09_59_39_867Z-debug.log

把plugin:vue/vue3-recommended去掉，然后plugins中变成html，配置变成：

{
    "extends": ["standard"],
    "plugins" : [
        "html"
    ],
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": "babel-eslint",
        "ecmaVersion": 2017,
        "sourceType": "module"
    }
}

重新运行npm run lint-fix就可以了。

上面的报错问题倒是解决了，其中的原因现在还未知，后面多学习一些再来补充！！！