前言
一个项目从创建到被重构，必定会经手很多人，每个人的代码风格迥异，就算是一个人从头到尾开发同一个项目，也无法保证前后开发的代码风格的相同。
约束，至关重要！不能让代码在不同的机器不同的IDE上出现不同的表现，不应该让单双引号在项目中乱飞...
.editorconfig
当项目成员使用不同的IDE或者不同的系统开发同一项目的时候，会出现什么问题？
像这种让强迫症患者抓狂的红，ctrl + s可以去掉，但主管一巴掌挥过来，你改别人的代码干什么！
不同的ID或者不同的系统会出现不同IDE存在对代码缩、换行符的不同设置，.editorconfig的作用就是为了在不同的开发环境上遵循.editorconfig的配置项，达到拥有同样的代表表现！
配置详解
indent_style
space | tab
space是当键下tab键时使用软选项卡填充缩进，也就是使用空格填充。tab是指键下tab键时使用硬选项卡填充缩进，也就是使用\t填充。
两个值具体区别如下：
当 indent_style 的值设置为 space 后，缩进的实际字符长度等 4 个空格的长度。
当 indent_style 的值设置成 tab 后，缩进的实际长度等于 1 个制表符的长度，但是制表符的长度等于 4，其实这里就是等于一个字符，只不过是字符在 IDE 上长等于 4 而已。
同样的缩进大小，一个占 4 个字符，一个占 1 个字符，代码量少的时候没啥区别，但是代码量一大，就不一样了。做个实验，写 10000 行有缩进的代码，使用不同的 indent_style，看看文件占用的磁盘大小，过程省去，直接公布结果：
结果发现，在代码量很大的时候，indent_style 为 tab 占用的磁盘比 space 的少。
那是不是可以下定论使用 tab 作为 indent_style 的值，不是的，您去 github 前 100star 项目看看人家是怎么配置的，您会发现人家都是用的 space！为什么和我们想的不一样！找了很多原因，下面这点是很有说服力的：
使用space可以提高代码的压缩率，因为现在的前端项目都在追寻最大的压缩率以减少文件传输占用的带宽，根据压缩原则，信息熵越大的压缩率越低。很明显，当取值为tab的时候，文件中大概率同时存在制表符和空格；而取值为space，文件就只存在空格了，所以space的信息熵就越低，压缩率就越高。
当然，如何你们公司dont care 这点带宽，使用tab也没啥问题，只要统一即可！
indent_size | tab_width
number
这个值是用来设置缩进的列数的，一般来说设置为4是最好的，也有挺多外国项目选择2列缩进数的，看自己喜欢吧。那indent_size 和tab_width有什么区别呢：
- indent_style为space时缩进的长度优先采用indent_size设置的值，如果没有设置indent_size，则采用tab_width的值
- indent_style为tab时缩进的长度优先采用tab_width设置的值, 如果没有tab_width， 则采用indent_size的值
end_of_line
lf | cr | crlf (大小写不限）
end_of_line设置的换行符的表示方式。先看一下这几个值是什么意思
- lf：全拼Line Feed，意思是换行，用符号 \n 表示
- cr: 全拼Carriage Return， 意思是回车， 用符号 \r 表示
- crlf：cr 和 lf的结合，回车换行，用符号 \r\n
不同的系统使用不同的换行符，如windows系统使用crlf作为换行符，linux/unix系统和较新版本的mac系统使用lf作为换行符， 旧版本的mac系统使用cr作为换行符。
既然有不同，那就应该统一起来，方式代码在不同的系统上有不同的换行符。基于少数服从多数，lf被更多系统使用，所以这个推荐使用lf作为end_of_line的值。还有一点是现在很多代码服务器或者业务服务器都是linux系统，本地和服务的代码换行符最好一样，以防一些文件字符操作的时候没有兼容！
charset
字符集，写utf-8就行了！
trim_trailing_whitespace
bool
这个值设置为true的时候会将换行符前面的字符删除空格，设置为false时不会删除，所以这里果断设置为true，我的代码不是空格堆起来的，不然老板说我造假😏。
insert_final_newline
bool
这个值设置为true的时候确保文件保存的时候以换行符结尾，设置为false则不会。这个也果断设置为true，因为防止有些读取文件的功能等待那个让它退出的换行符。
root
bool
这个值必须设置在.editorconfig文件的最前面，设置为true以停止对当前文件的.editorconfig文件搜索，IDE读到这个配置就不hi继续网上找.editorconfig配置了。一个项目最好只有一份.editorconfig配置，且放置在项目的根目录下。
扔你一份配置
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
关于文件匹配格式的更多问题请看官方文档
除此之外
想要IDE支持.editorconfig配置，大多数知名的IDE都是以安装对应插件的形式去支持，而不是像一些不知名的IDE一样内置，没错，webstorm，说的就是你！
IDE出不出名看这 ;
.prettier
你有没有发现你的项目里面可能有这样的代码：
单双引号乱用
随意换行
有时写python，有时写C++。分不分号无所谓
pretter专治这些代码洁癖。随意、飘忽不定的代码风格会让代码很难看。
通过prettier的辅助，在编写代码保存时，prettier会根据配置将我们的代码休整成 “漂亮” 的样子。
安装prettier
安装prettier有两种方式，一种是项目安装npm包的形式，一种是安装IDE插件的形式。
项目安装prettier
npm install --save-dev --save-exact prettier
同时需要在安装目录下创建.prettier.json配置文件。
#.prettier.json
{
"printWidth": 120,
...
}
通过命令行形式执行prettier。npm run prettier:
# package.json
"script": {
"prettier": "prettier --write ."
}
这种安装方式的缺点是：每次写完代码都要去运行npm run prettier，究极麻烦。
安装prettier插件
安装插件这种形式好处在于
- 一次安装，以后只要项目中存在prettier的配置，都可以生效
- 代码在保存的时候即完成执行prettier进行格式化
各个IDE的插件各异，看这prettier插件安装；
安装完之后在根目录下创建.prettierrc配置文件。
#.prettierrc
{
"printWidth": 120,
...
}
忽略文件被格式化
在根目录下创建 .prettierignore，通过写入文件或者文件夹地址，告诉prettier这些文件或者文件夹不被格式化。
除了根据.prettierignore，prettier还会忽略格式化根目录下的.gitignore文件或则.eslintignore文件所提供的文件列表。所以你看到一般node_modules文件夹不被prettier格式化，因为.gitignore配置了这个文件夹！
配置prettier
下面，通过一些配置认识一下prettier到底能干啥。 注： prettier的一些配置与.editorconfig作用相同，但是prettier优先级更高！
printWidth
该配置指定了代码的行长，超过行长将被换行。
| 默认值 | 推荐值 |
|---|---|
| 80 | 100 |
tabWidth
该配置指定了一个缩进的长度。
| 默认值 | 推荐值 |
|---|---|
| 2 | 4 |
useTabs
是否使用制表符作为缩进单位，当为true时使用制表符，false时使用空格。这个前面提过，使用空格，果断false。
| 默认值 | 推荐值 |
|---|---|
| false | false |
semi
是否在行尾加分号。加，断句清晰！
| 默认值 | 推荐值 |
|---|---|
| true | true |
singleQuote
是否使用单引号而不是使用双引号。推荐使用单引号/
以下情况对应格式化：
# 出现单双引号同时存在，不做格式化
"'1'23" => "'1'23"
'"1"23' => '"1"23'
# 出现一种引号嵌套
"\"223\"" => '"223"'
'\'223\'' => "'223'"
| 默认值 | 推荐值 |
|---|---|
| false | true |
quoteProps
对象中的属性名加引号的方式。取 as-needed | consistent | preserve
- as-needed：仅仅在必须使用引号的对象属性中使用，其他的不需要的不使用
- consistent：如果对象中有一个属性必须使用引号，那么对象其他的属性也一样使用
- preserve：保留对象中属性的引号使用，随便用，不做格式化（除了单双引号的格式化外)
注：必须使用引号的属性像"xx-xx"这种。
对比一下：
# 取值 as-needed
let a = { 'b-1': 1, c: 2 };
//格式化后
let a = { 'b-1': 1, c: 2 };
# 取值 consistent
let a = { 'b-1': 1, c: 2 };
//格式化后
let a = { 'b-1': 1, 'c': 2 };
# 取值 preserve
let a = { 'b-1': 1, c: 2, 'd': 2 };
//格式化后
let a = { 'b-1': 1, c: 2, 'd': 2 };
| 默认值 | 推荐值 |
|---|---|
| as-needed | as-needed |
jsxSingleQuote
同singleQuote，适用jsx文件并且覆盖singleQuote
trailingComma
多行代码时尽可能打印尾随逗号。取值 es5 | none | all；
- es5： 在ES5中有效的结尾逗号（对象，数组等）
- none: 没有逗号
- all: 尽可能在结尾加上逗号（包括函数参数）
这里不需要过多的逗号！
| 默认值 | 推荐值 |
|---|---|
| es5 | none |
更多配置项看这里prettier Options，prettier很多配置都是默认的，可以做到开箱即用。
推荐配置集合
很多都是默认的，就不用写进去了。
#.prettierrc
{
"printWidth": 100,
"tabWidth": 4,
"singleQuote": true,
"trailingComma": "none"
}
.prettierrc 和.prettier.json有什么不同
没什么不同，无论是项目内置prettier还是插件式的prettier，都可以读到这些配置，同样还可以读到以下这些形式的配置
- package.json 中的prettier值
- .prettierrc
- .prettierrc.json 、.prettierrc.yml、 .prettierrc.yaml
- .prettierrc.js 、prettier.config.js
- .prettierrc.toml
prettier读取这些配置的先后顺序从上往下。
总结
Editorconfig 和prettier只是对代码的格式化上有很大的规范作用，但是深入到代码的细节问题，就不是它们所专业的了，要更加的规范化项目，还需要像Eslint和tslint这些专业的工具来处理。烧烤君后面也会对Eslint/tslint做总结。
最后
关注微信公众号「前端烧烤摊」, 第一时间获取烧烤君的前端路上的总结与发现。
