代码格式化指南 - Githubissues

代码风格的统一以及在发布前使用工具检测代码会带来以下好处：

统一的代码风格更易阅读。
避免格式不一致产生的 git 冲突。
提前发现隐藏在代码里的小错误。

本期介绍的一系列工具将帮助团队成员写出风格统一的代码。

1. Standard

一个业界广泛接受的代码风格规范

JS 这门语言的魅力之一就是自由、开放的写法，相比 python、Go 等语言，JS 写起来自由的多。但是这种自由本身在团队合作的项目里也带来了很多的不便，于是我们需要指定代码规范，但是应该以什么标准来制定规范呢？

缩进到底是 4 格还是 2 格、结尾要不要用分号、花括号和 if 语句在同一行还是另起一行？诸如此类的问题，从功能和逻辑上来讲并没有标准答案，因为无论怎么选，代码都能运行，功能都能实现。所以在 JS 程序员的世界里经常会有诸如缩进、分号、换行等写法的争论。

standard 库对此给出的结论是，这种争论对于 getting stuff done 并无意义，我们要停止这方面的争论，把精力放在解决问题上，它强制定义了一套统一的规范：

使用两个空格 – 进行缩进
字符串使用单引号 – 需要转义的地方除外
无分号 – 这没什么不好，不骗你！
行首不要以 (, [, or ` 开头 - 这是省略分号时唯一会造成问题的地方 – 工具里已加了自动检测！
...

2. ESLint

一个检验语法、代码风格的工具

ESLint由 JavaScript 红宝书作者 Nicholas C.Zakas 编写， 2013 年发布第一个版本。

ESLint是一个以可扩展、每条规则独立的，被设计为完全可配置的lint工具，一个QA工具，用来作为静态代码检查，避免低级错误和统一代码的风格。

下面是一个配置的例子：

{
    "rules": {
        // 必须使用分号结尾
        "semi": ["error", "always"],
        // 必须使用双引号来包裹字符串
        "quotes": ["error", "double"]
    }
}

应用的结果：

3. Prettier

一个代码格式化工具

ESLint 自身有格式化代码的功能，但它并不能保证代码100%一致，Prettier 会丢弃掉几乎全部的原始的代码风格，从而保证 JavaScript 代码风格的一致性，举个栗子：

下面是用 ESLint 格式化过的代码(demo)：

下面是用 Prettier 格式过的代码(demo)：

4. 组合使用

prettier-eslint：Code -> prettier -> eslint --fix -> Formatted Code

Prettier 对于变量未定义之类的问题是无感的，而且它为了减轻用户的配置负担，提供的配置项没有 ESLint 那么丰富，所以我们需要使用 ESLint 对代码再做一次检查。

将 Prettier 和 ESLint 组合起来就有了 prettier-eslint 这个工具，它会先使用 Prettier 来格式化你的代码，然后使用 eslint --fix 对代码做更精细化的检测。

prettier-standard: prettier-eslint + standard style

我们在文章开始的时候就提到过 standard 规范，现在我们将代码格式化工具prettier-eslint和它结合起来，就有了prettier-standard 工具，它可以将你的代码按着 standard 规范进行格式化，同时如果你的代码中出现了语法错误，它也能在格式化的过程中报错。

5. 在代码提交时自动格式化代码

如果你看惯了格式化后的代码，我相信你一定会频繁的使用快捷键来格式化你的代码。

如果你根本没有意识到自己的代码风格和团队不一致，或者根本不 care 这种东西，你应该会经常忘记在提交代码前使用工具检查你的代码。

针对上面提到的两种情况，我们可以采用在代码 commit 时，对其代码进行格式化的方式来解决，这样可以让你更多的关注代码的编写，减少对代码格式的关注。

设置步骤

第一步：安装需要的包：

npm i -D husky lint-staged prettier-standard

其中 husky 是用来添加 git 钩子，也就是在 commit 或 push 前执行设置好的操作。lint-staged 用来对执行过 git add 的文件（staged）进行指定的 lint 操作

第二步: 编写配置文件: 在 package.json里填写lint-staged文件：

{
  "lint-staged": {
    "*.{js,jsx,md,css,scss,json}": ["prettier-standard", "git add"],
    "*.vue": ["prettier --write", "git add"]
  }
}

该配置的意思是，对所有将要提交的以 js、jsx、md、css、scss以及json 为拓展名的文件使用prettier-standard来格式化，如果格式化过程中检测到代码中有语法错误，你将不能提交代码。当格式化完成且没有语法错误后，该工具会将这些格式化过的代码添加到提交记录中。

第三步：在 npm scripts 中添加 precommit 钩子以使 lint-staged生效：

{
  "scripts": {
    "precommit": "lint-staged"
  }
}

最终配置好的 package.json 文件如下：

{
  "scripts": {
    "precommit": "lint-staged",
  },
  "lint-staged": {
    "*.{js,jsx,md,css,scss,json}": ["prettier-standard", "git add"],
    "*.vue": ["prettier --write", "git add"]
  },
  "devDependencies": {
    "husky": "^0.14.3",  
    "lint-staged": "^6.0.0",
    "prettier-standard": "^7.0.3"
  }
}

现在，当你执行 git commit 时系统会自动帮你检测并格式化代码。

6. 现状

下图是 Prettier 已经支持的语言，我之前接手的 Node 和 React 项目都接入了这一套系统，使用起来十分方便。

IOriens / ioriens.github.io