如何在WebStorm中区分显示ESLint/Prettier与TypeScript错误样式？

完全可以实现，具体操作步骤如下：

1. 分配错误严重级别 #

打开WebStorm设置面板（File > Settings 或 Mac端 WebStorm > Settings），进入 Editor > Inspections：

• 找到TypeScript分类下的各类错误（如类型不匹配、语法错误），保持其Severity为Error（默认配置）
• 搜索并定位Prettier检查项，将其Severity改为Warning
• 若需单独区分ESLint错误，可在JavaScript > ESLint分类下，将ESLint规则的Severity设为自定义级别（如Weak Warning）或单独的Error子类

2. 设置对应级别的显示样式 #

进入 Editor > Color Scheme > General，展开Errors and Warnings：

• 选中Error项，在右侧Effects区域设置波浪线颜色为红色，对应TypeScript错误
• 选中Warning项，设置波浪线颜色为橙色，对应Prettier错误
• 若需单独定制ESLint样式，可切换到Editor > Color Scheme > JavaScript > ESLint，修改ESLint error的波浪线颜色和样式

额外说明 #

如果需要更精细化的控制，比如不为不同工具依赖通用级别，可直接在对应语言的配色分类下调整：

• TypeScript错误：Editor > Color Scheme > TypeScript 下的Errors选项
• ESLint错误：Editor > Color Scheme > JavaScript > ESLint 下的对应规则样式

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