WebStorm中ESLint规则的Prettier集成

Question

我创建了ESLint的规则，如何让Prettier根据在ESLint中指定的规则格式化代码。

.eslintrc.js

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

保存之前：

Prettier会自动格式化代码：

我想使用Prettier和ESLint。在不使用.prettierrc.js -> singleQuote: true,的情况下，为了让Prettier根据ESLint规则来格式化文件，请在保存之前，Prettier会采用eslintrc.js中指定的规则并格式化代码。如何做到这一点？

在VSCode用户设置中，设置"prettier.eslintIntegration": true

那WebStorm呢？

- Дмитрий Шарапов

---

文档？https://www.jetbrains.com/help/webstorm/eslint.html - cinnaroll45

在WebStorm论坛上也一样吗？https://intellij-support.jetbrains.com/hc/en-us/community/posts/360003325440-Prettier-integration-by-ESlint-rules - LazyOne

LazyOne，是的，就是那个。 - Дмитрий Шарапов

Answer 1

我将翻译一个使用create-nuxt-app工具创建的项目，其中ESLint和Prettier已经针对该示例进行了正确配置。

以下是配置文件的样式供参考。如有需要，请展开剧透。

.prettierrc

.eslintrc.js

.editorconfig

.package.json

接下来，按照以下步骤设置您的IDE。

1. 重新导入项目。

   为此，您应该从项目根目录中删除.idea目录。然后重新导入项目。请注意，你将失去所有与项目相关的设置。但是这一步是必要的，因为IDE在导入期间配置了代码风格和编辑器设置。可以通过打开事件日志来检查这一点。

   

2. 打开.prettierrc文件，在对话框中选择“是否使用基于Prettier的代码样式？”选择否。

   

3. 打开设置|语言和框架|JavaScript | 代码质量工具 | ESLint
   并确保启用自动ESLint配置复选框。

   

4. 然后打开设置|语言和框架|JavaScript | Prettier并配置Prettier包。

   

   现在，当你按下Ctrl+Alt+Shift+P时， 文件将根据Prittier的设置格式化。

   但是，这个选项并不适合我们，因为没有为ESLint指定的所有规则都会应用。我们需要运行eslint --fix，它将根据Prettier的设置格式化文件。

   所以让我们将快捷键Ctrl+Alt+Shift+P分配到运行eslint --fix。

5. 在设置|键映射(Keymap)中删除使用Prettier格式化快捷键。

   

6. 然后重新分配快捷键到修复ESLint问题。

   

现在当你按下Ctrl+Alt+Shift+P时，你的文件将被正确地格式化。

- innomerphey