确认ESLint规则与WebStorm代码风格/检查是否为不同机制？

一、核心机制差异 #

三者属于完全独立的配置体系：

• ESLint（含Prettier插件）：项目级跨编辑器规范，依赖项目根目录的.eslintrc.*、.prettierrc等配置文件，规则作用于所有支持该工具的开发环境（WebStorm、VS Code等），负责代码质量检查+统一格式化标准。
• WebStorm「Editor」>「Code Style」：编辑器级个性化排版设置，仅在当前WebStorm实例生效，基于IDE自身的格式化引擎，和项目配置无关联，用于定义IDE默认的代码缩进、换行、空格等排版规则。
• WebStorm「Editor」>「Inspections」：编辑器级代码检查工具，仅在WebStorm内生效，通过IDE内置的检查逻辑，检测语法错误、潜在bug、不符合IDE自定义规范的代码，和ESLint的检查逻辑相互独立。

二、Hard wrap 与 printWidth 的冲突问题 #

当你同时设置WebStorm Code Style的Hard wrap at为100，Prettier的printWidth为90时，必然会产生行为冲突，具体场景：

1. 若WebStorm已配置为优先使用Prettier格式化：执行「Reformat Code」时，会遵循Prettier的printWidth规则，将行宽限制在90字符，忽略IDE的Hard wrap at设置；同时ESLint（若集成eslint-plugin-prettier）会标记超过90字符的行为不符合规范。
2. 若WebStorm未启用Prettier作为默认格式化器：执行「Reformat Code」时会使用IDE的Hard wrap at规则，将行宽设为100，但此时ESLint会将这些超过90字符的行判定为格式错误。

三、建议解决方案 #

为避免编辑器与项目规范的冲突，推荐：

• 在WebStorm的Prettier配置中，开启「Use Prettier from package.json」（确保使用项目依赖的Prettier版本），并将Prettier设置为默认的格式化工具；
• 关闭WebStorm Code Style中与Prettier规则重叠的选项（比如行宽、缩进、引号风格等），让IDE完全遵循项目级的Prettier配置；
• 开启WebStorm的「Run eslint --fix on save」选项，确保保存时自动修复ESLint/Prettier检测到的格式问题。

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