下面给你一份 最全面、最实用、可直接上手的《WebStorm 作用域（Scopes）与文件颜色（File Colors）详解》。
这是 JetBrains IDE 中非常强大却经常被忽视的功能，前端工程多模块、多分支开发非常受用。
内容包括：
- Scopes 是什么
- 文件颜色怎么用
- 自定义作用域语法
- 实战示例（前后端区分、测试文件高亮、Node/Vue 分组等）
- 团队统一配置建议
🌈 一、什么是 WebStorm 的 “作用域（Scopes）”？
作用域（Scope）是对项目文件的逻辑分组，类似一个智能文件过滤器。
你可以用 Scopes 来：
- 给一类文件染色（文件颜色）
- 让某些文件排除出 Indexing / Code Analysis
- 限制搜索范围：“只在后端查找”
- 限制版本控制提交范围
- 配置 ESLint / Prettier 对不同目录生效
- 配置测试覆盖范围
- 创建更智能的项目视图
作用域本质上是一个 规则 + 匹配文件集合。
入口：
WebStorm → Settings → Appearance & Behavior → Scopes
🎨 二、什么是 “文件颜色（File Colors）”？
文件颜色用于：
- 在左侧 Project Sidebar 给文件染色
- 让不同类型文件一眼区分
- 区分多个同名文件（common.js / common.ts）
配置入口：
Settings → Appearance & Behavior → File Colors
启用方式：
✔ 勾选 “Use in Project View”
✔ 勾选 “Use in Editor Tabs”
🧩 三、Scopes 的三种类型
WebStorm 支持 3 类作用域：
① Local（本地作用域）
只存在于你本地，不会随项目同步。
② Shared（共享作用域）
随 .idea 文件夹同步，可让整个团队使用。
③ IDE 内置 Scoped 规则
如：
- Project Files
- Problems
- Tests
- Non-Project Files
- Open Files
⚙️ 四、如何创建一个作用域？
路径：
Settings → Appearance & Behavior → Scopes → + New Scope
有两种方式创建：
- 手动添加目录 / 文件
- 使用模式匹配（Pattern）
🧠 五、自定义作用域 Pattern 语法（重点）
WebStorm 使用一种称为 file: pattern 表达式 的语法。
最常用写法：
file[项目名]:src/**/*.js
file:*.vue
file[Module]:backend/**
file:!**/node_modules/**
语法规则：
| 用法 | 示例 | 意义 |
|---|---|---|
* | *.js | 匹配任意字符 |
** | src/** | 匹配任意层级目录 |
&& | A && B | 逻辑与 |
| ` | ` | |
! | !node_modules/** | 排除 |
| 指定模块 | file[projectName] | 限定作用域只在指定项目内 |
🔥 六、作用域 + 文件颜色的组合实战示例（最有用）
下面是最常见、最实用的配置案例，可直接复制。
✅ 实战 1：给前端 / 后端项目染色
Scope：前端
file:src/frontend/**
Scope：后端
file:src/backend/**
文件颜色配置：
Frontend → Blue
Backend → Orange
效果：
- 左侧树状图自动给前后端文件不同颜色
- 多人合作时能快速分辨你当前在处理哪个部分
✅ 实战 2：给 node_modules 排除索引 / 取消染色
Scope：
file:node_modules/**
勾选：
❌ “Use in Project View”
让 node_modules 显示浅灰，不干扰视线。
✅ 实战 3：区分 Vue / React / TS 文件颜色
Vue Scope：
file:*.vue
React Scope：
file:*.jsx || *.tsx
TS Scope：
file:src/**/*.ts
然后在 File Colors 中创建：
Vue → Green
React → Purple
TypeScript → Blue
效果：
大型项目一眼就能找到对应技术栈文件。
✅ 实战 4：高亮测试文件（tests / *.spec.js）
Scope：
file:**/__tests__/**||*Test.js||*Test.ts||*.spec.js||*.spec.ts
颜色建议：Yellow
非常醒目，让你知道当前在看单测。
✅ 实战 5：只搜索业务代码，排除脚手架
Scope：
file:src/** && !src/generated/** && !node_modules/**
用途：
- Find in Path 搜索更快
- Code Inspection 更准
- ESLint 避免扫描 “generated” 目录
🔧 七、File Colors 设置步骤（详细）
Settings → File Colors → +
选择：
- Local（你的个人配色）
- Shared（团队共享配色）
然后：
- Name：自定义颜色组名
- Scope：选择上一步创建的作用域
- Color：选择颜色
- 勾选 “Use in Project View”
- 可选 “Use in Editor Tabs”
📘 八、团队最佳实践（提升效率）
👥 建议把 Scopes 设置成 Shared，这样：
- 所有人颜色一致
- 新人打开项目自动拥有相同视图
- 大家都能用同样的测试 / 业务作用域
- 更利于 Code Review
将 .idea/scopes/ 提交到 Git：
.idea
└── scopes
├── Frontend.xml
├── Backend.xml
├── Tests.xml
└── ...