个人开发环境简介,工具用的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.