2024 年最推荐的 30 个 Vscode 插件

7,198 阅读5分钟

Vscode 是一个非常强大的 IDE 工具,拥有很多方便快捷的拓展,本文中分享我平时使用的插件

UI 美化

代码截图美化:Code Snap

让你的代码截图变得更漂亮

使用:

打开命令面板,打开 Code snap

它会自动将你选择的代码加上代码框,右键点击复制即可

图标美化:Material Icon Theme

让你的文件图标更好看

支持以下的文件图标

Power Mode

让你写代码时光标更炫酷

建议关闭抖动功能:在 Vscode 的配置中加上 "powermode.shake.enabled": false

Rainbow Brackets

以不同颜色显示成对的括号,并用连线标注括号范围,方便查看代码

搜索高亮美化:highlight-icemode

功能:选中相同的代码时,让高亮显示更加明显

VSCode 自带的选中高亮不够明显,这个插件自带的高亮很不错,并且支持自定义高亮,

用了这个插件之后,VS Code 自带的高亮就可以关掉了,在用户设置里添加"editor.selectionHighlight": false即可

缩进美化:indent-rainbow

让你的缩进更明显

有两种格式可以选择

主题

Dracula Official

One Dark Pro

工作提效

AI 提效:GitHub Copilot

如果是大厂的话,都会有自研的大模型,为了数据安全,更推荐使用公司的大模型

Paste JSON as Code

自动将 Json 自动拓展为指定语言的代码,可以省下我们写代码的时间

基本支持所有的编程语言

代码拓展加强:Surround

提供了多种代码拓展方式,如 if,for,try catch 等,减少写模板代码的工作量

代码功能补全

Code Runner

提供了在 VS Code 中运行代码的功能

该插件支持多种编程语言,包括但不限于 JavaScript, Python, Java, C++, C#, PHP, Ruby, Go 等

借助 Code Runner,您可以在编辑器中直接运行代码块或整个文件,查看输出结果,而无需离开 VS Code。

语法检查:Error Lens

代码语法检查插件

Error Lens 通过使诊断更加突出,增强了语言的诊断功能,突出显示了由该语言生成的诊断所在的整行,并在代码行的位置以行方式在线打印了诊断消息。

拼写错误检查:Code Spell Checker

帮助我们检查代码中是否有拼写错误,提高代码可读性

快速定位方法:Go To Method

支持快速切换当前文件中的方法

Git

Git History

支持显示 Git History

GITLENS INSPECT

功能补全与增强

格式化:Prettier - Code formatter

目前 Vscode 最热门格式化插件,支持多种语言

Todo

  • 格式要求:注释必须以 todo开头,大小不限制
public static void main(String[] args) {
    //👇 必须使用 TODO,大小不限制
    // TODO test1
    System.out.println("Hello world!");
}
  • 点击左侧的按钮,可以切换到 todo 视图,会显示所有的 todo
  • 每次看 TODO 时,最好刷新一次

  • 支持设置 todo 的检索范围

Local History

会周期性保存你的文件,方便后面找回对应代码

建议全局的 gitignore 中加上 .history/ ,否则每次 git commit 时,都要手动去除

常用的技巧有

  1. 选择下图中的 show all,找到对应文件,对应时间的版本,进行比较或者回退
  2. 选择下图中的创建条目,命名一个有意义的版本名

后面要使用的,选择要还原的条目

  1. 不需要时,选择全部删除

Markdown 补全

Markdown All in one

支持 Markdown 语法

Markdown Preview Mermaid Support

支持 Markdown mermaid 语法

Better Comments

让我们的注释变得更加的人性化,针对不同类型的注释,会有不同的样式

同时支持我们自定义注释类型,以及对应的样式

以下图为例,展示了插件自带的注释样式,*,!,?,TODO,都显示了不同的颜色

如果想自定义注释样式,可以 Command + ,打开配置,搜索 Better comments,进入 setting.json 中进行修改

Bookmarks

支持书签功能

Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code

支持 VsCode 使用中文

GitHub Repositories

GitHub 推出的一个软件

支持我们使用 Vscode 查看 github 中的代码,而不需要下载相关的 repository

Regex Previewer

对正则表达式的拓展

google-search

支持一键将选中文本使用谷歌进行搜索

Snippets 插件

multi-command

强化自定义快捷键的能力,如下代码 alt + x 被映射为往下三行

{
    "key": "alt+x",
    "command": "extension.multiCommand.execute",
    "args": { 
        "sequence": [
            "cursorDown",
            "cursorDown",
            "cursorDown"
        ]
    }
}

前端工具

Image Preview

当鼠标悬浮在图片链接时,会自动展示图片,适合前端开发使用

Color info

在 css 中,鼠标悬停在颜色 string 上时,会自带弹出颜色相关信息

Turbo Console Log

一键生成 console.log 日志

支持多语言、多光标操作,提供可定制的日志类型和输出格式,提高调试效率。

Path Intellisense

支持前端代码中自动拓展路径

Import Cost

当导入前端的依赖时,会自动估算该依赖的包大小

ESLint

其他有趣功能

Leetcode

帮助你偷偷的用 vsCode 刷 Leetcode

Waka Time

统计你使用 Vscode 的时间

在 IDEA 等等的编译器中都该插件,可以很方便的看你在每个编译器、每种语言、每个项目的使用时间

项目管理

Project Manager

使用

  • 保存项目

调出命令面板,选择 Project Manager:Save Project

并且设置项目的名字

  • 手动编辑项目£

调出命令面板,选择 Project Manager:Edit Project

会打开projects.json文件

这里会展示出我们所有保存的项目,可以设置路径,tag,名字等等

  • 切换项目

可以选择在当前窗口打开,也可以新建窗口打开

  • 标签过滤项目
  • 建议项目命名时有规律,因为在切换项目时,是按你的命名进行排序的,方便后面查找

Project Dashboard

可视化的管理项目