首发
现在的项目前端都很很庞大,往往也是多人合作开发,对代码的格式规范或代码风格要求尤其重要,一个看着统一整齐的代码格式,也能在实际开发中起到事半功倍的作用,起码能起到心情愉悦的作用。
本文结合自身在项目开发中的配置,记录一下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对commit-msg进行校验,lint-stage进行格式校验。可以精简配置,能节约很大一部分时间。并能支持React项目、Vue项目及TypeScript。使用方式参见官方文档。