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 时,都要手动去除
常用的技巧有
- 选择下图中的 show all,找到对应文件,对应时间的版本,进行比较或者回退
- 选择下图中的创建条目,命名一个有意义的版本名
后面要使用的,选择要还原的条目
- 不需要时,选择全部删除
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
可视化的管理项目