前言

如果你的项目正好也是vue-cli，编辑器是vscode，可以借鉴一下我的配置，其实基本原理都差不多，其他编辑器可以根据自己的理解修改一下。

主要思路

eslint有优先级，只需要把项目中eslint.js的root设置为true，编辑器就会以你项目中的配置文件为准，这样方便对不同的项目进行不一样的代码格式化。

• Vetur（非必须）：vue项目的代码高亮工具，自带代码格式化功能，使用vscode的格式化快捷键的时候，如果选择了vetur，就是根据vetur自己的格式规则，这也是为什么格式化后的代码，会和我们项目中的eslint配置起冲突，所以我们需要关闭vetur的格式化工具，使用我们项目中的elint规则来格式化代码。

• eslint：代码格式检查工具，可根据其他公司的插件进行配置，或者自定义格式

vscode插件安装

• eslint插件，用以编辑器代码报错提示，方便一边开发一边看代码是否完整
• Vetur插件，vue项目的代码高亮工具，也是

配置

vscode

// 保存文件时自动格式化
"editor.formatOnSave": true,
// 用eslint的规则检测文件
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
},
"eslint.format.enable": true,
//autoFix默认开启，只需输入字符串数组即可
"eslint.validate": [ // 检测vue、js、html文件
    "javascript",
    "vue",
    "html"
],
// 对于.vue文件,关闭prettier,交给eslint fix。如果有其他工具也需要关闭
"vetur.format.defaultFormatter.css": "none",
"vetur.format.defaultFormatter.html": "none",
"vetur.format.defaultFormatter.js": "none",
"vetur.format.defaultFormatter.less": "none",
"vetur.format.defaultFormatter.postcss": "none",
"vetur.format.defaultFormatter.scss": "none",
"vetur.format.defaultFormatter.stylus": "none",
"vetur.format.defaultFormatter.ts": "none",

注意事项

新版本的eslint已经很强大，自带格式化代码的功能，但目前许多插件都自带了格式化规则，所以会和eslint的起冲突，把其他插件的都关闭就好了。当然eslint也有不支持的地方，比如stylus，需要配合vetur使用。