VSCode_Extensions_Note.md

aliases	tags	created	modified
	editor vscode vscodium vscode-extension list	2023-08-10 08:44:32 -0700	2024-09-02 21:01:45 -0700

VSCode 插件笔记

---

目录

• 常用插件
• 相关资料

---

常用插件

网上有很多资料博客介绍 VSCode 插件，而很多插件都是 VSCode 早期出现的，因为那时 VSCode 功能太弱，必须得靠插件去补充。但因为 VSCode 的发展，很多插件的功能都已经被 VSCode 内置了，所以现在其实不用装太多插件。

插件市场

• Open-VSX
• Marketplace

VSCode 或 VSCodium 新版本内置的功能已实现部分插件功能，所以网上部分插件推荐应该已经过时了。

使用命令操作插件

安装插件：

/opt/VSCode/bin/code --install-extension vscodevim.vim

本地化插件

VSCode 的语言包。

vscode-language-pack-zh-hans

---

Syncing（VSCode 同步配置插件）

Syncing 这是一个款同步 VSCode 配置的插件。

这个插件是使用到 Gist 来存放 VSCode 的配置文件。

使用这个插件，得先新建一个 gist 和 一个 token。

• 新建一个 gist

gist 具体操作

• 生成 token 生成一个 token，在生成 token 时，勾选 scopes 为 gist，如果不想麻烦，就把 token 的生命周期为 No Expiration。（token 具体操作）

• syncing 设置

ctrl+shift+p 唤出 Syncing 配置文件：

{
    "id": "", 
    "token": "", 
    "http_proxy": "",
    "auto_sync": false
}

id gist 的 id；token 刚新建的 token

设置完全 id 和 token，就能同步配置了。

---

Bookmarks

Bookmarks 是在代码某一行做标记的插件。

Bookmarks 快捷键：

快捷键	功能
Ctrl+Alt+K	创建或消除书签
Ctrl+Alt+J	跳转到前一个书签
Ctrl+Alt+L	跳转到后一个书签

---

Better Comments

Better Comments

有 6 种增强的注释样式：

---

Mintlify Doc Writer

Mintlify Doc Writer 是一个自动生成文档注释的插件。

这插件不能能生成英文文档注释，还能通过设置，生成中文文档注释，真的很香的插件。

---

Snippets Ranger

Snippets Ranger 这是一个 snippet 管理插件。

这个插件除了新建添加自己的 snippet 这个常规功能外，最最重要的是它能用一种更直观的方式查看当前 vscode/vscodium 中已经存在的哪些 snippet。

而且它将这些 snippet 分了两大类，一类是内置的，另一类是插件提供的，如下图：

点击各项还能查看具体 snippet 有哪些功能：

---

Git 相关插件

GitLens

GitLens 是 VSCode 重要的 Git 插件，增强了 VSCode 的 Git 的功能 --VSCode 自带的 git 功能非常基础。而这个插件能让 VSCode 显示每一行代码的作者以及提交时间。

Git History

Git History Git 历史插件。

此插件能查看提交历史。

Git Graph

Git-Graph Git 提交记录图形化插件。

---

主题和文件图标

VSCode 有很多漂亮的 Theme 和 icon，可以根据自己喜好添加。

Gruvbox

个人喜欢 Gruvbox 系列的。

gruvbox-material 这个 Theme 挺不错的，是融合 Gruvbox 和 Material 风格的主题。

Obsidian Dark

Obsidian-Dark 这个主题，个人觉得也挺不错的。

Rainglow

Rainglow 这是一个 theme 集合，包含了 300 多个语法本色和 主题。 喜欢没事换 theme 的人可以用下这个主题包。

如果想修改状态栏样式可以参考以下代码：

"workbench.colorCustomizations": {
    "statusBar.background": "#333",
    "statusBar.foreground": "#fff",
    "statusBar.noFolderBackground": "#333",
    "statusBar.noFolderForeground": "#fff"
}

Bearded Theme

Bearded Theme 主题有多种颜色可选。

---

图标

VSCode 除了能添加主题外，还能添加 Icon，这个图标一般应用在 SideBar 中文件或目录显示，也应用在打开的页面其标签的 title 中，还能应用在文件「面包屑导航」（Breadcrumbs）中。

