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

Posted 2023-02-22

【中文标题】WebStorm 中通过 ESLint 规则进行更漂亮的集成

【英文标题】：Prettier integration by ESLint rules in WebStorm

【发布时间】：2019-08-06 05:39:24

【问题描述】：

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

【问题讨论】：

文档？ jetbrains.com/help/webstorm/eslint.html

在 WebStorm 论坛上也一样？ intellij-support.jetbrains.com/hc/en-us/community/posts/…

LazyOne，是的，一样

【参考方案1】：

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

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

.prettierrc

.eslintrc.js

.editorconfig

.package.json

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

重新导入项目。

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

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

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

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

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

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

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

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

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

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