发布于 2026-01-06 10 阅读
0

🌈 2 个 Colors 扩展程序,让 Visual Studio Code 更上一层楼!

🌈 2 个 Colors 扩展程序,让 Visual Studio Code 更上一层楼!

颜色🌈帮助我们识别周围的事物,包括Visual Studio Code实例文件。

今天我将展示如何借助颜色和两个 VS Code 扩展程序解决我遇到的两个问题。以下视频将展示这些扩展程序,以及如何进一步扩展它们的功能,从而获得更强大的自定义功能👇

1. 识别不同的 VS Code 实例

Peacock VSCode

这种情况很常见,你可能有一个后端代码库和一个前端代码库,或者你正在处理多个项目,碰巧打开了两个或多个 VS Code 实例。

简答:Peacock(获取扩展程序

这是一个非常有名且广泛使用的扩展程序,但如果你还不知道它,也许是时候尝试一下了!

(您也可以在设置中手动自定义项目,但此扩展程序使操作更加便捷)

孔雀特色

孔雀

您可能会觉得以下功能很有用:

使用此命令Peacock: Surprise me with a random color,您可以为当前项目分配随机颜色。胆子大的话,试试看!

如果您心中已有颜色,可以使用以下方法进行设置Peacock: Enter a color

如果您需要一些建议,Peacock: Change to a Favorite Color我们也会提供预定义颜色列表(您也可以添加自己的颜色)。

2. 识别同一存储库中的文件和文件夹

文件夹路径颜色 VScode

我最近在研究模块联合,但这几乎适用于所有单体仓库场景。

我想要一种简单的方法来知道文件引用了哪个项目,而通过另一个扩展程序 Folder Path Color(获取该扩展程序),我实现了这一点!

由于文件名颜色已经用于跟踪 git 状态,因此启用或禁用此功能存在一些局限性,您可以自行决定。

文件夹路径颜色特征

文件夹路径颜色

其核心功能在于,您可以根据文件路径自定义文件颜色,还可以为其分配符号。

这是我在视频中使用的配置:

{
  "folder-path-color.folders": [
    {
      "path": "host",
      "symbol": "H",
      "tooltip": "Host"
    },
    {
      "path": "app01",
      "symbol": "01",
      "tooltip": "App 01",
      "color": "blue"
    },
    {
      "path": "app02",
      "symbol": "02",
      "tooltip": "App 02",
      "color": "cyan"
    }
  ]
}
Enter fullscreen mode Exit fullscreen mode

该符号(即字符串)特别有助于克服文件名颜色的限制,这样 git 可以将新添加的文件着色为绿色,但文件名旁边仍然有符号来标识项目。

您有一些默认颜色,但您也可以使用一组自定义颜色来扩展它们。

结论

这篇内容比较简短,但我还是想提一下我发现的这两个扩展程序,它们帮我解决了几个问题。Peacock 非常有名,但 Folder Path Color 就没那么出名了,我觉得它还是有一些实用功能的。

如果你想看我测试这两个扩展程序及其自定义功能,请观看此视频:https://www.youtube.com/watch?v =bvaSo3tip2g


感谢阅读本文,希望您觉得有趣!

我最近创建了一个 GitHub 社区!我们创建开源项目,旨在共同学习 Web 开发!

加入我们:https://github.com/DevLeonardoCommunity

你喜欢我的内容吗?不妨订阅我的YouTube频道!这对我很重要❤️
你可以在这里找到它:
YouTube

欢迎关注我,以便在新文章发布时收到通知 ;)

文章来源:https://dev.to/this-is-learning/2-colors-extensions-to-make-visual-studio-code-even-better-49a0