DEV Community
·
在VS Code中显示文件夹名称而非index.tsx
💡
原文英文，约200词，阅读约需1分钟。
📝
内容提要
在VS Code中，可以通过自定义标签模式来区分相同名称的文件，例如将index文件的标签改为显示其所在文件夹名称，以便更好地识别。
🎯
关键要点
- 在VS Code中，用户常常会打开多个相同名称的文件，如index.ts或index.tsx。
- VS Code在右侧显示文件夹名称，但用户仍然难以区分相同名称的标签。
- 用户可以自定义标签模式，以便更好地识别index文件。
- 自定义设置步骤包括：搜索'workbench.editor custom labels patterns'，点击'Add Item'，输入'*/**/index.{js,jsx,ts,tsx}'作为Item，输入'${dirname} (${filename}.${extname})'作为Value。
- 完成设置后，标签将显示为文件夹名称，便于阅读。
❓
延伸问答
如何在VS Code中显示文件夹名称而非index.tsx？
可以通过搜索'workbench.editor custom labels patterns'，点击'Add Item'，输入'*/**/index.{js,jsx,ts,tsx}'作为Item，输入'${dirname} (${filename}.${extname})'作为Value来设置。
为什么在VS Code中需要自定义标签模式？
因为用户常常打开多个相同名称的文件，如index.ts或index.tsx，难以区分这些标签。
自定义标签模式后，VS Code的标签会有什么变化？
标签将显示为文件夹名称，便于用户更好地识别和阅读。
在VS Code中，如何添加自定义标签项？
在设置中点击'Add Item'，然后输入相应的Item和Value。
VS Code中显示文件夹名称的设置适用于哪些文件类型？
该设置适用于index.js、index.jsx、index.ts和index.tsx文件。
如何修改自定义标签的显示内容？
可以修改Value的内容，以显示不同或更短的标签信息。
➡️
