如何配置WebStorm按ESLint规则格式化代码（无需Prettier）

你可以通过以下几步配置WebStorm，让它完全依赖ESLint规则进行代码格式化，无需引入Prettier：

1. 确认ESLint在WebStorm中正常识别 #

打开WebStorm设置（快捷键：Ctrl+,，适配你使用的VSCode快捷键映射），导航到 Languages & Frameworks → JavaScript → Code Quality Tools → ESLint：

• 勾选「Automatic ESLint configuration」，WebStorm会自动读取项目根目录的.eslintrc.json
• 确保ESLint状态显示为「Enabled」，若存在路径问题，可手动指定项目node_modules目录下的ESLint包位置

2. 让WebStorm内置风格与ESLint规则对齐 #

导航到 Editor → Code Style → JavaScript（使用TypeScript则同步配置TypeScript选项）：

• 点击右上角「Set from...」选择「ESLint」，让WebStorm内置代码风格规则与你的ESLint配置完全同步，避免内置格式化器产生冲突

3. 修改快捷键，将Alt+Shift+F绑定到ESLint修复 #

默认Alt+Shift+F绑定的是WebStorm内置的「Reformat Code」，需要替换为ESLint修复动作：

• 打开设置 → Keymap，搜索「ESLint: Fix current file」
• 右键点击该动作，选择「Add Keyboard Shortcut」
• 按下Alt+Shift+F，点击「OK」保存，覆盖原有绑定

4. 可选：开启保存时自动ESLint修复 #

若需要自动格式化，导航到 Tools → Actions on Save：

• 勾选「Run eslint --fix」，每次保存文件时ESLint会自动应用规则修复代码

完成以上配置后，按下Alt+Shift+F就会严格按照你的ESLint规则格式化代码，包括指定的2空格缩进，全程无需依赖Prettier。

内容的提问来源于stack exchange，提问作者nop