vue项目中使用eslint和prettier

以下所介绍的是个人在实际项目中使用的比较舒服的配置，每个人的习惯不同，仅供参考。

eslint用来限制编码规则及检查代码是否有错，prettier用来格式化代码。

准备工作

1.vscode安装eslint、prettier、vetur插件

2.vue-cli构建项目时自定义选项选择eslint+Standard config

3.代码格式化工具使用prettier（ctrl+shift+f格式化代码）

4.修改vscode prettier插件配置

我是在工作区里修改的，这样不影响其他项目，修改之后会在项目根目录生成一个.vscode文件夹，如下图：

以下是我的配置：

.vscode/setting.json:
{
    "prettier.arrowParens": "avoid",
    "prettier.printWidth": 100,
    "prettier.semi": false,
    "prettier.singleQuote": true,
    "prettier.trailingComma": "none",
    "prettier.useEditorConfig": false
}

5.根据项目需求修改.eslintrc.js

以下是使用vue-cli构建项目的具体流程

1.使用vue create xxx（项目名） 创建项目

2.选择自定义配置

3.按照自己的实际需求勾选

4.不使用history模式

5.选择dart-sass选项

dart-sass 和 node-sass 都是用来将sass编译成css的工具。

区别

• node-sass 是用 node(调用 cpp 编写的 libsass)来编译 sass；
• dart-sass 是用 drat VM 来编译 sass；
• node-sass是自动编译实时的，dart-sass需要保存后才会生效
• 推荐 dart-sass 性能更好（也是 sass 官方使用的）

6.代码检查工具我选择的是eslint + Standard comfig

7.等待项目初始化