WebStorm格式化代码时ESLint报Mixed spaces and tabs错误求助

1. 统一WebStorm缩进设置 #

打开WebStorm设置（快捷键Ctrl+Alt+S），进入Editor > Code Style > 对应开发语言（如JavaScript/TypeScript）：

• 在「Tabs and Indents」标签页：
  • 根据ESLint规则选择是否勾选Use tab character：要求用空格缩进就取消勾选，用tab则勾选；同时确保Tab size、Indent、Continuation indent均设为2。
  • 切换到「Other」标签页，取消勾选Detect and use existing file indents for editing，避免编辑器自动适配文件中已有的混合缩进。

2. 同步ESLint与Prettier的缩进规则 #

• 检查项目根目录的ESLint配置文件（如.eslintrc.js）：
  • 确保no-mixed-spaces-and-tabs设为error；
  • 若用空格缩进，添加规则："indent": ["error", 2, {"SwitchCase": 1}]；
  • 若用tab缩进，添加规则："indent": ["error", "tab", {"SwitchCase": 1}]，同时关闭no-tabs规则："no-tabs": "off"。
• 检查Prettier配置文件（如.prettierrc）：
  • 用空格："useTabs": false, "tabWidth": 2；
  • 用tab："useTabs": true, "tabWidth": 2，确保和ESLint规则完全一致。

3. 设置WebStorm格式化时自动修复ESLint问题 #

• 进入WebStorm设置的Languages & Frameworks > JavaScript > Code Quality Tools > ESLint：
  • 勾选Run eslint --fix on save，同时确认ESLint配置文件路径指向项目根目录的对应文件。
• 进入Tools > Actions on Save：
  • 勾选Reformat code、Optimize imports和Run eslint --fix，让Ctrl+Alt+L格式化时自动触发ESLint修复。

4. 清理现有文件的混合缩进 #

• 用WebStorm替换功能统一转换：
  • 打开替换对话框（Ctrl+R），勾选「Regex」；
  • 转tab为2个空格：查找\t，替换为 （两个空格），点击「Replace All」；
  • 转空格为tab：查找 （两个空格），替换为\t（注意仅替换缩进部分，避免修改字符串内的空格）。
• 或用命令行批量修复：在项目根目录执行npx eslint --fix .，自动修复所有文件的缩进问题。

5. 验证效果 #

打开存在混合缩进的文件，按Ctrl+Alt+L格式化后，查看ESLint面板确认错误消失；新建文件编写代码并格式化，检查缩进是否统一无混合情况。

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