Klapring

VSCode 功能与美化扩展插件推荐

更新日志

功能

这节推荐的都是比较通用的功能性扩展,针对某个语言的扩展也不需要我来推荐,自有大把针对性的文章进行介绍。

Path Intellisense

Path Intellisense 扩展可以在输入文件路径的时候给出自动补全提示,方便输入。

Project Manager

Project Manager 扩展可以在侧边栏新增一个「项目管理器」选项,通过在项目管理器中保存项目,可以实现不同工作区之间的快速切换。

VSCode 侧边栏截图:Project Manager 扩展的「项目管理器」面板,按收藏分组列出多个代码项目。
图 1 项目管理器界面

Error Lens

Error Lens 扩展可以直接把错误、警告与提示等信息直接显示在代码行后面,而不是只能把光标移动到下划线处才能看到。

VSCode 截图:Rust 代码中未使用的变量 n、k 旁直接显示「unused variable」提示文字。
VSCode 截图:C++ 的 std::cout 一行被标红,行尾显示「Use of undeclared identifier 'std'」错误。

Todo Tree

Todo Tree 扩展可以搜索整个工作区内的「TODO」、「FIXME」、「BUG」等字段,并在侧边栏的选项中查看。

VSCode 侧边栏截图:Todo Tree 面板按文件树列出扫到的标记,其中包含一条「BUG 解决」。
图 4 效果演示

Trailing Spaces

Trailing Spaces 扩展可以标红每行代码尾部多余的空格。

VSCode 截图:C++ 代码中行尾多余的空格被红色方块高亮标出。
图 5 效果演示

Excalidraw

Excalidraw 扩展可以在 VSCode 内绘制手绘风格的矢量图片,支持导出 .png.svg 格式。

Excalidraw 手绘风格图片:用蓝色线条画出的 VSCode 徽标,下方写着 Visual Studio Code。
图 6 Excalidraw 绘图

CodeGeeX

CodeGeeX 扩展可以调用本地或网络的大模型,来加速代码编写。CodeGeeX 的大模型在 GitHub 上开源,因此可以通过本地运行大模型,放心地在涉及商业秘密的项目中使用。

Code Spell Checker

Code Spell Checker 扩展可以检测代码中的英文拼写错误并给出修改建议。

翻译(英汉词典)

翻译(英汉词典) 扩展可以在选中单词时在右下角给出单词的翻译,并且可以翻译下划线、驼峰等格式的单词,方便理解代码。

效果演示

VSCode 截图:Java 代码旁弹出翻译面板,批量显示标识符中单词的中文释义。
VSCode 截图:悬停时弹出英汉词典面板,逐词给出 basic、calculator 等词的中文释义。
VSCode 截图:大写标识符上弹出词典面板,列出 account、number 的详细释义与词性。
VSCode 截图:悬停显示翻译结果的演示,编辑器窗口与状态栏均为中文界面。

驼峰翻译助手

驼峰翻译助手扩展可以调用翻译 API,将中文直接翻译为英文的不同格式的变量名,再也不用发愁怎么命名变量。

VSCode 截图:驼峰翻译助手把代码中的多语言变量名自动替换为英文命名。
图 11 效果演示

Roo Code

Roo Code 是一个类似 Cursor 的 AI 代码助手插件。优势在于能够调用 VSCode 自带的GitHub Copilot 的 API,对于有 GitHub Copilot Pro 免费访问的人(学生认证或 1k star 开源库的维护者)比较友好。不过 VSCode 的 API 不支持多模态,只能文字描述需求。

美化

Material Icon Theme

Material Icon Theme 扩展是一个文件图标扩展,其为各种文件与文件夹都制作了特殊的图标,方便浏览。

VSCode 资源管理器截图:Material Icon Theme 为各类文件与文件夹显示彩色图标。
图 12 效果演示

background-cover

background-cover 扩展可以直接在其自带的命令中修改更换 VSCode 背景图片。

VSCode 命令面板截图:background-cover 的「背景图设置」菜单,列出选择背景图等命令。
图 13 扩展配置命令

更换背景图后效果如下:

VSCode 窗口截图:编辑器背景换成动漫角色壁纸,欢迎页的快捷键提示叠在其上。
图 14 更换背景图效果

SpaceBox UI Enhancer

SpaceBox UI Enhancer 扩展为 VSCode 的菜单增加了大量对效率影响较小的过渡动画效果。

备注: 评论区反应 MacOS 下该插件可能不可用,请注意。
VSCode 截图:SpaceBox UI Enhancer 的窗口,展示菜单过渡动画效果的演示画面。
图 15 动画效果演示