通過 WebStorm 中的 ESLint 規則進行更漂亮的集成

Question

我在 ESLint 中創建了規則，如何根據 ESLint 中指定的規則使 Prettier 格式化代碼？

.eslintrc.js

  module.exports = {
   rules: {
      quotes: ["error", "single"]
   }
  };

保存前：

保存后，Prettier 會自動格式化代碼：

我想使用 Prettier 和 ESLint。 不使用.prettierrc.js -> singleQuote: true, . 為了讓 Prettier 按照 ESLint 規則格式化文件，在保存之前，Prettier 會按照 eslintrc.js 中指定的規則對代碼進行格式化。 我怎樣才能做到這一點？

在 VSCode 用戶設置中，設置"prettier.eslintIntegration": true prettier.eslintIntegration "prettier.eslintIntegration": true

網絡風暴呢？

Answer 1

我要與創建的項目創建，nuxt-應用程序，其中ESLint更漂亮已經正確配置的這個例子。

僅供參考，這里是配置文件的樣子。 打開劇透看看是否需要。

.prettierrc

.eslintrc.js

.editorconfig

.package.json

接下來，按照以下步驟設置您的 IDE：

1. 重新導入項目。

   為此，您應該從項目根目錄中刪除.idea目錄。 然后再次導入項目。 請注意，您將丟失所有與項目相關的設置。 但是這一步是必須的，因為 IDE 在導入的時候會配置Code Style和Editor 設置。 您可以通過打開事件日志來檢查這一點。

   

2. 打開.prettierrc並在對話框中“對這個項目使用基於.prettierrc代碼樣式？” 選擇否。

   

3. 打開設置 | 語言和框架 | JavaScript | 代碼質量工具 | ESLint
   並確保啟用自動 ESLint 配置復選框。

   

4. 然后打開設置| 語言和框架 | JavaScript | Prettier並配置Prettier 包。

   

   現在，當您按Ctrl + Alt + Shift + P 時，文件將根據Prittier設置進行格式化。

   但是這個選項並不適合我們，因為並非所有為ESLint指定的規則都適用。 我們需要運行eslint --fix ，它將根據Prettier設置格式化文件。

   所以讓我們分配快捷鍵Ctrl + Alt + Shift + P來運行eslint --fix 。

5. 在“設置”中刪除“使用更漂亮的格式”快捷方式| 鍵盤映射。

   

6. 然后將快捷方式重新分配到Fix ESLint questions 。

   

現在，當您運行Ctrl + Alt + Shift + P 時，您的文件將被正確格式化。