javascript - 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 和 更漂亮已经为此示例正确配置。
仅供引用，以下是配置文件的样子。打开剧透看看是否需要。
.prettierrc



.eslintrc.js



.editorconfig



.package.json



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

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

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

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

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

现在，当您按 Ctrl+Alt+Shift+P 时
文件将根据 格式化普瑞提尔 设置。
但是这个选项不适合我们，因为并非所有规则都为 指定。 ESLint 将要
申请。我们需要运行 eslint --fix相反，它将根据
更漂亮设置。
所以让我们分配快捷键 Ctrl+Alt+Shift+
P 运行 eslint --fix .

删除 Prettier 格式 中的快捷方式设置 |键盘映射 .

然后将快捷方式重新分配给 修复 ESLint 问题 .

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