vscode是很优秀的文本编辑器,甚至可以说是强大的ide开发工具,由于其良好的用户体验,丰富的扩展插件,让其受到很多开发者的青睐,这里就只介绍一些常用插件的安装和使用教程。
¶通用设置推荐
settings.json
推荐通用设置配置如下(不包括插件配置):
1 | { |
¶主题插件
推荐的三款主题插件:
¶图标插件
推荐的两款图标插件:
¶通用功能插件
¶Code Runner
【代码运行】允许在编辑器中直接运行代码片段或整个文件,并且支持多种编程语言。
安装完成插件可以做如下优化配置:
1 | // 在vscode的终端中运行和输出(默认在控制台输出) |
¶Chinese (Simplified) (简体中文)
【中文语言包】这应该不用多介绍,是vscode的官方中文语言包
¶Prettier - Code formatter
【前端代码格式化工具】支持超多语言(主要支持html、css、js、vue等前端语言),一键格式化,美化代码格式
配置方式:
在vscode全局设置配置文件settings.json
中配置或者工作区设置配置文件.vscode/settings.json
中配置(会覆盖全局设置):
1 | { |
或者在项目根目录中创建文件.prettierrc
进行配置(会覆盖全局或工作区设置):
1 | { |
"singleQuote": true
:启用单引号
"printWidth": 120
:限制每行字符数为 120
"trailingComma": "none"
:自动删除末尾逗号
"semi": false
:禁用分号
¶Error Lens
【错误提示】可以将原先显示的问题显示在对应行右侧并高亮。效果如下:
¶Live Server
【本地Web服务器】提供实时 Web 服务器和自动刷新功能,适用于简单网页本地快速部署和运行调试等。
¶Path Intellisense
【路径补全】在输入路径时,有智能提示补全。效果如下:
¶IntelliJ IDEA Keybindings
【IDEA快捷键】这是一个针对 VS Code 的 IntelliJ IDEA 快捷键移植。可以向使用IDEA快捷键一样使用vscode。
¶Partial Diff
【文件差异比对】比较两个文本文件之间的差异。
¶Image preview
【图像预览】可以预览引入的图像。效果如下:
¶Copy Path (Unix Style)
复制文件或目录unix风格的路径
¶GBK to UTF8 for vscode
【文件编码转化】可以将文件在GBK与UTF8编码之间无瑕转换
¶Doxygen Documentation Generator
【文档生成器】写注释和文档时非常好用。效果如下:
¶Markdown插件
可选插件:
-
Markdown Preview Enhanced:增强 vscode 中 Markdown 预览功能。包括更好的预览显示效果、增加侧边标题展示、支持
:emoji:
格式表情渲染等。 -
Markdown All in One:增强vscode中Markdown编写功能,如:自动补全、标题序号自动维护等。
-
Paste Image:将图像直接从剪贴板粘贴到 markdown 文件里。默认保存图片到当前 markdown 文件所在目录,如果希望保存到 markdown 文件所在目录的同名文件夹里,可如下配置:
1
2
3
4
5
6
7
8{
//图片粘贴保持路径
"pasteImage.path": "${currentFileDir}/${currentFileNameWithoutExt}",
//图片粘贴代码
//"pasteImage.insertPattern": "",
//图片粘贴时自定义路径
//"pasteImage.showFilePathConfirmInputBox": true
}可通过
Ctrl+Shift+P
打开命令面板输入Paste Image
来实现图片粘贴,也可以使用快捷键Ctrl+Alt+V
直接粘贴,但快捷键可能会和其他插件(如:IntelliJ IDEA Keybindings
)冲突,所以最好修改下快捷键,比如修改成Ctrl+Alt+V Ctrl+Alt+V
。
¶Git管理插件
可选插件:
-
GitLens:该插件提供了强大的 Git 工具集,可以方便地查看 Git 历史记录、比较修改并执行其他 Git 操作。
-
Git History:该插件提供了一个交互式的 Git 历史记录视图,可以方便地查看和比较不同版本之间的代码差异。
-
Git Graph:该插件提供了一个可视化的 Git 分支图形界面,可以方便地查看和管理 Git 分支及其历史记录。
-
Git Blame:该插件在编辑器中显示每行代码最近的修改者和修改时间,方便用户快速定位到相关版本。
-
Add to GIT Ignore 添加git忽略文件到
.gitignore
中
¶Java插件
依赖插件:
-
Extension Pack for Java JAVA插件扩展包,其含了以下多个插件。只需安装这一个下面的插件也就都跟着自动安装了。
Maven for Java 该插件提供了Maven项目的构建和依赖管理功能。
Debugger for Java 该插件提供了对Java应用程序的调试支持
Project Manager for Java 提供了方便的Java项目管理方式。该插件可以创建项目 、打开项目、切换项目等。
Test Runner for Java 该插件提供了JUnit测试运行器,用于在VS Code中运行和调试Java单元测试
Language Support for Java™ by Red Hat 该插件提供了语法高亮、代码补全和错误提示等功能。
如果提示插件需要java11,则在本地安装好jdk11,然后在settings.json
中添加如下代码
1 | "java.home": "D:\\Development\\Java\\jdk-11", |
¶Golang插件
依赖插件:
- Go 提供了智能感知、代码补全、调试器、测试框架支持、代码格式化、重构工具等功能
- Code Runner (可选)
Go 插件安装好后,只要打开一个.go文件,vscode就会提示下载go相关调试和开发的exe工具,国内因为墙的原因,经常失败。此时需要设置go 的代理,剩下重新打开vscode根据Go插件提示点击下载go依赖工具即可。
1 | go env -w GOPROXY=https://goproxy.cn,direct |
这些依赖工具会自动安装到%GOPATH%/bin
目录下。
¶C/C++插件
依赖插件:
-
[C/C++ Extension Pack](C/C++ Extension Pack) C/C++插件扩展包,其含了以下多个插件。只需安装这一个下面的插件也就都跟着自动安装了。
C/C++ 提供了 C/C++ 语言开发所需的 IntelliSense、调试、代码导航等功能。(如果仅仅是单文件开发,这一个插件就够了)
C/C++ Themes 提供了多种主题,包括暗色和亮色主题等
CMake 提供了 CMake 项目支持,包括代码补全、语法高亮和自动完成等功能。
CMake Tools 插件是针对 CMake 项目的工具集合,提供了自动完成、代码补全、语法高亮等常见功能,并且还支持调试、运行测试等高级功能,可以让用户更方便地创建、编译和调试 CMake 项目,提高开发效率和代码质量。
¶Python插件
依赖插件:
- Python 提供了代码编辑、语法高亮、自动完成等功能,支持多种 Python 版本。
- Pylance 提供了更好的 Python 代码智能感知和类型检查功能。
- Code Runner (可选)
安装好插件后默认自动可选加入如下vscode设置配置:
1 | { |
¶Vue插件
依赖插件:
- Vue Language Features (Volar) 提供了语法高亮、代码片段、自动完成、代码检查、调试和定义跳转等功能。Volar可取代以前的Vetur。
- Vue Peek (可选)提供模板跳转组件,查看定义等功能。
- vue-helper(可选)专为vue适配 Element-UI、VUX 和 IVIEW 提供更好的扩展(如提示补齐、模板跳转组件等)
- CSS Peek(可选)跳转到样式的外部定义(定位外部CSS)
- Auto Close Tag(可选)自动闭合HTML/XML标签
- Auto Rename Tag(可选)自动完成标签的同步修改
- EsLint(可选)编码规范以及代码检查
- JavaScript Booster(可选)js写法优化提示(写的不够好,或有其它写法,有灯泡提示)
¶远程开发插件
-
Remote - SSH:该插件提供了通过 SSH 连接远程机器的功能,使用户可以在本地的 VSCode 编辑器中对远程机器上的文件进行编辑、调试和测试等操作。其含了以下多个插件。
Remote - SSH: Editing Configuration Files:该插件为远程机器上的配置文件提供了语言支持和 IntelliSense 功能,包括常见的配置文件格式,如 JSON、YAML、XML 等。
Remote - SSH: Explorer:该插件提供了一个在本地浏览远程机器文件系统的资源管理器,使用户可以方便地查看和操作远程机器上的文件和目录。
¶项目管理插件
- Project Manager
- 保存项目
选save project,将会看到已经保存的各种项目。
2.切换项目
或者点击左下角即可在上方列出保存的项目,点击要切换的项目即可进入该项目里工作。
¶工作区管理插件
- Workspace Explorer 提供了多vscode工作区下管理和切换等实用且方便的功能。
vscode本身就有提供工作区功能,目的是能够针对不同工作环境(比如Java、Golang、Vue等)设置不同的设置和插件启用,只需要操作 “文件”》“将工作区另存为” ,就能把当前项目保存为一个工作区,比如对于一个Java项目,就可以把其他用不到的插件“禁用(工作区)”掉,然后保存为java.code-workspace
文件,之后如果需要开发java项目,就只需要用vscode打开这个文件作为工作区,然后把所有需要开发的java项目都加入进来,这样这些java项目就都能共享到这个工作区的设置和插件配置了。
工作区虽然好用,但是操作不太方便,这时可以使用 Workspace Explorer 插件来管理和切换不同的工作区,超实用的。
需要如下配置:
1 | { |
¶vscode常用技巧
¶转到定义文件在新标签页打开
vscode转到定义默认是直接在当前标签页直接打开并覆盖的(预览模式打开),这样的或就不好在多个文件间快速进行切换了,那么怎么解决这个问题呢?其实vscode自身就有这方面需求的解决方案。
注意观察标签页上文字是否是斜体。可通过双击对应文件或者标签页进行预览模式和固定模式切换。
(1)如果是斜体说明是预览模式打开文件。默认打开其他文件时此标签页上的文件会被其他文件覆盖
(2)如果不是斜体说明是固定模式打开文件,即固定该文件在此标签页上不被其他文件覆盖。
¶常用插件一览
名称 | 简述 |
---|---|
Auto Close Tag | 自动闭合HTML标签 |
Auto Import | import提示 |
Auto Rename Tag | 修改HTML标签时,自动修改匹配的标签 |
Better Align | 对齐赋值符号和注释 |
Better Comments | 编写更加人性化的注释 |
Code Runner | 运行选中代码段(支持多数语言) |
Code Spell checker | 单词拼写检查 |
Color Highlight | 颜色值在代码中高亮显示 |
Color Info | 小窗口显示颜色值,rgb,hsl,cmyk,hex等等 |
Color Picker | 拾色器 |
CSS-in-JS | CSS-in-JS高亮提示和转换 |
Debugger for Chrome | 调试Chrome |
Document This | 注释文档生成 |
DotENV | .env文件高亮 |
EditorConfig for VS Code | EditorConfig插件 |
Emoji | 在代码中输入emoji |
endy | 将输入光标跳转到当前行最后面 |
ESLint | ESLint插件,高亮提示 |
File Peek | 根据路径字符串,快速定位到文件 |
filesize | 状态栏显示当前文件大小 |
Find-Jump | 快速跳转到指定单词位置 |
Font-awesome codes for html | FontAwesome提示代码段 |
ftp-sync | 同步文件到ftp |
Git Blame | 在状态栏显示当前行的Git信息 |
Git History(git log) | 查看git log |
gitignore | .gitignore文件语法 |
GitLens | 显示文件最近的commit和作者,显示当前行commit信息 |
GraphQL for VSCode | graphql高亮和提示 |
Guides | 高亮缩进基准线 |
HTML CSS Class Completion | CSS class提示 |
HTML CSS Support | css提示(支持vue) |
HTMLHint | HTML格式提示 |
htmltagwrap | 快捷包裹html标签 |
htmltagwrap | 包裹HTML |
Import Beautify | import分组、排序、格式化 |
Import Cost | 行内显示导入(import/require)的包的大小 |
Indenticator | 缩进高亮 |
IntelliSense for css class names | css class输入提示 |
JavaScript (ES6) code snippets | ES6语法代码段 |
JS Refactor | 代码重构工具,提取函数、变量重命名等等 |
JSON to TS | JSON结构转化为typescript的interface |
jumpy | 快速跳转到指定单词位置 |
markdownlint | Markdown格式提示 |
Node modules resolve | 快速导航到Node模块 |
npm | 运行npm命令 |
npm Intellisense | 导入模块时,提示已安装模块名称 |
Path Autocomplete | 路径完成提示 |
Path Intellisense | 另一个路径完成提示 |
Polacode | 将代码生成图片 |
PostCss Sorting | css排序 |
Prettier - Code formatter | prettier官方插件 |
Prettify JSON | 格式化JSON |
Project Manager | 快速切换项目 |
vscode-icons | 文件图标,方便定位文件 |
VueHelper | Vue2代码段(包括Vue2 api、vue-router2、vuex2)ctrl+鼠标 可以定位函数等位置 |
¶解决vscode对C盘占用问题
随着使用的时间的增加和功能插件安装的增加,vscode在C盘上的缓存和插件等文件占用会越来越大。vscode在C盘上有如下几个重要的目录:
-
插件扩展目录:
%USERPROFILE%\.vscode
其中
%USERPROFILE%
为:C:\Users\用户名。包含了所有用户相关的配置、插件和扩展等信息。例如,安装的插件、代码片段、键绑定等都保存在这个目录下。
-
应用程序数据目录:
%USERPROFILE%\AppData\Roaming\Code
包含了与应用程序本身相关的配置和数据。例如,最近打开的文件列表、自定义主题等都保存在这个目录下。
-
缓存目录:
%USERPROFILE%\AppData\Local\Programs\Microsoft VS Code
包含了应用程序使用的缓存文件。例如,语言服务器的缓存文件、扩展依赖项等都保存在这个目录下。
针对以上问题下面将提供两种解决方案。
¶定期清理方案
以上目录有些文件中“缓存目录”可以完全删除,而“应用程序数据目录”只能部分删除,为了方便,这里提供个清理脚本:
vscode缓存清理.bat
1 | @REM example: |
定期双击运行一次,就能释放vscode占用的大部分空间
¶改存储目录方案
实现原理:先将vscode原本在C盘的三大目录移动(剪切)到其他盘的新目录上,并通过在C盘原位置上创建指向新的存储目录的软连接即可(软连接类似快捷键,但不是)。这样以后vscode即使要存储数据到C盘上,但是C盘上相关存储目录只是软连接,实际存储是在其他盘的目录上。
以管理员身份运行 CMD ,然后依次输入如下命令:
1 | #临时设置环境变量,用来表示需要迁移的新目录 |
参考:
https://blog.csdn.net/xbs150/article/details/126425882
https://blog.csdn.net/Tisfy/article/details/126082324