我已经为我的WebStorm项目指定了eslint配置，但它似乎不适用于代码重新格式化功能。例如，它仍然将import { something } from 'somewhere'格式化为import {something} from 'somewhere'。
有没有办法使WebStorm根据eslint配置来格式化代码？
8个回答
205
以下步骤和截图来自IntelliJ IDEA 2017.2。
您可以为“修复ESLint问题”操作添加快捷键。 确保已安装并启用“JavaScript支持”插件。
首先转到 首选项 | 语言和框架 | JavaScript | 代码质量工具 | ESLint 并启用它。 您需要定义您的“Node解释器”，“ESlint包”和可选的“配置文件”。
接下来转到首选项 | 键盘映射并在那里搜索“eslint”。 现在，例如，您可以添加快捷键“control + shift + L”。
- phse
7
1这也适用于Webstorm。谢谢。 - Ahmed Hassanien
1我认为这是推荐的答案，因为我只想修复当前文件，而不想运行eslint命令并修复整个项目，因为在团队项目中存在版本控制系统问题。 - hermeslm
29IntelliJ 真的很不智能，它没有意识到已经配置了 eslint，并选择将其作为默认的格式化工具。就像 VS Code 那样。 - 5422m4n
3如果你做的项目不仅限于JavaScript呢 :) - Steve Moretz
1@MikhailBatcer，我刚刚修好了。 - SiberianGuy
显示剩余2条评论
48
- nixklai
4
应用 ESLint 代码风格规则 - 太简单了，谢谢 @nixklai - MeerArtefakt
此答案会更新WebStorm中的设置以匹配eslint（和prettier）规则。"ESLint：基于'.eslintrc.json'，项目代码风格和编辑器设置已更新。应用了以下规则：prettier/prettier。" - Jared Dickson
这应该是被接受的答案，因为它是唯一符合最初问题提出的用例的答案，即使WebStorm自己格式化，而不是事后修复格式。 - AntoineB
同样适用于.prettierrc文件。 - undefined
32
我刚安装了WebStorm 2017，不知道它是否适用于WS 2016。如果你想重新格式化代码，可以在光标靠近ESLint错误时按Option + Enter，而不是按Option + Command + L。这将打开上下文菜单，然后选择“ESLint：Fix current file”。
- Oyvind Habberstad
2
4这只是为你运行
eslint --fix <当前文件路径>。 - Rory O'Kane2希望能为此设置一个快捷键绑定。 - bvdb
28
2021年解决方案：
WebStorm使用了Prettier包，并提供以下选项:
首选项|语言和框架|JavaScript|Prettier->在“重新格式化代码”操作上
现在，WebStorm使用eslint规则在重新格式化代码快捷键上重新格式化代码。
- uptoyou
7
好的，有很多评论说“这应该是被采纳的答案”，在2022年这应该被采纳为答案！ - Matthew Dolman
你的答案是可行的，但不完整。它没有涵盖 eslint 的步骤，并且没有指定您必须执行与 .eslintrc.js 相同的操作，即右键单击 .prettierrc.json 并应用 prettier 规则。 - joeyj
@joeyj 非常感谢，如果您提供更多信息，我愿意进行更新。 - uptoyou
1@uptoyou 确定，那么对我有效的步骤如下：1.安装eslint并设置eslintrc.js 2.安装prettier并设置prettierrc.json 3.安装eslint-config-prettier并扩展eslintrc以包括prettier 4.右键单击并应用eslint样式规则 5.右键单击并应用prettier 6.确保“保存时运行eslint --fix”已选中 7.确保“在重新格式化代码操作时”已选中（这一步是您回答中的步骤，如果没有它，CTRL + L会严重破坏JS代码的格式）。请注意，如果没有先应用eslint和prettier，则您的回答无法解决格式问题。 - joeyj
我已经将接受的答案更改为这一个。 - SiberianGuy
显示剩余2条评论
13
更新：该答案已经过时。最佳解决方案描述在https://dev59.com/RlgR5IYBdhLWcg3wGaKb#46099408
不幸的是，您无法导入eslint代码样式配置（WEB-19350），但您可以手动配置代码样式。
请参阅以下设置："文件 | 设置 | 编辑器 | 代码风格 | JavaScript"
对于import大括号：
"空格" -> "ES6 导入/导出大括号"
- anstarovoyt
1
目前我使用的临时解决方案是将我的ESLint配置导出到JSCS中。这在WebStorm和PHPStorm中非常好用！
我使用了一个叫做Polyjuice的包，并且这里是我的eslint配置输出。
- Cameron
1
现在，WebStorm已经支持ESLint“开箱即用”，并且它可以按预期工作，帮助您编写代码风格，请参见https://www.jetbrains.com/webstorm/whatsnew/#v2017-2-eslint。 - Cameron
0
最好的方法是通过使用宏来自动化它。
1. 转到 编辑 | 宏 | 开始录制宏
2. 转到 文件 | 全部保存
3. 按下 Strg + Shift + A
4. 搜索 eslint 并运行它。
5. 转到 编辑 | 宏 | 停止录制宏
6. 转到 编辑 | 宏 | 编辑宏，并删除除了两个 Action:... 以外的所有内容
7. 转到 文件 | 设置 | 快捷键映射 | 宏 并将 Strg + S 添加到宏中
这效果非常好，让工作更加轻松 :)
- Leon338
0
对于那些仍然遇到问题的人，我按照以上答案的所有步骤，但完全没有起作用。
对我来说，问题在于我终端中使用的Node版本（12.x）与项目中.nvmrc和package.json中的"engine"不一致。
在进行了上述两个更改之后，我的eslint又可以正常工作了。
p.s：我假设您已经安装了所有依赖项，并在项目根目录中拥有一个.eslintrc.*文件。
- lucianokrebs
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
nixklai和uptoyou的答案。 - Mikhail Batcer