Material-icon

个人喜欢 material-icon-theme 这个 icon 包。

Material Theme Icons — Free

Material Theme Icons — Free

Catppuccin icons

Catppuccin icons 这是配合 Catppuccin 主题 使用的图标套件。

Catppuccin Perfect icons

Catppuccin Perfect icons 是 Catppuccin icons 的衍生品。

VSCode icons

VSCode-icons

Monokai pro icons

Monokai pro icons 这是主题 +icon 的插件。

---

颜色增强

Rainbow CSV

Rainbow CSV 用于给 CSV 文件上色的插件。

---

模拟 vim 插件

VSCode 中可以通过安装 vim 插件来进行 vim 类似的操作。

模拟 vim 插件有很多，我个人使用的是以下这款 VSCodeVim 插件。

vim 插件功能

vim 插件除了「模拟」了 vim 的基本功能外，还「模拟」了部分 vim 常用插件的功能。主要有 easymotion、surround 和 Sneak 三个 vim 插件功能。

easymotion 与 sneak 功能类似，就是可以让使用者在页面「跳来跳去」，就像下图演示的那样，所以其他文本编辑器对于这个功能插件模仿者，除了叫 「**motion」外，就是叫「**jump」。

easymotion 更出名，因为就 easymotion 功能就大致说下常用的使用技巧。

默认情况下，easymotion 快揵键都是 <leader> 起头的，而默认 <leader> 是 \。而配合 vim 本身的 j、k、h、l 等就能实现行级、行内等方式跳转，这是对原生的 vim 移动的重要补充。

easymotion 常用功能列表：

功能	快捷键
行级向上跳转	<leader><leader> k
行级向下跳转	<leader><leader> j
行内向前	<leader><leader> h
行内向后	<leader><leader> l
按单词向后跳	<leader><leader> w
按单词向前跳	<leader><leader> b
搜索式跳	<leader><leader> s 输入要搜索的字符

vim 插件的问题

卡顿

在 Widndows 下的 VSCodium 下装了 vim 插件，在使用过程中出现卡顿的情况。

这其实不单是 vim 插件的问题，是 Windows 版本的 VSCodium 的问题，即使不用此插件，在保存文件时，Windows 版本的 VSCodium 也是存在卡顿的现象。

在 Windows 下，VSCode 却没有出现这种情况。同样的，在 Linux 下使用 VSCodium 也没有出现卡顿的情况。

可见在 Windows 下 VSCodium 可以暂时是「废」了，还是用「亲儿子」VSCode 吧。

vim 插件，使用时的卡顿，一般出现在编辑完文件，保存后，「Normal」模式与「Insert」模式切换的时候。估计这是由保存诱发的多原因造成的卡顿。

VSCode/VSCodium 默认开启了 occurrences Highlight 这个功能时候，这个功能是光标停在当前单词上，编辑器就会将本页面所有该单词全部高亮。这个功能没什么用，至少不应该做为常用选项开启，即便是不卡的 VSCode 及 Linux 版本的 VSCodium 下，开启此功能，会使页面一直「重绘」，发生「页面」跳动的现象，对于使用体验来讲也不是很好，再说这功能会诱使 Windows 下 VSCodium 原本卡顿的现象更为明显，所以建议最好关闭此功能。

另外，easymotion 这个功能也有可能造成 vim 插件卡，所以没办法只能关闭。

还有 GitLens 插件中的 Current Line 功能（就是在编辑区行行代码后显示 git 信息），同样可能引发 vim 插件卡顿，所以这也得关闭。

总而言之，只有是编辑区图形重绘功能的插件，都有可能引起 vim 插件卡。

---

Path Intellisense

Path Intellisense 是个自动识别文件路径的插件。

---

Project Manager

Project Manager 项目管理插件。

---

Indent Rainbow

Indent Rainbow 彩色缩进线。

light 模式，缩进不是默认 块式（上图右），而是线的（上图左）。

"indentRainbow.indicatorStyle": "light",
  // we use a simple 1 pixel wide line
  "indentRainbow.lightIndicatorStyleLineWidth": 1,
  // the same colors as above but more visible
  "indentRainbow.colors": [
    "rgba(255,255,64,0.3)",
    "rgba(127,255,127,0.3)",
    "rgba(255,127,255,0.3)",
    "rgba(79,236,236,0.3)"
  ],

