如何集成 ESLint 和 Prettier？答案

【问题标题】：How do I integrate ESLint and Prettier?如何集成 ESLint 和 Prettier？
【发布时间】：2017-10-25 17:08:32
【问题描述】：

我在同时使用 ESLint 和 Prettier 时遇到了问题。让他们一起工作需要哪些步骤？

【问题讨论】：

【解决方案1】：

1) 安装 ESLint 和 Prettier。

$ npm install --save-dev eslint prettier

2) 安装使它们能够协同工作的插件和配置。

$ npm install --save-dev eslint-plugin-prettier eslint-config-prettier

3) 将以下内容添加到您的 ESLint 配置文件中：

{
  "plugins": [
    "prettier"
  ],
  "extends": [
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error"
  }
}

4) 将lint 和prettier 命令作为npm 脚本添加到package.json：

{
  ...
  "scripts": {
    ...
    "lint": "eslint 'src/**/*.js'",
    "prettier": "prettier --write 'src/**/*.js'",
    "check-all": "npm run prettier && npm run lint",
    ...
  }, 
}

5) 现在您可以通过以下方式同时对代码进行 lint 和美化：

$ npm run check-all

或者单独调用它们：

$ npm run lint
$ npm run prettier

【讨论】：