vscode教程

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

通用设置推荐

settings.json 推荐通用设置配置如下(不包括插件配置):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
{
//修改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

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

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

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

Chinese (Simplified) (简体中文)

【中文语言包】这应该不用多介绍,是vscode的官方中文语言包

Prettier - Code formatter

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

配置方式:

在vscode全局设置配置文件settings.json中配置或者工作区设置配置文件.vscode/settings.json中配置(会覆盖全局设置):

1
2
3
4
5
6
7
8
9
10
11
12
{
// 使用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进行配置(会覆盖全局或工作区设置):

1
2
3
4
5
6
{
"singleQuote": true,
"printWidth": 120,
"trailingComma": "none",
"semi": false
}

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

Error Lens

【错误提示】可以将原先显示的问题显示在对应行右侧并高亮。效果如下:

Demo image

Live Server

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

Path Intellisense

【路径补全】在输入路径时,有智能提示补全。效果如下:

IDE

IntelliJ IDEA Keybindings

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

Partial Diff

【文件差异比对】比较两个文本文件之间的差异。

Image preview

【图像预览】可以预览引入的图像。效果如下:

Demonstrating svg image preview in a css file

Copy Path (Unix Style)

复制文件或目录unix风格的路径

GBK to UTF8 for vscode

【文件编码转化】可以将文件在GBK与UTF8编码之间无瑕转换

Doxygen Documentation Generator

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

file description

Alignment

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": "![${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插件

依赖插件:

如果提示插件需要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
2
3
4
5
6
{
// 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
  1. 保存项目

1537739081536

选save project,将会看到已经保存的各种项目。

1537739280372

2.切换项目

1537878360081

或者点击左下角即可在上方列出保存的项目,点击要切换的项目即可进入该项目里工作。

1537739128756

工作区管理插件

  • Workspace Explorer 提供了多vscode工作区下管理和切换等实用且方便的功能。

vscode本身就有提供工作区功能,目的是能够针对不同工作环境(比如Java、Golang、Vue等)设置不同的设置和插件启用,只需要操作 “文件”》“将工作区另存为” ,就能把当前项目保存为一个工作区,比如对于一个Java项目,就可以把其他用不到的插件“禁用(工作区)”掉,然后保存为java.code-workspace文件,之后如果需要开发java项目,就只需要用vscode打开这个文件作为工作区,然后把所有需要开发的java项目都加入进来,这样这些java项目就都能共享到这个工作区的设置和插件配置了。

工作区虽然好用,但是操作不太方便,这时可以使用 Workspace Explorer 插件来管理和切换不同的工作区,超实用的。

需要如下配置:

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

vscode常用技巧

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

vscode转到定义默认是直接在当前标签页直接打开并覆盖的(预览模式打开),这样的或就不好在多个文件间快速进行切换了,那么怎么解决这个问题呢?其实vscode自身就有这方面需求的解决方案。

vc

注意观察标签页上文字是否是斜体。可通过双击对应文件或者标签页进行预览模式和固定模式切换。

(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盘上有如下几个重要的目录:

  1. 插件扩展目录: %USERPROFILE%\.vscode

    其中%USERPROFILE%为:C:\Users\用户名。

    包含了所有用户相关的配置、插件和扩展等信息。例如,安装的插件、代码片段、键绑定等都保存在这个目录下。

  2. 应用程序数据目录: %USERPROFILE%\AppData\Roaming\Code

    包含了与应用程序本身相关的配置和数据。例如,最近打开的文件列表、自定义主题等都保存在这个目录下。

  3. 缓存目录:%USERPROFILE%\AppData\Local\Programs\Microsoft VS Code

    包含了应用程序使用的缓存文件。例如,语言服务器的缓存文件、扩展依赖项等都保存在这个目录下。

针对以上问题下面将提供两种解决方案。

定期清理方案

以上目录有些文件中“缓存目录”可以完全删除,而“应用程序数据目录”只能部分删除,为了方便,这里提供个清理脚本:

vscode缓存清理.bat

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
@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 ,然后依次输入如下命令:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#临时设置环境变量,用来表示需要迁移的新目录
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



----------- 本文结束 -----------




如果你觉得我的文章对你有帮助,你可以打赏我哦~
0%