WebStorm 中通过 ESLint 规则进行更漂亮的集成

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 呢？

Answer 1

我将使用 create-nuxt-app 实用程序创建一个项目，其中 ESLint 和 Prettier 已针对此示例正确配置。

仅供参考，以下是配置文件的样子。打开剧透看看是否需要。

.prettierrc

.eslintrc.js

.editorconfig

.package.json

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

1. 重新导入项目。

   为此，您应该从项目根目录中删除.idea 目录。然后 再次导入项目。请注意，您将丢失所有与项目相关的设置。但 这一步是必要的，因为 IDE 配置了 Code Style 和 Editor 导入期间的设置。您可以通过打开事件日志来检查这一点。

2. 打开.prettierrc 并在对话框中“为此使用基于 Prettier 的代码样式 项目？”选择否。

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

4. 然后打开设置|语言和框架 | JavaScript |更漂亮和配置 更漂亮的包。

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

   但这个选项不适合我们，因为并非所有为 ESLint 指定的规则都适用 申请。我们需要运行eslint --fix，它将根据以下格式格式化文件 更漂亮设置。

   所以让我们指定快捷键 Ctrl+Alt+Shift+ P 运行eslint --fix。

5. 删除设置|中的Format with Prettier快捷方式键盘映射。

6. 然后重新分配快捷方式以修复 ESLint 问题。

现在，当您运行 Ctrl+Alt+Shift+P 时，您的文件将被正确格式化。