通过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

WebStorm呢？

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指定的规则都适用。我们需要运行，这将根据Prettiereslint --fix设置格式化文件 。

   因此，让我们将快捷方式Ctrl+ Alt+ Shift+ 指定P为 run eslint --fix。

5. 在“设置” |中删除“使用 Prettier 格式化”快捷方式 键位图。

   

6. 然后重新指定修复 ESLint 问题的快捷方式。

   

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