--- theme: healer-readable highlight: a11y-dark ---

# 什么是VSCode？ >`VSCode`(全称：Visual Studio Code)是一款由微软开发且跨平台的免费源代码编辑器。该软件支持语法高亮、代码自动补全、代码重构、查看定义功能，并且内置了命令行工具和`Git`版本控制系统。用户可以更改主题和键盘快捷方式实现个性化设置，也可以通过内置的扩展程序商店安装扩展以拓展软件功能。 > >`VSCode`默认支持非常多的编程语言，包括`JavaScript`、`TypeScript`、`CSS `和`HTML`；也可以通过下载扩展支持`Python`、`C/C++`、`Java` 和`Go`在内的其他语言。`VSCode`也支持调试 `Node.js` 程序。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87cf1a9ae0104d3ebfff6f2712334678~tplv-k3u1fbpfcp-zoom-1.image) >`VSCode`支持同时打开多个目录，并将信息保存在工作区中以便复用。作为跨平台的编辑器，`VSCode`允许用户更改文件的代码页、换行符和编程语言。 # VSCode的下载安装 1. **Windows**。打开[VSCode官网](https://code.visualstudio.com/download)直接下载即可。 2. **Linux**。Linux平台下安装VSCode速度很慢，可以用以下方法： > - 通过[国内源](https://vscode.cdn.azure.cn/stable/507ce72a4466fbb27b715c3722558bb15afa9f48/code-stable-x64-1623937300.tar.gz)下载VSCode > - 将压缩包解压并移动到`usr/local`目录：`sudo mv VSCode-linux-x64 /usr/local/` >- 获取运行权限：`sudo chmod +x /usr/local/VSCode-linux-x64/code` >- 安装VSCode(==注意此处只能用普通用户权限==): `/usr/local/VSCode-linux-x64/code` >- 创建软链接: `sudo ln -s /usr/local/VSCode-linux-x64/code /usr/local/bin/vscode`, 之后在任意位置可通过终端输入`vscode`启动软件 # VSCode插件集合 ## 美观类 ### 1 CodeSnap >`CodeSnap`可以轻松生成高分辨率，精美的代码图片 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4310e88225694c4287047e2d3346f221~tplv-k3u1fbpfcp-zoom-1.image) 使用方式很简单： 1. 使用命令将 Codesnap 调出 2. 复制要作为输出的一部分的代码 3. 保存图像到本地 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ed8f40f3ec8945bea31136fb97d2976b~tplv-k3u1fbpfcp-zoom-1.image) ### 2 :emojisense: >`:emojisense:`可以为MarkDown文档或命令行输出表情，让编程更有趣 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/211ef0b8110c405491155cfca828acc4~tplv-k3u1fbpfcp-zoom-1.image) 直接复制[Emoji大全](https://www.webfx.com/tools/emoji-cheat-sheet/#tabs-3)里喜欢的标签即可，例如下面我给数据集训练过程的命令行增加了表情。 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0de876fd4cdc486daa497048cda23553~tplv-k3u1fbpfcp-zoom-1.image) ### 3 Marquee >`Marquee`可以将编程主屏幕改造得更实用或更美观。有了这个扩展，你可以看新闻报道，天气！此外，Marquee 支持用户将项目添加到个人待办事项列表中，以及一些快速笔记的暂存板。一些小但有用的插件功能。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0b0c16805acd4953977a5c171d7ecde8~tplv-k3u1fbpfcp-zoom-1.image) ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1b04419230fc4e9cac7c345aa8fdb0a9~tplv-k3u1fbpfcp-zoom-1.image) ### 4 Material Theme >`Material Theme`为 VScode 安装不同的主题，允许你根据自己的喜好自定义整个编辑器的外观。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9b9660f74a2340ffa16d1b61c24db47f~tplv-k3u1fbpfcp-zoom-1.image) 下面是我个人使用的`FireFly Pro`主题。 ![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e4374b1522544445b81ca315ef5eee32~tplv-k3u1fbpfcp-zoom-1.image) ### 5 Bookmarks >`Bookmarks`允许你在工作区中针对不同文件的特定行向代码添加书签。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a42b0fa15f194279addea3cfc1f59330~tplv-k3u1fbpfcp-zoom-1.image) ### 6 Bracket Pair Colorizer >`Bracket Pair Colorizer`给括号加上不同的颜色，便于区分不同的区块。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1080d8a3b4a6407c8f77804e8a293446~tplv-k3u1fbpfcp-zoom-1.image) ### 7 vscode-icons >`vscode-icons`给VSCode文件更换更好看的图标。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ef7a180088fb4e8ebf3034b7e35719a5~tplv-k3u1fbpfcp-zoom-1.image) ## 编程类(前端) ### 1 Vetur >`Vetur`为Vue项目提供语法高亮、智能感知等。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/708502871ff34f2c8cbd69277b5358fc~tplv-k3u1fbpfcp-zoom-1.image) ### 2 Auto Close Tag >`Auto Close Tag`自动闭合HTML/XML标签。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a228ef131c914d969222207b99dc77a5~tplv-k3u1fbpfcp-zoom-1.image) ### 3 Auto Rename Tag >`Auto Rename Tag`自动重命名HTML/XML标签。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/47d694af32ce4b7c9a9efd08ed3c181d~tplv-k3u1fbpfcp-zoom-1.image) ### 4 formate: CSS/LESS/SCSS formatter >`formate: CSS/LESS/SCSS formatter`格式化CSS/LESS/SCSS以增强可读性。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6ebc1b77708a481cabf2fb899a6fb47d~tplv-k3u1fbpfcp-zoom-1.image) ### 5 Live Server >`Live Server`为静态和动态页面启动具有实时重新加载功能的开发本地服务器。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9f6ffe229b444c689e239fb3fc715b90~tplv-k3u1fbpfcp-zoom-1.image) ### 6 Debugger for Chrome >`Debugger for Chrome`将JS代码的调试嵌入Chrome浏览器。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/408007e292804570861effda43c112ea~tplv-k3u1fbpfcp-zoom-1.image) ## 编程类(C/C++) ### 1 C/C++ >`C/C++`为VSCode添加了对C/C++的语言支持，包括 IntelliSense 和Debugging等功能。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/da694e91865847a3b0c3f42e21fa68a0~tplv-k3u1fbpfcp-zoom-1.image) ### 2 C++ Intellisense >`C++ Intellisense`为VSCode添加了对C/C++的智能感知。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/daaadbeabffa4eccbb890e2700613e72~tplv-k3u1fbpfcp-zoom-1.image) ### 3 CMake Tools >`CMake Tools`为VSCode添加了对CMake的支持与感知。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/da05e8d50b074747ba85046446ad8f6b~tplv-k3u1fbpfcp-zoom-1.image) ## 🍉 编程类(Python) ### 1 Python >`Python`为VSCode添加了对Python的语言支持，包括 IntelliSense 和Debugging等功能。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a39d8bf1add04396a18e313d9c03292d~tplv-k3u1fbpfcp-zoom-1.image) ### 2 Jupyter >`Jupyter`为VSCode添加了对Jupyter Notebook的功能支持。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9f8ea9a333514b6b9696193034f377d4~tplv-k3u1fbpfcp-zoom-1.image) ## 效率类 ### 1 Git Graph >`Git Graph`可视化你的Git提交流程。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3fde4f9f1e8d4deb8eb3932fcd718459~tplv-k3u1fbpfcp-zoom-1.image) ### 2 koroFileHeader >`koroFileHeader`用于格式化生成文件头部注释和函数注释。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2461bce5990a42a0ac721f605d15f666~tplv-k3u1fbpfcp-zoom-1.image) ### 3 Code Runner >`Code Runner`用于直接运行多种语言的代码片段或文件。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2af782e5f2d6436081f14bd25c5184f8~tplv-k3u1fbpfcp-zoom-1.image) ### 4 Better Comments >`Better Comments`为代码注释提供各种特定类型注释的高亮。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a092ecd4adca408691327d3c9cf463a3~tplv-k3u1fbpfcp-zoom-1.image) ### 5 CodeTime >`CodeTime`提供你每天敲代码时间的数据分析。 >
![在这里插入图片描述](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/53203402c9f0491e87e6f4e7ff322850~tplv-k3u1fbpfcp-zoom-1.image)

**更多优质内容和配套代码欢迎来我的AI频道“AI技术社”**