如何让Prettier和ESLint一起工作？

Question

当使用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
      }
    }

- Bomber

Answer 1

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

您可以通过以下几种方式使它们协同工作（建议按照优先级排序）：

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

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

2）更改 .prettierrc 配置文件。

{
  "singleQuote": true,
  ...
}

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

$ prettier --single-quote ...

4）在您的.eslintrc配置文件中关闭ESLint的引号规则：quotes。

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

- Yangshun Tay