vscode教程

vscode是很优秀的文本编辑器，甚至可以说是强大的ide开发工具，由于其良好的用户体验，丰富的扩展插件，让其受到很多开发者的青睐，这里就只介绍一些常用插件的安装和使用教程。

¶通用设置推荐

settings.json 推荐通用设置配置如下（不包括插件配置）：

{
  //修改vscode的默认终端（PowerShell、Git Bash、Command Prompt）
  "terminal.integrated.defaultProfile.windows": "Git Bash",
  //编辑自动保存
  "files.autoSave": "afterDelay",
  //根据文件编码格式自动选择合适的编码方式打开文件
  "files.autoGuessEncoding": true,
  //在括号匹配时高亮显示相应的括号
  "editor.guides.bracketPairs": true,
  //保存自动格式化
  "editor.formatOnSave": true,
  //复制粘贴时自动格式化复制内容
  "editor.formatOnPaste": true,
  //在键入下一行后自动格式化该行
  "editor.formatOnType": true,
  //自动换行显示
  "editor.wordWrap": "on",
}

¶主题插件

推荐的三款主题插件：

¶图标插件

推荐的两款图标插件：

¶通用功能插件

¶Code Runner

【代码运行】允许在编辑器中直接运行代码片段或整个文件，并且支持多种编程语言。

安装完成插件可以做如下优化配置：

// 在vscode的终端中运行和输出（默认在控制台输出）
"code-runner.runInTerminal": true,
"code-runner.executorMap": {
    //修改java类型文件编译运行命令（编译使用utf8编码）
    "java": "javac -encoding utf8 $fileName && java -Dfile.encoding=UTF-8 $fileNameWithoutExt",
},

¶Prettier - Code formatter

【前端代码格式化工具】支持超多语言（主要支持html、css、js、vue等前端语言），一键格式化，美化代码格式

配置方式：

在vscode全局设置配置文件settings.json中配置或者工作区设置配置文件.vscode/settings.json中配置（会覆盖全局设置）：

{
  // 使用prettier插件格式化javascript文件
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // 使用prettier插件格式化html文件
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // prettier插件格式化换行行宽限制，超过则自动换行（只对前端的一些文件有效，如：html、css、js、vue等）
  "prettier.printWidth": 120,
}

或者在项目根目录中创建文件.prettierrc进行配置（会覆盖全局或工作区设置）：

{
  "singleQuote": true,
  "printWidth": 120,
  "trailingComma": "none",
  "semi": false
}

"singleQuote": true：启用单引号
"printWidth": 120：限制每行字符数为 120
"trailingComma": "none"：自动删除末尾逗号
"semi": false：禁用分号

¶Live Server

【本地Web服务器】提供实时 Web 服务器和自动刷新功能，适用于简单网页本地快速部署和运行调试等。

¶IntelliJ IDEA Keybindings

【IDEA快捷键】这是一个针对 VS Code 的 IntelliJ IDEA 快捷键移植。可以向使用IDEA快捷键一样使用vscode。

¶Doxygen Documentation Generator

【文档生成器】写注释和文档时非常好用。效果如下：

¶Markdown插件

可选插件：

Markdown Preview Enhanced：增强 vscode 中 Markdown 预览功能。包括更好的预览显示效果、增加侧边标题展示、支持:emoji:格式表情渲染等。
Markdown All in One：增强vscode中Markdown编写功能，如：自动补全、标题序号自动维护等。

Paste Image：将图像直接从剪贴板粘贴到 markdown 文件里。默认保存图片到当前 markdown 文件所在目录，如果希望保存到 markdown 文件所在目录的同名文件夹里，可如下配置：

