我曾经写过一篇Create React App集成Prettier的相关文章。 传送门:create-react-app集成Prettier 具有一致的代码风格是一个应用能健康发展基石,能极大减少与他人合作的负担,多少人经过了写文档开XX会来提出公司的代码规范。虽然是个非常好的意图,但是很难取得良好的进展,通常又一轮会议开始了,再结束,我们更沮丧了。Space和Tab之争,_和-之争,私有字段my_和_还是一团糟。
但是值得庆幸的是,人类是一个奇怪的动物,具有难以置信的适应能力,那就是不给他们选择的机会,他们会很快习惯使用新的工具。我当初转向React的时候,感觉到JSX是非人类的,但是我很快意识到他实际上是一个极其美好的东西,接受了它。这种奇特的能力造就了Prettier。
Prettier是一个“可配置的代码格式化工具”,通过使用自动化和自定义工具,可确保所有提交的代码看起来都一样。个人意见都将被排除,开发人员只需关注开发任务,不再需要浪费时间格式化代码(主要怕他们按照自己意愿格式化代码)。
这里以VS Code和Create React App, Yarn为基础。其他的可找到相应的方案。
注意:由于Create React App将Eslint集成到webpack中,打包过程中会将Eslint的error或者warming展示在终端或者浏览器的console中。但是Prettier的错误信息就不会展示了。他只会出现在VS Code的面板中。
第一步:
yarn add --dev --exact prettier
yarn add --dev eslint-plugin-prettier
安装ESLint Prettier plugin
这个插件将不合Prettier规格的代码以Eslint的error形式完成报告,见上。
第二步:
Vs Code配置,见上一篇
第三步:
根目录创建 .eslintrc
{
"extends": "react-app",
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}
.prettierrc
{
"singleQuote": true,
"trailingComma": "es5"
}
第四步:
防止不合规则的代码被提交,为了防止未格式化的代码被提交到git,添加pre-commit hook。这里有几种不同的方法,这里采用第二种。
注意:Git存储库必须已经初始化,否则husky将不会安装precommit hooks。
yarn add --dev pretty-quick husky
package.json
{
"scripts": {
"precommit": "pretty-quick --staged"
}
}
写在最后:
人类就是这么个奇怪的东西,代码更是个奇怪的东西。缩小代码的自由度才是真理。这也是高质量代码的设计因素。上篇文章较为详细,但是少了第4步。现在补上,第四步确实为我节省了不少时间。