Skip to content

Instantly share code, notes, and snippets.

@lzl
Created April 28, 2017 05:00
Show Gist options
  • Save lzl/3509ebda0b08c5c1b153e3b4b5972aaa to your computer and use it in GitHub Desktop.
Save lzl/3509ebda0b08c5c1b153e3b4b5972aaa to your computer and use it in GitHub Desktop.
Prettier + Standard

Prettier + Standard

Why

多人协作,代码风格各异,使用它们可以用最低的成本实现最大化的风格统一。

Prettier is an opinionated JavaScript formatter. 保证代码风格优雅而统一。

Standard is JavaScript style guide, with linter & automatic code fixer. 依据一整套规则来维护代码的严谨性。

How

npm install prettier standard lint-staged husky --save-dev

安装 lint-stagedhusky 是为了在 commit 代码时自动对相关代码进行检查和修正。注意安装时使用 --save-dev 而不是 --save,因为它们仅用于开发过程。

package.json 中添加如下内容:

{
  "scripts": {
    "precommit": "lint-staged"
  },
  "lint-staged": {
    "*.js": [
      "prettier --write",
      "standard --fix",
      "git add"
    ]
  }
}

它们的含义是,在进行 git commit 之前,它会自动对代码统一风格并检查是否足够严谨。

How (optional)

为自己所用的代码编辑器安装相应的插件(Prettier + Standard)。前者可主动统一当前文件的代码风格,让自己更舒服地阅读代码;后者实时反馈当前代码的严谨性,提升 debug 效率。

以我个人为例,我使用的是 Atom 编辑器。逐一安装相应 packages,比如 linter, linter-js-standard, standard-formatter, prettier-atom。个人觉得前面两个最重要,它实时检查当前代码是否符合 Standard 秉持的那套规则,在实际使用过程中,很多时候不必等到 Meteor 重新编译完报错便可找到低级 bug 的根源,十分受益。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment