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的代码格式差异的
使⽤
1. 安装插件
某些编辑器已经内置了EditorConfig插件，⽆需另外安装了，⽐如 WebStorm、VisualStudio、pyCharm等等
某些编辑器没有内置，需要⾃⾏安装插件，⽐如vscode，需要安装EditorConfig for VS Code
2. 添加配置⽂件
定义格式规则，避免常见的代码格式不⼀致和丑陋的 diffs
通常在项⽬根⽬录下，添加.editorconfig配置⽂件，贴⼀份常见的配置
#
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，也就是预设规则，通常由⼀些最佳实践集成⽽来
1. ⽣成配置⽂件
使⽤官⽹的CLI，按⾃⼰的项⽬的需求⽣成。在项⽬根⽬录执⾏以下命令：
npx eslint --init
回答⼏个问题后，⽐如配置⽂件格式、是否使⽤react,vue，是否⽀持typescript等，则会⾃动在根⽬录下⽣成对应的配置⽂件
2. 下载插件
以vscode为例，下载ESLint插件，插件会根据项⽬根⽬录下的配置⽂件，校验代码格式
如果⾃动修复 autoFix 功能，需进⼀步配置插件：
左下⾓打开配置（Setting），以json格式展⽰
给setting.json添加如下配置项：
"editor.formatOnSave": true,
"deActionsOnSave": {
"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的使⽤了，有需要请移步
总结
visual studio和vs code的区别EditorConfig 是⽤来抹平编辑器差异的，⽐如⽂件编码，锁进格式等
ESLint 关注于代码质量校验和代码格式校验，配合插件⽀持autoFix和错误提⽰，完全可插拔
Prettier Prettier只关注代码格式，也⽀持⾃动修复，规则和ESLint不同

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。