webstorm默认不支持选中单词后全文高亮，需安装browsewordatcaret插件实现；该插件纯字符串匹配，与原生语义高亮（highlight usages）互不冲突，但须重启生效并单独配置背景色。
WebStorm 默认不支持「选中一个单词后，全文相同字符串自动高亮」——这不是 bug，是设计如此。要实现这个效果，必须安装并配置 BrowseWordAtCaret 插件，别指望改设置里的「Highlight usages of element at caret」能搞定。
为什么默认 Highlight usages 不管用
「Highlight usages of element at caret」只响应光标停在符号上（比如把光标放在 userName 中间），且该符号需被语言服务识别为有效声明/引用（如变量、函数名）。一旦你鼠标拖选一段文本，它立刻退化为纯文本选择，语义高亮就失效了。
常见误判包括：
- 以为勾选了
Settings > Editor > Code Editing > Highlight usages of element at caret就能高亮选中的任意字符串——其实它对class、todo、123这类非标识符完全没反应 - 试图用
Ctrl+F搜索再按Enter模拟高亮——这只会跳转，不保留背景色，也不支持鼠标悬停即更新 - 装了
Rainbow Brackets或主题插件后误以为它们附带单词高亮功能——它们不处理这个逻辑
安装并启用 BrowseWordAtCaret 插件
这是目前最轻量、稳定、专为此场景设计的插件，2026 年仍兼容最新版 WebStorm。
- 打开
Settings > Plugins，右上角搜索框输入BrowseWordAtCaret，点击Install - 安装完成后必须重启 WebStorm（不重启插件不会加载）
- 重启后进入
Settings > Editor > Color Scheme > BrowseWordAtCaret - 勾选右侧的
Background，点击颜色块自定义高亮色（推荐浅黄#FFF9C4或淡蓝#BBDEFB，避免和Text search result冲突） - 确认
Enable highlighting for selected text已勾选（旧版本可能叫Highlight selected word）
BrowseWordAtCaret 和原生 Usages 高亮的区别
两者可共存，但作用机制完全不同，容易颜色打架：
-
BrowseWordAtCaret：纯字符串匹配，选中class，连 HTML 里的class="btn"和注释里的// class name都会高亮 -
Highlight usages of element at caret：依赖语言服务解析，只高亮class作为关键字（如class A {}）或类型声明位置，忽略字符串字面量 - 如果两者背景色设成一样，叠加后会变深；建议
BrowseWordAtCaret用半透明浅色，Usages 用稍深色块，便于区分 - 禁用任一功能，都在各自设置页取消勾选即可，互不影响
高亮颜色调不好？注意这几个细节
很多人调完颜色发现“好像没生效”，其实是被其他视觉干扰盖住了：
-
Selection background（选中文本底色）和BrowseWordAtCaret Background太接近，导致高亮“看不见”——建议把前者设为深灰（#333），后者设为浅黄（#FFF9C4） - 用了
Rainbow Brackets类插件，可能覆盖了编辑器底层渲染层，导致背景色不显示——可临时禁用测试 - 文件类型未被正确识别（比如
.wpy文件没关联到 Vue.js），插件可能无法注入高亮逻辑——右键文件 →Associate with File Type…确认类型 - 配色方案未点
Apply：WebStorm 不自动保存，改完必须手动点
真正麻烦的不是装插件，而是颜色叠加、文件类型错位、重启遗漏这三处——调一次不生效，大概率卡在这三个地方中的某一个。
