如何根据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
热键上的代码。
我已经为我的 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
热键上的代码。