下面给你一份 最全面、最实用、可直接上手的《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

有两种方式创建：

  1. 手动添加目录 / 文件
  2. 使用模式匹配（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（团队共享配色）

然后：

  1. Name：自定义颜色组名
  2. Scope：选择上一步创建的作用域
  3. Color：选择颜色
  4. 勾选 “Use in Project View”
  5. 可选 “Use in Editor Tabs”

📘 八、团队最佳实践（提升效率）

👥 建议把 Scopes 设置成 Shared，这样：

  • 所有人颜色一致
  • 新人打开项目自动拥有相同视图
  • 大家都能用同样的测试 / 业务作用域
  • 更利于 Code Review

将 .idea/scopes/ 提交到 Git：

.idea
 └── scopes
      ├── Frontend.xml
      ├── Backend.xml
      ├── Tests.xml
      └── ...