个人开发环境简介,工具用的Visual Studio Code,因为每个人的开发环境不同，不可能所有解决方案通用，防止踩坑。
PS F:\VueWorkSpace\vue_router_test> node -v
v16.12.0
PS F:\VueWorkSpace\vue_router_test> npm -v
8.1.0
PS F:\VueWorkSpace\vue_router_test> npm eslint -v
8.1.0
PS F:\VueWorkSpace\vue_router_test> vue -V
@vue/cli 5.0.8
PS F:\VueWorkSpace\vue_router_test> npm info vue
vue@3.3.4 | MIT | deps: 5 | versions: 445
...(后续省略了)
这几天学习Vue3 Router的时候发现ESLint又他妈抽风了，网上找遍了，CSDN一群傻吊在那里误人子弟，有的直接关掉ESLint语法检查，有的发帖发一半，孩子分段生的，分享一下解决办法，亲测有效，报错如下
PS F:\VueWorkSpace\vue_router_test> npm run serve
> vue_router_test@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
ERROR Failed to compile with 1 error 上午10:48:39
[eslint]
F:\VueWorkSpace\vue_router_test\src\components\Banner.vue
13:11 error Component name "Banner" should always be multi-word vue/multi-word-component-names
✖ 8 problems (1 error, 7 warnings)
0 errors and 7 warnings potentially fixable with the `--fix` option.
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
ERROR in [eslint]
F:\VueWorkSpace\vue_router_test\src\components\Banner.vue
13:11 error Component name "Banner" should always be multi-word vue/multi-word-component-names
✖ 8 problems (1 error, 7 warnings)
0 errors and 7 warnings potentially fixable with the `--fix` option.
webpack compiled with 1 error
解决方案:在./.eslintrc.js里添加如下配置,没有就新建一个,不一定非得是js文件，支持js/json/yaml文件，我这里是Vue官方文档里的示例就是用的js
//官方文档：https://eslint.vuejs.org/user-guide/#installation
module.exports = {
rules: {
'vue/multi-word-component-names': 'off'
}
}
然后重新运行npm run serve就可以了,报Warning是因为缩进不符合ESLint规范，要么改ESLint检查的默认配置，要么调整VsCode的默认缩进
PS F:\VueWorkSpace\vue_router_test> npm run serve
> vue_router_test@0.1.0 serve
> vue-cli-service serve
INFO Starting development server...
WARNING Compiled with 1 warning 上午11:10:52
[eslint]
F:\VueWorkSpace\vue_router_test\src\App.vue
2:1 warning Expected indentation of 2 spaces but found 4 spaces vue/html-indent
2:5 warning Require self-closing on Vue.js custom components (<Banner>) vue/html-self-closing
3:1 warning Expected indentation of 2 spaces but found 4 spaces vue/html-indent
4:1 warning Expected indentation of 4 spaces but found 6 spaces vue/html-indent
5:1 warning Expected indentation of 6 spaces but found 8 spaces vue/html-indent
6:1 warning Expected indentation of 8 spaces but found 10 spaces vue/html-indent
6:11 warning Require self-closing on Vue.js custom components (<router-link>) vue/html-self-closing
7:1 warning Expected indentation of 8 spaces but found 10 spaces vue/html-indent
7:11 warning Require self-closing on Vue.js custom components (<router-link>) vue/html-self-closing
8:1 warning Expected indentation of 6 spaces but found 8 spaces vue/html-indent
9:1 warning Expected indentation of 4 spaces but found 6 spaces vue/html-indent
10:1 warning Expected indentation of 2 spaces but found 4 spaces vue/html-indent
F:\VueWorkSpace\vue_router_test\src\components\Banner.vue
2:1 warning Expected indentation of 2 spaces but found 4 spaces vue/html-indent
3:1 warning Expected indentation of 4 spaces but found 8 spaces vue/html-indent
4:1 warning Expected indentation of 6 spaces but found 12 spaces vue/html-indent
5:1 warning Expected indentation of 8 spaces but found 16 spaces vue/html-indent
6:1 warning Expected indentation of 6 spaces but found 12 spaces vue/html-indent
7:1 warning Expected indentation of 4 spaces but found 8 spaces vue/html-indent
8:1 warning Expected indentation of 2 spaces but found 4 spaces vue/html-indent
✖ 19 problems (0 errors, 19 warnings)
0 errors and 19 warnings potentially fixable with the `--fix` option.
You may use special comments to disable some warnings.
Use // eslint-disable-next-line to ignore the next line.
Use /* eslint-disable */ to ignore all warnings in a file.
App running at:
- Local: http://localhost:8081/
- Network: http://192.168.12.18:8081/
Note that the development build is not optimized.
To create a production build, run npm run build.