{
  //图片粘贴保持路径
  "pasteImage.path": "${currentFileDir}/${currentFileNameWithoutExt}",
  //图片粘贴代码
  //"pasteImage.insertPattern": "![${imageFileNameWithoutExt}](${imageFilePath})",
  //图片粘贴时自定义路径
  //"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设置配置：

{
  // python插件格式化换行行宽限制，超过则自动换行（只对python有效）
  "python.formatting.autopep8Args": [
    "--max-line-length=200"
  ],
}

¶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 插件来管理和切换不同的工作区，超实用的。

需要如下配置：

{
  //【Workspace Explorer插件】vscode工作区存储目录
  "workspaceExplorer.workspaceStorageDirectory": "E:\\Code\\vscode-workspace"
}

¶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

@REM example:
@REM del "%userprofile%/AppData/Local/Microsoft/vscode-cpptools/ipch/" /s /q /f
@REM rd "%userprofile%/AppData/Local/Microsoft/vscode-cpptools/ipch/" /s /q
@REM md "%userprofile%/AppData/Local/Microsoft/vscode-cpptools/ipch/"

@echo off

call:EmptyOneDir "%userprofile%\AppData\Local\Microsoft\vscode-cpptools\ipch"
call:EmptyOneDir "%userprofile%\AppData\Roaming\Code\CachedExtensionVSIXs"
call:EmptyOneDir "%userprofile%\AppData\Roaming\Code\Cache"
call:EmptyOneDir "%userprofile%\AppData\Roaming\Code\CachedData"
call:EmptyOneDir "%userprofile%\AppData\Roaming\Code\CachedExtensions"
call:EmptyOneDir "%userprofile%\AppData\Roaming\Code\CachedExtensionVSIXs"
call:EmptyOneDir "%userprofile%\AppData\Roaming\Code\Code Cache"
call:EmptyOneDir "%userprofile%\AppData\Roaming\Code\Crashpad"
call:EmptyOneDir "%userprofile%\AppData\Roaming\Code\logs"
call:EmptyOneDir "%userprofile%\AppData\Roaming\Code\Service Worker\CacheStorage"
call:EmptyOneDir "%userprofile%\AppData\Roaming\Code\Service Worker\ScriptCache"
call:EmptyOneDir "%userprofile%\AppData\Roaming\Code\User\workspaceStorage"
call:EmptyOneDir "%userprofile%\AppData\Roaming\Code\User\History"

goto end

:EmptyOneDir  rem same as Let empty [path] /q
    echo empty %1
    echo del %1 /s /q /f
    del %1 /s /q /f
    echo rd %1 /s /q
    rd %1 /s /q
    echo md %1
    md %1
:end

定期双击运行一次，就能释放vscode占用的大部分空间

¶改存储目录方案

实现原理：先将vscode原本在C盘的三大目录移动（剪切）到其他盘的新目录上，并通过在C盘原位置上创建指向新的存储目录的软连接即可（软连接类似快捷键，但不是）。这样以后vscode即使要存储数据到C盘上，但是C盘上相关存储目录只是软连接，实际存储是在其他盘的目录上。

以管理员身份运行 CMD ，然后依次输入如下命令：

#临时设置环境变量，用来表示需要迁移的新目录
set new_vscode_dir=E:\Cache\SymlinkData

#创建新目录
mkdir "%new_vscode_dir%\.vscode"
mkdir "%new_vscode_dir%\AppData\Roaming\Code"
mkdir "%new_vscode_dir%\AppData\Local\Programs\Microsoft VS Code"
mkdir "%new_vscode_dir%\AppData\Local\Microsoft\vscode-cpptools"

#移动原目录到新目录，由于Windows11上move命令无法跨盘符移动，故改用xcopy+del实现
xcopy /s /e /h /y "%USERPROFILE%\.vscode" "%new_vscode_dir%\.vscode"
rd /s /q "%USERPROFILE%\.vscode"
xcopy /s /e /h /y "%USERPROFILE%\AppData\Roaming\Code" "%new_vscode_dir%\AppData\Roaming\Code"
rd /s /q "%USERPROFILE%\AppData\Roaming\Code"
xcopy /s /e /h /y "%USERPROFILE%\AppData\Local\Programs\Microsoft VS Code" "%new_vscode_dir%\AppData\Local\Programs\Microsoft VS Code"
rd /s /q "%USERPROFILE%\AppData\Local\Programs\Microsoft VS Code"
xcopy /s /e /h /y "%USERPROFILE%\AppData\Local\Microsoft\vscode-cpptools" "%new_vscode_dir%\AppData\Local\Microsoft\vscode-cpptools"
rd /s /q "%USERPROFILE%\AppData\Local\Microsoft\vscode-cpptools"

#创建软连接
mklink /D "%USERPROFILE%\.vscode" "%new_vscode_dir%\.vscode"
mklink /D "%USERPROFILE%\AppData\Roaming\Code" "%new_vscode_dir%\AppData\Roaming\Code"
mklink /D "%USERPROFILE%\AppData\Local\Programs\Microsoft VS Code" "%new_vscode_dir%\AppData\Local\Programs\Microsoft VS Code"
mklink /D "%USERPROFILE%\AppData\Local\Microsoft\vscode-cpptools" "%new_vscode_dir%\AppData\Local\Microsoft\vscode-cpptools"

参考：

https://blog.csdn.net/xbs150/article/details/126425882

https://blog.csdn.net/Tisfy/article/details/126082324

¶参考

https://blog.csdn.net/qq_51173321/article/details/126287293

Peace & Love ! Learning to think independently !

vscode教程

¶通用设置推荐

¶主题插件

¶图标插件

¶通用功能插件

¶Code Runner

¶Chinese (Simplified) (简体中文)

¶Prettier - Code formatter

¶Error Lens

¶Live Server

¶Path Intellisense

¶IntelliJ IDEA Keybindings

¶Partial Diff

¶Image preview

¶Copy Path (Unix Style)

¶GBK to UTF8 for vscode

¶Doxygen Documentation Generator

¶Markdown插件

¶Git管理插件

¶Java插件

¶Golang插件

¶C/C++插件

¶Python插件

¶Vue插件

¶远程开发插件

¶项目管理插件

¶工作区管理插件

¶vscode常用技巧

¶转到定义文件在新标签页打开

¶常用插件一览

¶解决vscode对C盘占用问题

¶定期清理方案

¶改存储目录方案

¶参考