editorconfig、eslint、prettier三者的区别、介绍及使用
每次搭建新项目都少不了这些工具,但时间一久就忘记了,下次搭新项目时又要四处查官方文档,因此特此记录,主要内容是对这三个工具的理解,以及具体使用方式
editorconfig
理解
先看官网的定义:
EditorConfig helps maintain consistent coding styles for multiple developers working on the same project across various editors and IDEs.
EditorConfig 帮助使用不同IDE开发同一个项目的开发者,维持固定统一的代码风格。
简而言之,EditorConfig就是为了抹平不同IDE的代码格式差异的
使用
- 安装插件
某些编辑器已经内置了EditorConfig插件,无需另外安装了,比如 WebStorm、VisualStudio、pyCharm等等
某些编辑器没有内置,需要自行安装插件,比如vscode,需要安装 EditorConfig for VS Code
- 添加配置文件
定义格式规则,避免常见的代码格式不一致和丑陋的 diffs
通常在项目根目录下,添加.editorconfig
配置文件,贴一份常见的配置
# http://editorconfig.org
root = true
# 说明
## 设置文件编码为 UTF-8;
## 用两个空格代替制表符;
## 在保存时删除尾部的空白字符;
## 在文件结尾添加一个空白行;
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
[Makefile]
indent_style = tab
ESLint
理解
eslint的关注点是代码质量和代码格式。
何为代码质量?如未使用变量、三等号、全局变量声明等问题
何为代码格式?如单行代码太长、tab的长度、空格、逗号,单双引号等问题
对于质量和格式问题,eslint可以给出错误或警告提示,也可以自动修复,autofix
使用
eslint的原则是一切皆可配,没有什么必须要禁止,或必须要使用的规则,如果有,这些规则应该从语言本身就限制掉
灵活是有代价的,虽然每个规则都可配,但要配置那么多规则也是及其繁琐的,因此有人提供了一些preset,也就是预设规则,通常由一些最佳实践集成而来
- 生成配置文件
使用官网的CLI,按自己的项目的需求生成。在项目根目录执行以下命令:
npx eslint --init
回答几个问题后,比如配置文件格式、是否使用react,vue,是否支持typescript等,则会自动在根目录下生成对应的配置文件
- 下载插件
以vscode为例,下载ESLint
插件,插件会根据项目根目录下的配置文件,校验代码格式
如果自动修复 autoFix 功能,需进一步配置插件:
- 左下角打开配置(Setting),以json格式展示
- 给setting.json添加如下配置项:
"editor.formatOnSave": true,
"editor.codeActionsOnSave": {
"source.fixAll": true
}
这样,对于可自动修复的格式错误,在保存文件时,eslint会自动帮我们修复
此外,如果项目对格式强制要求,还可加载husky和lint-staged在commit前对更改的代码做lint校验(前者用来给git流程添加钩子,后者用来给只更改的代码而不是整个项目做lint),lint不通过则不予commit
(题外话:个人不太建议这种方式,每次commit都要多等几秒,太慢了,还是尽量靠自觉 )
Prettier
Prettier只关注代码格式。在之前很流行,尤其是在eslint还不支持autoFix时。
它即可单独使用,也可以配合编辑器使用,或和eslint一起使用。
这里有人可能会有疑问,eslint不也关注代码格式,做格式校验吗? 为啥还要用Prettier?这是因为一是在之前eslint不支持autoFix, 二是两个的规则并不完全相同
其实,笔者也甚是不喜这么多的配置文件,因此最近的项目便不加再Prettier了,只用eslint做代码质量和格式的校验,加上autoFix,基本够用了。
所以这里不再细说Prettier的使用了,有需要请移步 Prettier官网
总结
- EditorConfig 是用来抹平编辑器差异的,比如文件编码,锁进格式等
- ESLint 关注于代码质量校验 和 代码格式校验,配合插件支持autoFix和错误提示,完全可插拔
- Prettier Prettier只关注代码格式,也支持自动修复,规则和ESLint不同