Prettier,VS Code和Create React App的奇妙之旅

558 阅读2分钟

我曾经写过一篇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步。现在补上,第四步确实为我节省了不少时间。