使用 Prettier 美化你的代码

大家好,我是前端西瓜哥。今天带大家来学习 Prettier。

为什么要用 Prettier?

Prettier 是一款流行的代码格式化工具。它支持的语言相当多。

它很纯粹,就一个代码格式化工具,并不会做代码质量的检查(比如声明了一个未被使用的变量)。

Prettier 会强制使用统一的代码风格,原理就是解析语言生成 AST 抽象语法树,然后用自己的一套风格写回到文件。

Prettier 的优点:

  1. 开箱即用。它本身就自带了一套代码风格,风格还很好看。我们不需要特意找一个基础风格包,然后再加上一长串的自定义规则;

  2. 支持多种语言。除了 JS,还支持 TS、CSS、JSON、Less 等各种语言。不用一个个找每个语言对应的格式化工具。

但 Prettier 坚持自己的品味,它更希望用户使用它精心挑选出来的代码风格,只提供较少的自定义配置规则。

比如有个 printWidth 的配置(默认值为 80),当一行代码超过特定字符数时会对其做拆分换行。这个配置无法关闭,你必须得设置一个值。

阅读更多

项目中使用 husky 格式化代码和校验 commit 信息

大家好,我是前端西瓜哥。今天我们学习使用 husky 工具,在 commit 的时候做一些风格的校验工作,包括 commit 信息格式化和文件格式化。

git hook 和 husky

git hook 让我们可以在 git 执行一些行为的前后时机,执行一些脚本。

比如 pre-commit ,能够在我们真正提交 commit 之前先执行一段代码,如果这段代码报错(exit 1),提交会被取消;如果正常执行,commit 会被真正提交。

或是 commit-msg,也能在真正 commit 前拿到 commit 信息内容,去做一些检验工作。

利用 git hook 的能力,我们就可以在 commit 前做一些风格检验或格式化,比如 ESLint、Prettier、commit 格式等。

git hook 是 sh 脚本,在项目 .git/hooks 目录下。这有一个比较尴尬的问题:.git 下的文件是不会被 git 提交的。husky 就是解决这个问题的一个方案。

阅读更多