VSCode 插件与配置指南：我的日常开发环境

VSCode 插件与配置指南：我的日常开发环境

这篇笔记记录了我在 VSCode 中安装的所有插件以及配置项，算是给自己留个备忘，也希望能帮到正在折腾开发环境的你。

我的插件清单

经过一段时间的筛选和淘汰，目前我的 VSCode 里稳定保留了一套高效的扩展组合。下面按用途分类介绍，每个插件我都会说说它是干嘛的、我平时怎么用，以下的配置项都配置在 vscode 中的全局 setting.json，这是完整的配置文件：

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
{
	"github.copilot.nextEditSuggestions.enabled": true,
	"workbench.colorTheme": "One Dark Pro",
	"workbench.iconTheme": "material-icon-theme",
	"editor.mouseWheelZoom": true,
	"editor.smoothScrolling": true,
	"editor.stickyScroll.enabled": true,
	"workbench.tree.enableStickyScroll": true,
	"terminal.integrated.mouseWheelZoom": true,
	"terminal.integrated.smoothScrolling": true,
	"files.autoSave": "onFocusChange",
	"editor.cursorBlinking": "smooth",
	"gitlens.ai.model": "vscode",
	"gitlens.ai.vscode.model": "copilot:gpt-4.1",
	"python.analysis.typeCheckingMode": "basic",
	"http.systemCertificatesNode": true,
	"geminicodeassist.project": "modern-phantasmata-3n78f",
	"claudeCode.preferredLocation": "panel",
	"editor.tabSize": 4,
	"editor.insertSpaces": false,
	"editor.detectIndentation": false,
	"editor.wordWrap": "on",
	"editor.formatOnSave": true,
	"editor.codeActionsOnSave": {
		"source.fixAll.eslint": "explicit",
		"source.organizeImports": "explicit"
	},
	"[javascript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[typescript]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[typescriptreact]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[javascriptreact]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[json]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[jsonc]": {
		"editor.defaultFormatter": "vscode.json-language-features"
	},
	"[html]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[css]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode"
	},
	"[python]": {
		"editor.defaultFormatter": "charliermarsh.ruff",
		"editor.codeActionsOnSave": {
			"source.fixAll": "explicit",
			"source.organizeImports": "explicit"
		}
	},
	"[markdown]": {
		"editor.defaultFormatter": "esbenp.prettier-vscode",
		"editor.wordWrap": "on"
	}
}

AI 编程助手

这几个插件是我写代码时的"外挂"，能省不少事。

GitHub Copilot + Copilot Chat

Copilot 应该不用多介绍了，写代码时它会根据上下文自动补全，有时候写个函数名它就能猜出整个实现。Chat 功能我用得也挺多，遇到报错直接选中代码问它，比自己翻文档快。

image-20260205113052655

我在设置里开启了 nextEditSuggestions，这样它会预测我下一步要改哪里，挺智能的：

1
"github.copilot.nextEditSuggestions.enabled": true

OpenAI ChatGPT

这个是 OpenAI 官方的插件，主要用来直接检索代码中的问题，审阅，平常 coding 我会使用 claude code 或 codex 的 cli 模式

Python 开发全家桶

我日常写 Python 比较多，所以这块插件装得最全。

Python + Pylance

image-20260205113425821

微软官方的 Python 支持，Pylance 提供类型检查和智能提示。我把类型检查设成了 basic 模式，既能发现明显的类型错误，又不会太严格烦人：

1
"python.analysis.typeCheckingMode": "basic"

Ruff

image-20260205135918467

这是一个 Rust 编写的极速 Python 代码分析与格式化工具。它一个插件就完美替代了之前的 Black（格式化）、isort（导入排序）甚至 Flake8。

最大的感受就是快，保存文件时瞬间完成格式化和整理，没有任何卡顿。配置里我已经让它接管了 Python 的默认格式化：

1
2
3
4
5
6
7
"[python]": {
    "editor.defaultFormatter": "charliermarsh.ruff",
    "editor.codeActionsOnSave": {
        "source.fixAll": "explicit",
        "source.organizeImports": "explicit"
    }
}