---

SVG 插件

SVG 插件，有自动完成 SVG 代码、能预览 SVG 图片、快速取色等功能。

---

Markdown 插件

markdown 插件有很多，而 VSCode、VSCodiume 本身内置了 markdown 基础功能。

所以需要自行安装的插件就基于几种功能：表格辅助、预览等。

以下两个插件就可以满足了 Markdown 大部分功能需求了。

markdown-all-in-one

Markdown-All-in-One 是一个强大的 Markdown 插件。 编写 Markdown 该有的功能都有了！

Markdown Preview Enhanced

Markdown Preview Enhanced 是一个 Markdown 预览插件。

常用操作：

• ctrl+k v：在侧边显示预览
• ctrl+shift-v：预览

  [!tip]

  侧边预览的快捷键与 vim 插件冲突

[!bug] 预览插件存在的问题

这个预览插件，对于「锚点」跳转存在一定的问题，主是问题发生在中英混排标题时，特别是存在空格及英文大写字母情况下，问题详解请参考 关于锚点。

---

笔记插件

Foam

Foam 是一个支持双向链接的笔记插件。

Foam 常用功能及命令

• Foam: Show Graph：打开知识图谱页面

---

Python 开发环境

VSCodium 原装只内置了 Python Language Basics，这个内置插件只有语法高亮等基础功能。想要更强的功能推荐装 Python 这个插件。

装此插件时，同时装了三个插件：

• jupyter
• jupyter-keymap
• jupyter-renderers

VSCode-Python

VSCode-Python 是 Python 主要插件。

Python Debugger

Python Debugger Python Debug 插件。

Python Environment Manager

Python Environment Manager 是 Python环境 管理插件。

Ruff for VSCode

Ruff for Vscode 是 ruff 在 VSCode 上的插件。

---

Java 开发环境

RedHat-Java

RedHat-Java 这是 RedHat 出的 Java 的插件。这是在 oracle-java插件 出来之前，最好的 vscode 上最主要并具备「官方」背景的 Java 插件。

这个插件是 VSCode 中众多 Java 插件的「基础」插件。

简单配置：

"java.configuration.runtimes": [
	{
		"name": "JavaSE-17",
		"path": "/home/silascript/.sdkman/candidates/java/17.0.12-tem",
	},
	{
		"name": "JavaSE-21",
		"path": "/home/silascript/.sdkman/candidates/java/current",
		"default": true
	},
],

"java.jdt.ls.java.home": "/home/silascript/.sdkman/candidates/java/current"

Runtime 名称列表：runtime name

Oracle-Java

Oracle-Java 是 Oracle 官方出的 Java 插件。

[!info]

Oracle 这个插件出得太晚，VSCode 上 Java 相关插件，大部分都是 RedHat-Java 生态圈的。

配置 JDK：

// Oracle Java 插件
"jdk.jdkhome": "/home/silascript/.sdkman/candidates/java/current",

Project Manager for Java

Project Manager for Java 微软出的 Java 项目管理插件。

此插件需要依赖 RedHat-Java 插件。

Maven for Java

Maven for Java 是 微软开发的 Maven 插件。

Debugger for Java

Debugger for Java 是一个 微软开发的 Java 运行及 debug 插件。

装了这插件后，在代码页面，可执行方法（如 main 方法）上会显示 Run|Debug 字样，可以快捷运行或 Debug 方法。

Tip

在右上角上也会显示运行及调试 Java 的「三角形」标志。

Important

这个插件依赖 RedHat-Java 插件。

Java Test Runner

Java Test Runner 是 Java 测试插件，同样也是微软的作品。

Important

这个插件依赖 RedHat-Java 及 Debugger for Java 两个插件

Code Generator For Java

Code Generator For Java 是一个生成 Java 代码的插件。

此插件功能：

• Generator GUI
• Generate Setters & Getters
• Generate toString()
• Generate Constructor
• Generate Constructor Using Fields
• Generate Equals And HashCode
• Generate Fluent Setters
• Generate Logger Debug
• Generate SerialVersionUID

