配置是这样的:
安装的依赖:
"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
就可以了。
上面的报错问题倒是解决了,其中的原因现在还未知,后面多学习一些再来补充!!!