Python Indent

image-20260205113546937

这个小插件解决了一个痛点：在 Python 里换行时，光标自动对齐到正确的缩进位置。听起来简单，但没有它的时候真的很烦。

AutoDocstring

image-20260205113614383

写函数时输入三个引号 """，它会自动生成 docstring 模板，参数、返回值都帮你列好了，填空就行。

Python Type Hint

image-20260205113652316

写类型注解时会给提示，比如输入 : str 它会补全，省得自己敲。

Python Snippets（两个）

image-20260205113813437

装了 cstrap.python-snippets ，提供各种代码片段。比如输入 def 按 Tab 就能展开成完整的函数定义。

Python Environment Manager + Python Path

image-20260205114007434

image-20260205114609749

管理虚拟环境用的，可以在侧边栏看到所有的 venv，切换起来方便。

前端开发工具

我作为全栈开发师，前端的插件有很多，但一般开发情况下，这些插件够用了。

ESLint

image-20260205114713203

JavaScript/TypeScript 的代码检查，保存时自动修复问题：

1
2
3
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
}

Tailwind CSS + Tailwind Snippets

image-20260205114745549

image-20260205114805975

用 Tailwind 写样式时，这两个插件提供类名补全和预览。鼠标悬停在类名上能看到对应的 CSS 属性。

Pretty TypeScript Errors

写 TypeScript 或者用 Volar 时，报错信息经常是一大团红字。这个插件能把复杂的类型错误格式化成清晰的、带缩进的“人话”，排查类型问题轻松很多。

Import Cost

在项目里引入第三方包时，它会在 import 语句旁边直接显示这个包打包后的体积。这能让我对前端构建体积保持敏感。

Console Ninja

以前调试看 console.log 得切到浏览器，这个插件能把日志输出直接显示在 VSCode 的代码行旁边，调试 React 或 Vue 组件时查看数据流非常直观。

Vue + volar

image-20260205133547272

Vue 开发必备，提供一些Vue 是 Vue 3 官方推荐的，volar 是 vue3 的推荐版本，可能有的教程会推荐Vetur，不过Vetur 是为 vue2 服务的，我现在已经很少写 vue2 了，如果有需求的话两个一起用覆盖更全，有关于 volar 是什么可以参考以下的教程：
https://zhuanlan.zhihu.com/p/375096539

Auto Close Tag + Auto Rename Tag

写 HTML 时自动闭合标签，改开始标签时结束标签也跟着改。简单但实用。

Highlight Matching Tag

高亮显示配对的标签，嵌套多的时候一眼就能看出哪个和哪个是一对。

Live Server

一键启动本地服务器，改了 HTML 自动刷新浏览器。调试静态页面时很方便。

MDX

写 MDX 文件（Markdown + JSX）时用，主要是写文档或者博客时会用到。

Git 工具

GitLens

这个插件太强了，我主要用这几个功能：

  1. 每行代码旁边显示最后修改人和时间
  2. 文件历史对比
  3. 分支可视化

到目前为止他的 pro 试用还是有 bug，可以通过：https://github.com/chengazhen/gitlens-pro
项目直接激活永久的 pro 试用

我把它的 AI 功能也开了，用的是 Copilot 的模型：

1
2
"gitlens.ai.model": "vscode",
"gitlens.ai.vscode.model": "copilot:gpt-4.1"

编辑器增强

这些插件让编辑器用起来更舒服。

Material Icon Theme

给文件和文件夹换上了这套高颜值的图标主题，辨识度极高。components、hooks 等文件夹都有专门图标，找文件时扫一眼图标就能定位。

Error Lens

image-20260205133810247

把错误和警告直接显示在代码行末尾，不用把鼠标移上去才能看到。一眼就知道哪里有问题。

Indent Rainbow

image-20260205133938351

用不同颜色显示缩进层级，Python 这种靠缩进的语言特别有用，嵌套深了也不会看花眼。

Color Highlight

image-20260205134026340

代码里的颜色值（比如 #ff0000）会直接显示对应的颜色，写 CSS 时很直观。

Path Intellisense

image-20260205134053557

输入文件路径时自动补全，不用自己去翻目录结构。

Code Runner

image-20260205134104122

选中代码按快捷键就能运行，测试小段代码时比开终端方便。

Tree Generator

image-20260205134152057

image-20260205134126427

生成目录树结构，写文档时展示项目结构用的。

Even Better TOML

TOML 文件的语法高亮和格式化，写 pyproject.toml 或者 Rust 的 Cargo.toml 时用。

主题

One Dark Pro

我用的主题，从 Atom 编辑器移植过来的，深色背景看着舒服：

1
"workbench.colorTheme": "One Dark Pro"

容器

Docker

管理 Docker 容器和镜像，可以在侧边栏直接操作，不用敲命令。

我的配置文件

除了插件，VSCode 的设置也很重要。下面是我的 settings.json 里比较关键的配置。

编辑器基础设置与新特性

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
{
    // 鼠标滚轮缩放，按住 Ctrl 滚动可以放大缩小字体
    "editor.mouseWheelZoom": true,

    // 平滑滚动，滚动时有过渡动画
    "editor.smoothScrolling": true,

    // 开启粘性滚动：长文件的函数名会固定在顶部
    "editor.stickyScroll.enabled": true,
    "workbench.tree.enableStickyScroll": true,

    // 光标平滑闪烁
    "editor.cursorBlinking": "smooth",

    // Tab 宽度 4 个空格
    "editor.tabSize": 4,

    // 使用 Tab 而不是空格（个人习惯）
    "editor.insertSpaces": false,

    // 不自动检测缩进，统一用我的设置
    "editor.detectIndentation": false,

    // 自动换行
    "editor.wordWrap": "on",

    // 保存时自动格式化
    "editor.formatOnSave": true
}

我开启了 Sticky Scroll（粘性滚动），这个原生功能非常实用，浏览长代码时，当前的类或函数签名会吸附在编辑器顶部，再也不用往上翻找自己在哪了。

自动保存

1
2
3
4
{
    // 切换到其他窗口或标签页时自动保存
    "files.autoSave": "onFocusChange"
}

这个设置我很喜欢，写代码时经常切到浏览器或终端看效果，不用每次都手动 Ctrl+S。

终端设置

1
2
3
4
5
6
7
{
    // 终端也支持滚轮缩放
    "terminal.integrated.mouseWheelZoom": true,

    // 终端平滑滚动
    "terminal.integrated.smoothScrolling": true
}

各语言的格式化器

不同语言用不同的格式化工具：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    // ... 其他前端语言省略
    "[python]": {
        "editor.defaultFormatter": "charliermarsh.ruff",
        "editor.codeActionsOnSave": {
            "source.fixAll": "explicit",
            "source.organizeImports": "explicit"
        }
    },
    "[markdown]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.wordWrap": "on"
    }
}

前端相关的用 Prettier，Python 现在全面拥抱 Ruff，速度极快且功能全。

日常使用习惯

最后说说我平时怎么用这套配置。

写 Python 时：打开项目，Pylance 自动分析类型，写代码时 Copilot 补全，写完保存自动用 Ruff 瞬间完成格式化和 import 排序。遇到问题选中代码问 Copilot Chat。

写前端时：ESLint 实时检查，Pretty TypeScript Errors 帮我看懂复杂的类型报错。Tailwind 类名有补全，Live Server 自动刷新。调试时通过 Console Ninja 直接在编辑器看日志，不用频繁切浏览器。

看代码时：Sticky Scroll 让我清晰知道当前上下文，GitLens 显示历史，Material Icon Theme 让文件列表一目了然，Error Lens 更是让错误无处遁形。

调试时：Code Runner 快速运行代码片段，Docker 插件管理容器，不用切到终端。

这套配置用了挺久了，基本上能覆盖我的日常开发需求。后面如果有新发现再更新。