VSCode Prettier ESLint 打造JavaScript开发利器

Terms

VSCode 全称Visual Studio Code

非常好用的文本编辑器，参考 Visual Studio Code(VSCode) Basic 快速上手。
ESLint

Code linting, cstatic analysis 代码静态分析工具，帮你发现 code quality errors，并且提供了 syntax format violations。
Prettier

Prettier is an opinionated code formatter

Prettier supports JavaScript, Flow, TypeScript, CSS, SCSS, Less, JSX, Vue, GraphQL, JSON, Markdown, YAML.

In short, ESLint is the de facto for static analysis and Prettier has quickly become the go-to tool for formatting code.

Install Extensions

Prettier formatter for Visual Studio Code
1. install Prettier - Code formatter Prettier extension, then vscode format document will be replaced by Prettier.
2. User settings
  
  Testing as below settings:
  1
  2
  3
  4
  5
  6
  7
  {
  "editor.formatOnSave": false,
  "[javascript]": {
  "editor.formatOnSave": true
  },
  "prettier.singleQuote": true
  }
VS Code ESLint extension

关于 ESLint 我会在写一篇 blog 介绍。这里只要支持提供一个.eslintrc规则配置文件在项目目录一下就好了, ESLint 插件就可以根据做它静态代码检查了。
Sync Settings

参考 VSCode Extension Settings-Sync(VSCode设置同步) 在项目成员间同步设置。

理论上如上内容在项目开始时搭建好，大家遵守如上设置，已经能很好的解决代码统一格式化和代码质量静态检查。
但从更严谨的角度，这还不够。思考如下问题：

项目中期后期才开始严格统一代码格式，如何批量格式化代码。
如果成员没有按照统一设置，或者改了自己的设置怎么办，我们在 Jenkins 应该提供 step 来检查，像 eslint 一样。

后续内容可以帮助你更好的解决这些问题。

ESLint Plugin Prettier

See eslint-plugin-prettier for more.

npm install --save-dev eslint
$ npm install --save-dev prettier or npm install --global prettier
$ npm i --save-dev eslint-plugin-prettier eslint-config-prettier
.eslintrc
1
2
3
4
5
6
7
8
9
10
11
{
"extends": ["inherit/src-config", "plugin:prettier/recommended"],
"rules": {
"prettier/prettier": [
"error",
{
"singleQuote": true
}
]
}
}
这里的设置要与 VSCode 中 Prettier 的设置保持一致。当然也可以单独提供一个 Prettier 配置文件，就像.eslintrc文件，这样可以保持 VSCode 编辑器也会用这些 rules。但是我们的前端工程不是都放在一个 repo 中的，会有很多 repo。Prettier 没有提供继承功能像 ESLint 那样，所以这种情况，我推荐此方法。

package.json

"scripts": {
    "format": "./node_modules/.bin/prettier --write 'webapp/**/*.{json,css,less,md,yml}' & ./node_modules/.bin/eslint --fix 'webapp/**/*.js'",
    "format-prettier": "node_modules/.bin/prettier --write \"webapp/**/*.{json,css,less,md,yml}\"",
    "format-eslint": "node_modules/.bin/eslint --fix \"webapp/**/*.js\"",
    "lint-js": "./node_modules/.bin/eslint 'webapp/**/*.js'",
    "rule-conflict-check": "./node_modules/.bin/eslint --print-config .eslintrc | eslint-config-prettier-check"
},

如上提供 npm stripts 提供了批量文件格式化；也提供了 Jenkins 可以调用的命令；rule-conflict-check可以帮你检查当前 ESLint 和 Prettier 关于格式化的 rule configuraiton 冲突，保持一个原则，格式化的 rules 交个 Prettier，ESLint 只要代码质量分析的 rules 设置就好了。

VSCode User Settings
1
2
3
4
5
6
7
8
{
"editor.formatOnSave": true,
"[javascript]": {
"editor.formatOnSave": false
},
"eslint.autoFixOnSave": true,
"eslint.alwaysShowStatus": true
}
这里设置了保存的时候自动格式化文件，但是除了 JS 文件，JS 用 esLint --fix 来完成格式化，确保用的是 eslint 中的 rules，而不是 VSCode 中的设置。

Reference

configure-prettier-and-eslint-in-visual-studio-code/