现在的项目前端都很很庞大，往往也是多人合作开发，对代码的格式规范或代码风格要求尤其重要，一个看着统一整齐的代码格式，也能在实际开发中起到事半功倍的作用，起码能起到心情愉悦的作用。
本文结合自身在项目开发中的配置，记录一下Eslint和Prettier工具的配置和部分可能会遇到的问题，如有错误，请指正。
Eslint和Prettier的区别
两者的区别简单一句话介绍就是：Eslint或其他lint类工具主要功能是代码格式和代码质量的校验，而Prettier主要是代码格式的校验。
Eslint
Eslint是一个开源的 JavaScript 的 linting 工具，使用 espree 将 JavaScript 代码解析成抽象语法树 (AST)，然后通过AST 来分析我们代码，从而提供两种提示：
- 代码质量问题：使用方式有可能有问题(problematic patterns)
- 代码风格问题：风格不符合一定规则 (doesn’t adhere to certain style guidelines)
- 代码质量规则 (code-quality rules)
- no-unused-vars
- no-extra-bind
- no-implicit-globals
- prefer-promise-reject-errors
- …
- 代码风格规则 (code-formatting rules)
- max-len
- no-mixed-spaces-and-tabs
- keyword-spacing
- comma-style
Eslint主要解决代码质量问题。
Prettier
Prettier 声称自己是一个有主见的代码格式化工具，Prettier会处理格式规则，但可能不会使你完全满意，可也不会丑，而且可以通过 .prettierrc等文件修改
上面介绍中可以看出，实际项目开发中就可以使用Eslint+Prettier来规范项目中的代码质量和风格，只是配置会有些麻烦。
ESLint 与 Prettier配合使用
首先是在项目文件夹下安装这两个工具：
npm install prettier eslint -D
项目根目录下创建配置文件 eslintrc.js 和 .prettierrc.js。
.eslinrc.*
其中eslintrc.js可以通过命令行创建
npx eslint --init
# 同 ./node_modules/.bin/eslint --init
# 或
npm init @eslint/config
#或使用yarn
yarn create @eslint/config
此命令会根据选择自动安装部分依赖，并且可以选择Eslint文件支持的几种格式：
- JavaScript - 使用 .eslintrc.js 或者 .eslintrc.cjs然后输出一个配置对象。
- YAML - 使用 .eslintrc.yaml 或 .eslintrc.yml 去定义配置的结构。
- JSON - 使用 .eslintrc.json 去定义配置的结构，ESLint 的 JSON 文件允许 JavaScript 风格的注释。
- (弃用) - 使用 .eslintrc，可以使 JSON 也可以是 YAML。
- package.json - 在 package.json 里创建一个 eslintConfig属性，在那里定义你的配置。
以上优先级顺序从1~5依次降低
例：
/*
$ npx eslint --init
✔ How would you like to use ESLint? · style
✔ What type of modules does your project use? · esm
✔ Which framework does your project use? · react
✔ Does your project use TypeScript? · No / Yes
✔ Where does your code run? · browser
✔ How would you like to define a style for your project? · guide
✔ Which style guide do you want to follow? · standard
✔ What format do you want your config file to be in? · javascript
*/
// 上面的回答对应下面的 .eslint.js 文件
{
"env": {
"browser": true,
"es2021": true
},
"extends": ["plugin:react/recommended", "standard"],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 12,
"sourceType": "module"
},
"plugins": ["react", "@typescript-eslint"],
"rules": {}
}
.prettierrc.js
配置可如下设置：
module.exports = {
"printWidth": 80, //一行的字符数，如果超过会进行换行，默认为80
"tabWidth": 2, //一个tab代表几个空格数，默认为80
"useTabs": false, //是否使用tab进行缩进，默认为false，表示用空格进行缩减
"singleQuote": false, //字符串是否使用单引号，默认为false，使用双引号
"semi": true, //行位是否使用分号，默认为true
"trailingComma": "none", //是否使用尾逗号，有三个可选值"<none|es5|all>"
"bracketSpacing": true, //对象大括号直接是否有空格，默认为true，效果：{ foo: bar }
"parser": "babylon" //代码的解析引擎，默认为babylon，与babel相同。
}
Prettier+ESLint检测
eslint-plugin-prettier插件会调用prettier对代码风格进行检查
npm install eslint-plugin-prettier -D
然后修改 .eslintrc.* 配置文件
{
//...
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
//...
}
原理是 以 ESLint 规则的方式运行 Prettier，通过 Prettier 找出格式化前后的差异，prettier进行差异标记，借助ESLint的autofix功能，在保存代码的时候，自动将抛出error的地方进行fix。
插件冲突
通过使用
eslint-config-prettier配置，能够关闭与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次。使用的时候需要确保，这个配置在extends的最后一项
//.eslintrc.*
{
//...
extends: [
// ...
"prettier",
],
// ...
}
Vscode配置
在vscode中安装Eslint和Prettier插件，然后进入settings.json，进行配置：
建议在工作区进行编辑设置，项目中会出现类似如下文件：
.vscode/
|- extensions.json
|- README.md
|- settings.json
{
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true,
},
"eslint.validate": [
"javascript",
"javascriptreact"
],
"eslint.options": {
"extensions": [
".js",
".jsx",
".tsx"
]
},
}
editor.codeActionsOnSave: 在保存代码时自动格式化，eslint.validate: 如果需要支持其他类型，可在此处添加，如vue等
多层级项目不提示
当项目文件不是在一级文件夹下，而是有多层级，这种情况下，Eslint就不会对检测到的语法进行标红提示，此时需要修改Eslint的工作目录区eslint.workingDirectories，把对应的项目地址添加进去就可以了。
"eslint.workingDirectories": [
"./admin",
"./service"
],
使用luoshen
项目代码的规范配置是一件耗时费力的事，而且不一定符合所有的人的习惯，也关乎团队合作中的代码质量问题。luoshen 是包含了 Prettier，ESLint，StyleLint和 Husky 的配置文件合集，可以开箱即用，能节约很大一部分时间。并能支持React项目、Vue项目及TypeScript。使用方式参见官方文档。
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 chaoyumail@126.com
