Prettier + Eslint => 💖

[TopGrd]

Prettier

为什么要用 Prettier？

关于代码风格的圣战，从到底要不要分号，缩进用tab还是space，2个还是4个空格，从未停止过。但是作为现代javascript 开发者，who cares ! 我们使用eslint 就可以轻松的控制团队的代码风格，但是 eslint 在某些方面就无法强制了，下面2份代码

if (a < 1) {
	console.log('haha');
}

if (a < 1) 
{
 console.log('haha');
}

Eslint 都不会报错，还有 trailing commas，Why you should enforce Dangling Commas for Multiline Statements 等等。而prettier + eslint 可以完美的避免这些风格不统一的问题。当你的风格与团队 eslint 配置有不同时，只需要prettier一下，就可以保持一致，不需要在写代码时关心差异，并且 prettier 也是当前最火的一款 format 工具，很多开源项目下面，你会发现都会有一份 .prettierrc

By far the biggest reason for adopting Prettier is to stop all the on-going debates over styles. It is generally accepted that having a common style guide is valuable for a project and team.

到目前为止，采用Prettier的最大原因是停止所有关于风格的争论。人们普遍认为，拥有一个共同的风格指南对于项目和团队来说是有价值的。
Prettier · Opinionated Code Formatter

使用方式

使用前最好能生成一份 prettier 配置文件Configuration File · Prettier，放在你需要格式化的项目目录下。如果需要，配置一份.prettierignore . 规则和gitignore一样，其中的文件不会被处理。

1. CLI 使用
   首先使用

npm install --save-dev --save-exact prettier
// or globally
npm install --global prettier

格式化自己项目目录下文件时，可以使用
prettier --write 'src/**/*.js'
目录使用的是node-glob语法。
2. 编辑器插件

• sublime
• Prettier - Code formatter - Visual Studio Marketplace
• webstorm
• Vim Setup · Prettier
• atom

3. 配合 eslint 使用
   首先在项目下安装
   npm install -D eslint-plugin-prettier eslint-config-prettier
   然后对.eslintrc进行相关配置

{
  "parser": "babel-eslint",
  "extends": ["eslint-config-hcb", "prettier"],
  "plugins": ["prettier"],
	"rules": {
    "prettier/prettier": "error"
  },
  "globals": {},
  "parserOptions": {
    "ecmaFeatures": {
      "legacyDecorators": true
    }
  }
}

eslint-plugin-prettier 插件会调用 prettier 对你的代码风格进行检查。也就是他会使用prettier格式化你的代码, 然后比较格式化前后的代码，不一致的地方会像eslint那样报错。

当然你不需要马上手动改，你可以直接用prettier cli 或者编辑器插件进行格式化。
eslint-config-prettier能够关闭不必要或者与prettier冲突的lint 选项，尤其是不希望一个 error 出现2次，但是我们要确保 prettier 在 eslint 配置里extends的最后。
4. 在pre-commit 钩子里使用
Prettier 与 eslint 和 pre-commit 钩子使用可谓是最佳实践，按第三条配好eslint 和 prettier 后，在 项目 package.json 里进行配置

"scripts": {
    "eslint": "eslint src",
    "precommit": "prettier --write 'src/**/*.js' && npm run eslint",
    "commitmsg": "commitlint -E GIT_PARAMS",
    "start": "galileo server -p 8900",
    "dev": "galileo build dev",
    "qa": "galileo build qa",
    "pub": "galileo build prod --static pub",
    "prod": "galileo build prod",
    "prettier": "prettier --write 'src/**/*.js'"
  }

这样每次提交代码时会自动帮你格式化代码并进行 eslint 校验。

链接
⚡️ - James Long - A Prettier Printer (plus bonus clip!) - React Conf 2017 - YouTube
Javascript code formatting - Christopher Chedeau, React London 2017 - YouTube