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

Question

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

.eslintrc.js

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

保存之前：

保存后，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
   并确保启用自动 ESLint 配置复选框。

   

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

   

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

   但是这个选项不适合我们，因为不是所有为 ESLint 指定的规则都适用 申请。我们需要运行 eslint --fix 代替，它将根据 更漂亮设置。

   那么让我们分配快捷键 Ctrl+Alt+Shift+ P 运行 eslint --fix。

5. 在设置|中删除使用更漂亮的格式快捷方式键盘映射。

   

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

   

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