如何根据eslint制作WebStorm格式代码？答案

【问题标题】：How to make WebStorm format code according to eslint?如何根据eslint制作WebStorm格式代码？
【发布时间】：2023-10-23 03:48:01
【问题描述】：

我已经为我的 WebStorm 项目指定了 eslint 配置。但它似乎不适用于代码重新格式化功能。例如，它继续将import { something } from 'somewhere' 格式化为import {something} from 'somewhere'。

有没有办法让WebStorm根据eslint配置格式化代码？

【问题讨论】：

标签： webstorm eslint

【解决方案1】：

（描述的步骤和截图来自IntelliJ IDEA 2017.2）

您可以为操作“修复 ESLint 问题”添加键盘快捷键。 确保已安装并启用插件“JavaScript Support”。

首先进入首选项 | 语言和框架 | JavaScript | 代码质量工具 | ESLint 并启用它。您需要定义“节点解释器”、“ESlint 包”和可选的“配置文件”。

接下来转到首选项 | Keymap 并在那里搜索“eslint”。现在您可以添加例如快捷方式“control + shift + L”。

【讨论】：

太棒了！谢谢！
这应该是最好的答案了。
这也适用于 Webstorm。谢谢。
IntelliJ 没有意识到 eslint 已配置并选择将其用作默认格式化程序，这真是太愚蠢了。就像 VS Code 一样。
如果你做的不是 javascript 的项目怎么办 :)

【解决方案2】：

我刚刚安装了 WebStorm 2017，我不知道这是否适用于 WS 2016。当光标接近 ESLint 错误时，您可以按 Option + Enter 来重新格式化代码，而不是按 Option + Command + L .这将打开上下文菜单，然后选择“ESLint：修复当前文件”

【讨论】：

这只是为你运行eslint --fix <path-to-current-file>。
最好有一个快捷键。

【解决方案3】：

如果你和我一样使用较新版本的 WebStorm，可以通过右键单击 .eslintrc.js（或其他 ESLint 配置文件）将 ESLint 规则导入 WebStorm，然后单击“应用 ESLint 代码样式规则”选项如图here。

请注意，在撰写本文时，您还需要在“设置”或“首选项”菜单中排除 <script> 标记的缩进。一个很棒的家伙写了一个 short write-up 来说明如何做到这一点。

【讨论】：

“应用 ESLint 代码样式规则” - 太简单了，谢谢@nixklai
这个答案更新了 WebStorm 中的设置以匹配 eslint（和更漂亮的）规则。 "ESLint: 项目代码样式和编辑器设置基于 '.eslintrc.json' 更新。应用了以下规则：prettier/prettier。"

【解决方案4】：

更新：答案已过时。最佳解决方案在https://*.com/a/46099408/1057218中描述

很遗憾，您无法导入 eslint 代码样式配置（WEB-19350），但您可以手动配置代码样式。

查看设置：“文件 | 设置 | 编辑器 | 代码样式 | JavaScript”
对于导入大括号： “空格”->“ES6 导入/导出大括号”

【讨论】：

【解决方案5】：

在 2021 年为我解决了：

Webstorm 正在使用 Prettier 包并且有一个选项：

Preferences | Languages & Frameworks | JavaScript | Prettier -> On 'Reformat Code' action

现在 Webstorm 使用eslint 规则重新格式化Reformat Code 热键上的代码。

【讨论】：

【解决方案6】：

我一直在使用的暂时临时修复方法是将我的 ESLint 配置导出到 JSCS。它与 WebStorm 和 PHPStorm 配合得非常好！

我在我的 eslint 配置中使用了这个名为 Polyjuice 和 here is the output 的包。

【讨论】：

现在 WebStorm 确实支持 ESLint “开箱即用”，它可以按预期工作以帮助您设计代码，请参阅 jetbrains.com/webstorm/whatsnew/#v2017-2-eslint

【解决方案7】：

最好的方法是使用宏来自动化它。

1. 转到编辑 |宏 |开始宏录制
2. 转到文件|全部保存
3. 按 Strg + Shift + A
4. 搜索 eslint 并运行。
5. 转到编辑 |宏 |停止宏录制
6. 转到编辑 |宏 |编辑宏 并删除除了两个 Action:...
7. 转到文件|设置 |键盘图 |宏 并在宏上添加 Strg + S

这很好用，让工作更容易:)

【讨论】：

【解决方案8】：

对于那些仍然有麻烦的人，我完成了上面答案的所有步骤，但它根本不起作用。

对我而言，问题是我在终端 (12.x) 中使用的 Node 版本与项目的 package.json 中的 .nvmrc 和 "engine" 相比

在上面指出的两个更改之后，我的 eslint 恢复了工作。

p.s：我假设您已经安装了所有依赖项以及项目根目录中的 .eslintrc.*

【讨论】：