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

How to make WebStorm format code according to eslint?

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

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

更新:答案已过时。

中描述了最佳解决方案

很遗憾,您无法导入 eslint 代码风格配置(WEB-19350),但您可以手动配置代码风格。

查看设置:"File | Settings | Editor | Code Style | JavaScript"
对于进口大括号: "Spaces" -> "ES6 import / export braces"

我刚刚安装了 WebStorm 2017,我不知道这是否适用于 WS 2016。如果您不按 Option + Command + L 重新格式化您的代码,您可以在光标靠近ESLint 错误。这将打开上下文菜单,然后 select "ESLint: Fix current file"

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

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

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

您可以为操作添加键盘快捷键 'Fix ESLint Problem'。 确保插件 'JavaScript Support' 已安装并启用

首先进入首选项 | 语言和框架 | JavaScript | 代码质量工具 | ESLint 并启用它。您需要定义 'Node interpreter'、'ESlint package' 和可选的 'Configuration file'.

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

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

1. 前往编辑 |宏观 |开始宏录制
2. 转到 文件 |全部保存
3. 按Strg + Shift + A
4. 搜索 eslint 并 运行 它。
5. 转到 编辑 |宏观 |停止宏录制
6. 转到 编辑 |宏观 |编辑宏 并删除除两个 Action:...
之外的所有内容 7. 转到 文件 |设置 |键盘映射 | Macros 并在 Macro

上添加 Strg + S 这很好用,使工作更容易:)

如果您像我一样使用较新版本的 WebStorm,可以通过右键单击 .eslintrc.js(或其他 ESLint 配置文件)然后单击 [=18] 将 ESLint 规则导入 WebStorm =] 选项如图 here.

在撰写本文时请注意,您还需要在 "Settings" 或 "Preference" 菜单中排除 <script> 标签的缩进。一个很棒的人写了一篇 short write-up 如何做到这一点。

对于那些仍然有问题的人,我执行了上述答案的所有步骤,但它根本不起作用。

对我来说,问题是我在终端中使用的节点版本 (12.x) 与项目 package.json 中的 .nvmrc"engine"

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

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

2021 年为我解决了:

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

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

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