我怎样才能让 Prettier 和 ESLint 一起工作？答案

【问题标题】：How can i get Prettier and ESLint to work together?我怎样才能让 Prettier 和 ESLint 一起工作？
【发布时间】：2017-12-24 14:08:23
【问题描述】：

在使用 Sublime Text 3 时，如何让两者协同工作？

在文件保存时，Prettier 用双引号替换单引号，而 ESLint 查找单引号。

我怎样才能让这两个包一起工作？

.eslintrc

{
      "parser": "babel-eslint",
      "extends": "airbnb",
      "plugins": [
        "react",
        "jsx-a11y",
        "import",
        "prettier"
      ],
      "rules": { 
        "no-use-before-define": 0,
        "no-underscore-dangle": 0,
        "no-tabs": 0,
        "no-nested-ternary": 0,
        "indent": 0,
        "no-multi-assign": 0,
        "no-param-reassign": 0,
        "no-var": 0,
        "no-mixed-operators": 0,
        "no-unused-expressions": 0,
        "no-plusplus": 0,
        "no-confusing-arrow": 0,
        "no-case-declarations": 0,
        "vars-on-top": 0,
        "block-scoped-var": 0,
        "global-require": 0,
        "react/sort-comp": 0,
        "react/forbid-prop-types": 0,
        "react/no-unused-prop-types": 0,
        "react/no-multi-comp": 0,
        "react/no-array-index-key": 0,
        "no-trailing-spaces": 0,
        "react/jsx-filename-extension": 0,
        "import/prefer-default-export": 0
      },
      "globals": {
        "window": true,
        "__DEV__": true,
        "expect": true,
        "it": true,
        "navigator": true,
        "fetch": true
      }
    }

【问题讨论】：

标签： sublimetext3 eslint prettier

【解决方案1】：

默认情况下，Prettier 配置默认使用双引号，并且可能与您拉入的 ESLint 配置冲突。

您可以通过以下几种方式让它们工作（最推荐首先）：

1) 安装eslint-config-prettier 并在.eslintrc 中扩展它。这样做会关闭 ESLint 中一些可能与 Prettier 冲突的格式相关规则。

{
  "extends": [
    "airbnb",
    "prettier"
  ]
}

2) 更改.prettierrc 配置文件

{
  "singleQuote": true,
  ...
}

3) 在调用 Prettier 时添加命令行选项

$ prettier --single-quote ...

4) 在 .eslintrc 配置文件中关闭 ESLint 的 quotes 规则：

{
  "rules": {
    "quotes": "off",
   ...
  }
}

【讨论】：