Spring Boot Extension Pack

Spring Boot Extension Pack 这是一个插件集合包，它包括了：

• Spring Initializr java
• Spring Boot Dashboard
• Spring Boot Tools

Spring Boot Tools

Spring Boot Tools 是一个 SpringBoot语言服务器（LSP）插件。

Important

这个插件是基于 RedHat-Java 插件的。

Spring Initializr java

Spring Initializr java 是一个轻量级用于生成 SpringBoot 项目的插件。

功能：

• Generate a Maven/Gradle Spring Boot project
• Customize configurations for a new project (language, Java version, group id, artifact id, boot version and dependencies)
• Search for dependencies
• Quickstart with last settings
• Edit Spring Boot dependencies of an existing Maven Spring Boot project

Spring Boot Dashboard

Spring Boot Dashboard 是 SpringBoot 的插件。

功能：

• View Spring Boot apps in workspace
• Start / Stop a Spring Boot app
• Debug a Spring Boot app
• Open a Spring Boot app in browser
• List beans/endpoint mappings
• View bean dependencies

Important

Spring Boot Dashboard 依赖 Debugger for Java 及 Spring Boot Tools 插件。

Gradle for java

Gradle for java 同样是微软出的 Gradle 插件。

这个插件兼容 RedHat-Java 插件。

XML Language Support by Red Hat

XML Language Support by Red Hat Redhat 出的 XML 插件，新版本不再需要依赖 Java 了。

MybatisX

MybatisX

---

C、C++ 开发环境

操作系统得先安装 LLVM、Clang 等工具。

Arch 系：

sudo pacman -S llvm clang lld lldb libc++

[!info]

其他 Linux 系统可使用自已的包管理器安装 llvm、clang、lld、lldb 及 libc++ 程序及组件。

装完那些程序后，检测下是不是安装成功：

• 检测 LLVM

llvm-dis --version

• 检测 lld

lld --version

• 检测 lldb

lldb --version

• 检测 clang

clang --version

• 检测 clang++

clang++ --version

• 检测 clangd

clangd --version

VSCode C/C++ 相关插件

Clangd

clangd 如果要使用 Clang 来作语言服务，这个插件是必装的。

Code Runner

code runner 这个是代码运行插件，能跑 C、C++、Java、Python 等众多语言。

CMake

CMake CMake 插件。

---

Go 开发环境

Go for Visual Studio Code 这是 Golang 官方 出品的插件。

Rust 开发环境

rust-analyzer

rust-analyzer 是 VSCode 上 Rust 的语言服务插件，也是 Rust 插件的核心。

Even Better TOML

Even Better TOML 是一个 Toml 的插件。

Crates

Crates 是 Rust 依赖管理插件。

Important

这插件从 2024 年 6 月就停止更新了，官方建议使用 Dependi 来代替。

---

PHP 开发环境

PHP Intelephense

PHP Intelephense PHP 的代码插件。

配置

最重要的就是配置 php.validate.executablePath 这个属性，这是指定 PHP 的可执行文件路径，要给出「绝对路径」。

PHP Debug

PHP Debug 是 PHP 的 Debug 插件，PHP 得开启 xdebug 功能。

---

数据库插件

SQLTools

SQLTools 是一个通用数据库插件。

这插件支持 MySQL、SQLServer、PostgreSQL、SQLite 等多种数据库。

安装使用

安装其实就是安装对应的数据库驱动，比如要想在 VSCode 中管理 MySQL 数据库，那么我们就选择安装对应的插件即可：SQLTools Driver MySQL 。

安装完插件后，点击在 VSCode 的侧边栏上「SQLTools」图标，出现的面板中，有一个「CONNECTIONS」栏，新建一个链接，链接类型，如果是 MySQL 就选择 MySQL，如果是 MariaDB 就选 MariaDB，然后在出现的「Settings」面板中，输入数据库地址、账号名及密码，测试能不能连上，如果能就保存这个 Connection，就完成了全部安装。

---

前端插件

VSCode 最初出来的时候，主要是用在前端开发的，所以 VSCode 积累了大量的前端开发的插件。

而这些前端插件主要是围绕着 Html、CSS、Javascript 及各种前端框架的补全、检测、调试、格式化等功能而设的。

