项目开发中，往往是多人协助共同开发，每个人的风格习惯都不一样，为保持代码风格统一，我们需要配合部分插件使用达到预期的效果。统一代码风格，Eslint负责检查代码格式是否符合定义的格式，如使用单引号还是双引号，末尾是否使用分号，对象字面量属性值是否使用空格等等；Prettier负责按照定义的规则格式化代码，配合
eslint-config-prettier插件格式的代码符合ESlint规范。该配置的每一步都是在项目中使用过的。
特别说明： 为保证项目的一致性，文章使用@vue/cli@4.4.6版本，VS code和全局/项目安装了Eslint。该配置参考了
油管大神Dan Fletcher ,
eslint-plugin-vue ,
eslint-config-prettier
1.创建项目
npx @vue/cli@4.4.6 create linting-with-vue
)
-
选择默认配置
-
项目初始化完成后，进入项目
cd linting-with-vue
2.配置Vetur
1. vs code扩展程序中安装Vetur
2. 勾选配置
Ctrl+,打开vs code设置，搜索Vetur,勾选以下配置
3. 修改package.json
4. Prettier/eslint-config-prettier
1. 安装Prettier/eslint-config-prettier
-
VS code扩展中安装Prettier插件
Ctrl+,打开设置，搜索Prettier, 勾选设置： -
项目中安装Prettier/eslint-config-prettie
yarn add -D prettier yarn add -D eslint-config-prettier -
项目根目录下创建
prettier.config.js,并编辑// eslint中设置的规则可以在这里更改，代码保存格式化时会按照该规则格式化
module.exports = {
'singleQuote': true, //使用单引号，
'semi': false // 语句结束不用分号
}
-
修改
package.json"extends": [
"plugin:vue/recommended",
"eslint:recommended",
"prettier",
"prettier/vue"
],
"rules": { //eslint相关规则在这里修改
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
]
}
-
别忘记在VS code中设置 保存时格式化代码
5.总结
该配置在Vue项目中使用eslint-plugin-vue 配合Prettier、 eslint-config-prettier 在保存代码时按照规则格式化代码，同时又不与Eslint冲突，是个不错的选择。
