背景
-
团队没有统一的规范，每个开发者有自己各自的喜好，代码风格不一致。导致每次修改某文件一点内容，导致整个文件被自动格式化，后续回溯修改点耗时长；
-
对于“强迫症患者”，不格式化文件心里就像留着个疙瘩，不舒畅。
选型
现有的两条格式化路子：eslint vs prettier。两者都能做格式化校验且对于简单的格式问题可自动修复，但个人认为：
eslint：
-
比较专注于js文件的语法校验，对于格式校验，需要手动写不少规则来匹配团队惯用的风格；
-
对于小程序来说，wxml,wxss等文件格式难度较高；
prettier：
-
比较大众的格式化工具模块，规范也比较大众化，适合大部分人的编码习惯；
-
可以结合vscode的minapp扩展，对小程序的wxml文件进行格式化；
综上，使用eslint来校验js语法，prettier来规范代码格式。
prettier如何格式化
安装prettier
npm install prettier -D
package.json文件添加script脚本
"scripts": {
"prettier": "prettier --write ./**/*.{js,json,wxss,wxml,wxs}"
}
prettier --write表示格式化代码，且对于一些较简单的修复，prettier自动写入修复。
./**/.{js,json,wxss,wxml,wxs}即匹配当前目录下所有js,json,wxss,wxml,wxs后缀的文件。如果只匹配一种类型的文件，去掉花括号。
添加.prettierrc配置文件
在项目根目录添加文件**.prettierrc**,配置prettier默认格式规则外的一些个性化规范。针对小程序项目，添加overrides规则，即wxml文件用html解释器、wxss文件用css解释器、wxs文件用babel解释器来解析。
{
"trailingComma": "es5",
"singleQuote": true,
"semi": true,
"tabWidth": 4,
"printWidth": 150,
"proseWrap": "preserve",
"overrides": [
{
"files": "*.wxml",
"options": { "parser": "html" }
},
{
"files": "*.wxss",
"options": { "parser": "css" }
},
{
"files": "*.wxs",
"options": { "parser": "babel" }
}
]
}
运行npm run prettier，会自动格式化代码。
结合git hooks提交前校验修复
如果每次提交代码到git前，都要求每个开发者手动执行npm run prettier -D, 一来太考验自觉性，二来也麻烦。那么，有没有自动格式的流程呢？
结合git hooks，在pre-commit时，自动跑一遍格式化代码。安装husky，npm install husky（如果没生效，请删除node_modules和package-lock.json/或yarn.lock文件，重新npm install，确保git的pre-commit钩子存在）。package.json文件添加如下配置：
"husky": {
"hooks": {
"pre-commit": "npm run prettier"
}
},
这样就可以在每次commit代码前，先自动格式化一遍，如果格式化报错会提交不了。但是，这样的配置，每次提交都会校验项目里面所有的文件，校验时间长。
我们希望提升校验速度，每次只校验本次提交改动到的文件。引入lint-staged：npm install lint-staged -D
需要注意的是，新版本的lint-staged（v11.0.0以上）的版本需要较高的node版本，不想升node版本的话，可以降低lint-staged的版本。package.json配置如下：
"lint-staged": {
"*.{js,json,wxss,wxml,wxs}": "prettier --write",
},
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
".{js,json,wxss,wxml,wxs}": "prettier --write"表示针对这些类型的文件，执行prettier格式校验并简单修复。如果有多种规则，可以配置成数组，比如：
"*.js": []"prettier --write", "eslint"]
结合lint-staged就可以只针对本次git修改过的文件做校验修复，节省时间。
如何在vscode保存编辑代码时自动格式化
在vscode编辑器，先安装prettier和minapp扩展，然后按住ctrl加逗号，<ctrl+,>
再点击右上角第一个图标，进入settings.json文件，添加如下配置就可以在ctrl+s保存文件的时候，先自动格式化一遍代码。
"[javascript]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"minapp-vscode.wxmlFormatter": "prettier", // 设置扩展程序minapp格式化wxml使用prettier（需要先安装minapp扩展）