VSCode 已经内置了大名鼎鼎的 Emmet （Emmet Wiki），有了这货，很多前端插件都可以省了。

CSS

CSS Peek

CSS Peek 是一个帮助前端开发者，在 HTML 和 JavaScript 文件快速导航和编辑外部样式表中定义的 CSS样式 定义的插件。

HTML CSS Support

HTML CSS Support 是一个 CSS 的辅助插件，它能让开发者在 HTML 标签中 id 或 class 属性设置时，快速选择已在 CSS 样式文件中定义好的相关样式。

"css.enabledLanguages": [
	"html"
]

LiveServer

LiveServer 是让 VSCode 开启一个静态服务器，用于测试前端页面。

此插件在状态栏显示状态：

Vetur

Vetur Vue.js官方 出品的是 VSCode 的 Vue 插件。

这插件包含两个组件：

• Vue LSP VSCode 中的 只是 VLS 的 client，要想使用 语言服务，得安装 Vue LSP。

npm install vls -g

Tip

Vue LSP 但能在 VSCode 使用，也能让其他编辑器使用，如 vim 等。
关于 LSP

• vti Terminal 接口

Open In Default Browser

Open In Default Browser 是一个使用默认 浏览器 打开页面的插件。

---

错误检测

ErrorLens

ErrorLens 是一个实时检测语法错误的小插件。

---

格式化

Prettier

Prettier 是一个格式化器。

在 VSCode 也有着相应的插件：prettier-vscode 。

装完这插件后，默认情况使用这插件格式化时，如果项目中没有相应的配置文件，会搜寻用户目录下的 全局配置 文件，即 .prettierrc 或 .prettier.json。

Tip

.prettierrc 及 .prettier.json 的名字必须是 prettier 打头的，不然 VSCode 认不出这全局配置，就只能用 VSCode Prettier插件 的配置。

VSCode 默认使用的是 .prettierrc，如果使用 .prettier.jsonVSCode 默认会使用本身设定。

VSCode Prettier 插件设置：

// 设置prettier的配置文件路径
"prettier.configPath":""

// 配置哪些文件使用 prettier 插件进行格式化
"[html]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},

"[jsonc]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
},

"[css]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
}

---

杂项

Code-Spell-Checker

Code-Spell-Checker 是一个拼写检查插件。

简单配置：

"cSpell.diagnosticLevel": "Hint",
"cSpell.ignorePaths": [
	"package-lock.json",
	"node_modules",
	"vscode-extension",
	".git/objects",
	".vscode",
	".vscode-insiders",
	"**/settings.json"
]

分号补全

Smart Semicolon

Smart Semicolon 是一个添加分号 ; 的小插件。

Smarter Semicolon

Smarter Semicolon 同样也是一个补分号的插件，不过更新一点。

Tip

这个插件同样不支持 PHP！

Auto Semicolon

Auto Semicolon 同样也是一个分号补全插件。

这是最新的分号补全插件，最近还更新。最重要的是这插件支持的语言比之前都要多。

Tip

这插件支持 PHP  JavaScript, TypeScript,C/ CPP, Java, perl, dart, swift,  Python, Go, Bash, scala, kotlin, r 等语言。

甚至能在配置中添加语言，只要在 autoSemicolon.supportedLanguageId.autoInsertSemicolon 属性中，将要支持的编程语言添加进属性值中，语言间使用 , 隔开。

示例如下：

"autoSemicolon.supportedLanguageId.autoInsertSemicolon": "javascript,typescript,php,perl,c,objective-c,cpp,objective-cpp,csharp,dart,java,swift,ruby,rust"

使用

1. 在光标非字符串位置，按 ；，会在最后添加分号。
2. 光标处在字符串中，按二次 Alt+; 光标会跳到结尾处，这样就可以输入 ; 了。

Dependi

Dependi 是新一代的依赖管理插件。它支持 Rust、Go、Python、NodeJS 及 PHP 多种语言。

---

相关资料

• VSCode 资料清单

---

其他相关笔记

• VSCode 笔记
• VSCode 资料清单
• VSCode 视频清单
• 文本编辑器笔记
• Prettier 笔记