Prettier + Airbnb 的 ESLint 配置

Question

最近，我開始在我的編輯器中使用 Visual Studio Code，並找到了 Prettier - JavaScript 格式化程序。 我認為這是一個很棒的插件，因為它可以幫助我保持代碼的美觀。

我設置了 Airbnb 的 ESLint 配置，發現它非常有用。

這是問題所在。 我目前運行的 Airbnb ESLint 配置與 Prettier 不兼容。 例如，對於 JavaScript 字符串，Prettier 被格式化為包含雙刻度和 Airbnb 的 ESLint，就像單刻度一樣。 當我使用 Prettier 格式化代碼時，Airbnb 的 ESLint 不同意。

我知道 Kent Dodds 已經用 ESLint 配置做了一些工作，其中包括這里的例子。

但我似乎找不到一個解決方案，讓我使用 Prettier 的魔力將我的代碼格式化為 Airbnb 的 ESLint。

Answer 1

我認為eslint-config-prettier就是為此目的而創建的： https : //prettier.io/docs/en/eslint.html#turn-off-eslint-s-formatting-rules

基本上它會關閉所有與代碼樣式有關的規則，因為prettier無論如何都會處理它。

因此，您只需將此配置與任何其他所需的 eslint 配置（如eslint-config-airbnb ）一起安裝，並在您的 eslint 配置文件中將其添加到extends字段中。 例如：

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

Answer 2

這里有幾種方法可以做到，按推薦順序。 我更喜歡第一種方法，因為您不必擔心將來可能會發生沖突的其他規則。

i) 安裝eslint-config-prettier並在.eslintrc擴展它。 這樣做會關閉 ESLint 中可能與 Prettier 沖突的一些與格式相關的規則：

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

ii) 將"singleQuote": true添加到.prettierrc配置文件中：

{
  "singleQuote": true,
  ...
}

iii) 在調用 Prettier 時添加--single-quote命令行選項：

$ prettier --single-quote ...

iv) 在.eslintrc配置文件中關閉 ESLint 的quotes規則（以及其他可能沖突的文件）：

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

Answer 3

更清潔的方法是：

yarn add --dev eslint-plugin-prettier eslint-config-prettier

   // .eslintrc
   {
     "extends": ["airbnb", "plugin:prettier/recommended"]
   }

plugin:prettier/recommended 做了三件事：

• 啟用 eslint-plugin-prettier。
• 將更漂亮/更漂亮的規則設置為“
• 擴展 eslint-config-prettier 配置。

然后，如果你正在反應，你也可以添加prettier/react ：

{
  "extends": [
    "airbnb",
    "plugin:prettier/recommended",
    "prettier/react"
  ]
}

Answer 4

所以，你有你的 .eslintrc 文件，屬性為"extends": "airbnb"添加另一個屬性、規則，你將在那里寫入的規則將覆蓋從 airbnb 繼承的規則

"extends": "airbnb",
"rules": {
    "eqeqeq": 2,
    "comma-dangle": 1,
}

現在，我只是覆蓋了兩個隨機規則，您需要尋找您需要的規則:)

Answer 5

這是我構建的一個小的交互式CLI 工具，用於使用 Prettier 設置 ESLint。 只需安裝並運行：

npx eslint-prettier-init

這將解決您的問題。