WebStorm 的 Project 工具窗口不支持按文件类型排序，因其设计为映射文件系统结构，强行按类型排序会破坏路径语义且性能开销大；替代方案包括全局搜索、过滤器及合理规划目录结构。
Project 工具窗口不支持按文件类型排序
WebStorm 左侧的 Project 工具窗口（即默认左侧栏）**没有内置的「按文件类型排序」功能**。它按文件系统目录结构展开，排序逻辑固定为：文件夹在前、文件在后，同级项按名称字母序排列——这个顺序无法通过设置切换成「.js 在上、.ts 在中、.css 在下」这类类型分组。
为什么不能直接按文件类型排序？
这不是遗漏的功能，而是设计使然：
-
Project视图本质是项目内容根（Content Root）的树状映射，服务于索引、跳转、重构等底层能力；强行按类型重排会破坏路径层级语义（比如把src/utils/helper.ts和tests/utils/helper.test.ts拉到一起，就割裂了源码与测试的物理关系） - WebStorm 不维护「文件类型 → 文件列表」的实时聚合缓存，每次排序都需要遍历整个项目索引，性能代价高且无实际编辑增益
- 官方从未提供类似
Sort by extension的开关，Settings 里也搜不到相关配置项
替代方案：用搜索 + 过滤快速定位某类文件
真要集中处理某一类型（比如批量修改所有 .scss），别依赖左侧栏排序，改用以下更高效的方式：
- 全局搜索框（
Ctrl + Shift + F/Cmd + Shift + F）输入*.scss，结果页天然按路径分组，可直接双击跳转 - 在
Project窗口右上角点击漏斗图标（Filter），勾选Show only files matching pattern，填入*.ts或**/*.test.*等 glob 表达式，临时隐藏无关文件 - 用
Ctrl + Shift + A（Find Action）搜File Structure，打开后按Ctrl + F搜索.js，能聚焦当前文件内的同类型声明（适合单文件内梳理）
如果坚持要视觉上“归类”，只能靠人工建目录
WebStorm 尊重你对文件系统的组织方式。想让同类文件挨着显示，最可靠的做法是：
- 在磁盘上建
src/js/、src/css/、src/assets/这样的子目录，Project 树自然按此分层 - 避免把
.vue、.jsx、.svelte全塞进一个components/目录却不加子分类——IDE 不会替你做类型聚类，它只忠实反映你的文件夹结构 - 注意：不要用「Scopes」或「Favorites」模拟类型分组，它们不改变 Project 树顺序，仅新增平行视图
真正容易被忽略的是：很多人花半小时找“按类型排序”的开关，其实问题根源在于项目目录结构本身没做类型隔离。先整理磁盘上的文件夹，比调 IDE 设置管用十倍。
