本文已参与「新人创作礼」活动, 一起开启掘金创作之路。
前言
接上篇文章 ESLint配合VSCode 统一团队前端代码规范,再讲解下ESLint
的Format功能。
前端 Code Format 比较流行的大概有以下几个方式:
- IDE自带的Format,比如VSCode就自带大部分格式文件的format功能,并可以通过设置配置。
- Prettier,比较流行的Format工具,"一个固执己见的代码格式化工具"。可选的配置很少,不太喜欢老是换行,没在项目里应用过。
官网:prettier.io/ 测试format效果:prettier.io/playground/
- ESLint,通过配置一些rules,达到格式化效果。
有些开发会选择同时使用Prettier
和ESLint
来规范代码,用Prettier
实现代码格式规则(Formatting rules)
,用ESLint
来实现代码质量规则(Code-quality rules)
。
其实只用ESLint
也可以通过rules同时满足代码格式
和代码质量
两个规则,而且相比Prettier
更可配置化,想严格些、宽松些、或者具体规范一个具体规则都可以。下面就具体介绍下如何用ESLint进行Code Fromat。
ESLint Format
ESLint
配置介绍参考上篇文章 ESLint配合VSCode 统一团队前端代码规范,本文主要说下ESLint
的Format功能。
执行eslint --init
指令,第一步选择第三个选项,check语法、同时规范code style:
然后后面有一步选项使用哪种类型code style:
这里推荐选择第一项 Use a popular style guide
,选择一个市面上的主流风格。推荐有4个,Airbnb
和Google
分别是这两家公司出的规范。Standard
是开源社区的编码规范,它最大的特点是不用在语句的末尾添加分号。
这里选择Standard
,这里 有官网中文介绍,这里 有所有的rules介绍,可以看到都是用到了ESLint的各种rules,然后给打包好了,这样就不用使用者去配置了。
继续选择 Would you like to install them now with npm? · Yes
后,系统会自动按照所需的npm包,然后发现 .eslintrc.js
配置文件多了一个extends
。
原理是eslint-config-standard
这个包里有一份eslint config配置,里面配置好了plugin
rules
等,然后通过extends
扩展到项目里。详细配置可以在node_modules
里或者GitHub上找到。
如果想改变其中一些rules,或者想追加一些rules,也可以修改自己的.eslintrc.js rules
来进行覆盖。
如果之前那步选择了Answer questions about your style
,接下来会根据回答问题的答案,ESLint给你自动生成出来对应的rules配置,如果对rules不是太专业,不建议这种方式。
VSCode
VSCode有自己的format功能,如果安装了ESLint
插件,并且有些rules冲突了,可能会导致会format两遍,导致结果不对。这时候可以通过settings
插件设置,这里建议设置Workspace
下的settings
,设置后会在.vscode
路径下生成settings.json文件,可以提交到git上统一开发团队内部规范:
// .vscode/settings.json
{
"eslint.enable": true, // 开启eslint插件功能
"eslint.format.enable": true, // 开启eslint format功能
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true // save文件自动fix
}
}
也可以按Ctrl+Shift+P
,选择Format Document With...
,再选择ESLint
用作默认formatter
。
不知道这里为啥有这么多ESLint
使用时还发现个问题,就是在敲代码时,会一直显示如下图所示的红色提示,总是以为自己写的语法有问题,其实只是没有format,由于save时会自动format,所以这种错误在敲代码时是不需要考虑的。那怎么不提示呢?还是通过settings
:
// .vscode/settings.json
{
"eslint.enable": true,
"eslint.format.enable": true,
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"eslint.rules.customizations": [ // 配置具体rule的提示方式
{
"rule": "semi",
"severity": "off"
},
{
"rule": "eol-last",
"severity": "off"
},
{
"rule": "space-before-blocks",
"severity": "off"
},
{
"rule": "space-before-function-paren",
"severity": "off"
}
]
}
最后
本文主要介绍了如何使用ESLint
来Format Code,说是Format,其实都是用ESLint rules
来规范的。能同时满足代码格式
和代码质量
两个规则,相比Prettier
更可配置化,可以自由选择不同的popular style guide
,想严格些、宽松些都可以。