通过 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 prettier.eslintIntegration "prettier.eslintIntegration": true

网络风暴呢？

Answer 1

我要与创建的项目创建，nuxt-应用程序，其中ESLint更漂亮已经正确配置的这个例子。

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

.prettierrc

.eslintrc.js

.editorconfig

.package.json

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

1. 重新导入项目。

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

   

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

   

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

   

4. 然后打开设置| 语言和框架 | JavaScript | Prettier并配置Prettier 包。

   

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

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

   所以让我们分配快捷键Ctrl + Alt + Shift + P来运行eslint --fix 。

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

   

6. 然后将快捷方式重新分配到Fix ESLint questions 。

   

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