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

Question

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

import { something } from 'somewhere'

格式化为

import {something} from 'somewhere'

。

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

Answer 1

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

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

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

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

Answer 2

如果您像我一样使用较新版本的 WebStorm，则可以通过右键单击

.eslintrc.js

（或其他 ESLint 配置文件）将 ESLint 规则导入 WebStorm，然后单击“应用 ESLint 代码样式规则”选项：显示此处。

请注意，在撰写本文时，您还需要排除“设置”或“首选项”菜单中

<script>

标签的缩进。一个很棒的人写了一篇关于如何做到这一点的简短的文章。

Answer 3

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

Answer 4

2021 年为我解决了：

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

Preferences | Languages & Frameworks | JavaScript | Prettier

->

On 'Reformat Code' action

现在 WebStorm 使用

eslint

规则重新格式化

Reformat Code

热键上的代码。

Answer 5

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

不幸的是，您无法导入 eslint 代码样式配置（WEB-19350），但您可以手动配置代码样式。

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

Answer 6

我一直在使用的

暂时修复是将我的 ESLint 配置导出到 JSCS。它与 WebStorm 和 PHPStorm 配合得非常好！

我使用了这个名为

Polyjuice 的包，这是我的 eslint 配置的输出。

Answer 7

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

1. 前往
编辑|宏|开始宏录制 2. 转到
文件 |全部保存 3. 按
Strg + Shift + A 4. 搜索 eslint 并运行它。
5. 转到
编辑|宏|停止宏录制 6. 转到
编辑|宏|编辑宏并删除除了两个操作之外的所有内容：... 7. 转到
文件 |设置|键盘映射 |宏并在宏上添加Strg + S
这非常有效，并且使工作变得更加容易:)

Answer 8

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

对我来说，问题是我在终端 (12.x) 中使用的 Node 版本与项目

.nvmrc

 中的 

"engine"

 和 

package.json

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

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

.eslintrc.*

Answer 9

WebStorm 2023.3.2

转到

首选项|语言和框架 | JavaScript |代码质量工具| ESLint，选择自动的，然后运行 eslint -fix 选项，如果根目录中有 .eslintrc 文件等配置文件，这可以解决问题。