VSCode

Visual Studio Code —— 微软推出的免费开源的代码编辑器

官网：https://code.visualstudio.com/

发展历史

时间	里程碑
2015 年 4 月	微软在 Build 大会上宣布 VSCode 项目
2015 年 11 月	在 GitHub 上开源（MIT 协议）
2016 年 4 月	发布 1.0 正式版
2017 年 8 月	引入内置终端
2018 年 7 月	新增 Settings Sync（设置同步）
2019 年 5 月	推出 Remote Development 远程开发插件
2020 年 11 月	内置 GitHub Pull Request 集成
2021 年 10 月	支持 Virtual Workspaces
2022 年	内置 Git 图形化界面增强
2023 年	全新 Profile 功能，支持配置预设
2024 年	内置 AI 功能 GitHub Copilot 深度集成

VSCode 目前是全球最流行的代码编辑器之一，根据 Stack Overflow 调查，超过 70% 的开发者将其作为首选编辑器。

开发团队

VSCode 由微软开发维护，核心团队位于瑞士苏黎世、美国雷德蒙德等地。

Erich Gamma — VSCode 联合创始人，之前是 Eclipse JDT 和 Jazz 项目的核心开发者
Kai Maetzel — VSCode 联合创始人
团队还包括来自 Eclipse、Mono、TypeScript 等项目的众多资深开发者

VSCode 使用 TypeScript + Electron 框架构建，前端基于 Monaco Editor（也是 VS 的编辑器引擎）。

下载

官网下载：https://code.visualstudio.com/Download

版本选择

版本	说明
User Installer	安装到用户目录，不需要管理员权限，推荐普通用户
System Installer	安装到 Program Files，需要管理员权限，所有用户可用
.zip / .tar.gz	绿色便携版，解压即用
Insiders Edition	每日构建版，尝鲜新功能，但可能不稳定

安装

Windows

双击下载的 .exe 安装包
勾选以下选项（推荐）：
- 创建桌面快捷方式
- 添加到 PATH（可在命令行直接输入 code 打开）
- 添加到右键菜单（在文件夹上右键打开 VSCode）
- 将受支持的文件类型关联到 VSCode

macOS

打开下载的 .zip 文件
将 Visual Studio Code.app 拖入 Applications 文件夹
打开 VSCode，按 Cmd + Shift + P 输入 shell command，选择 Install 'code' command in PATH

Linux

bash

# Ubuntu/Debian 直接安装 .deb 包
sudo dpkg -i code_xxx_amd64.deb

# 或通过 apt 仓库安装
wget -qO- https://packages.microsoft.com/keys/microsoft.asc | gpg --dearmor > packages.microsoft.gpg
sudo install -o root -g root -m 644 packages.microsoft.gpg /etc/apt/trusted.gpg.d/
sudo sh -c 'echo "deb [arch=amd64] https://packages.microsoft.com/repos/code stable main" > /etc/apt/sources.list.d/vscode.list'
sudo apt update && sudo apt install code

初始化配置

界面介绍

VSCode 界面布局：

┌────────────────────────────────────────┐
│  活动栏  │  侧边栏  │    编辑器区       │
│  ┌─────┐ │ ┌──────┐ │ ┌──────────────┐│
│  │ 文件  │ │ │      │ │ │              ││
│  │ 搜索  │ │ │文件  │ │ │   代码编辑    ││
│  │ 源码  │ │ │浏览  │ │ │              ││
│  │ 调试  │ │ │      │ │ │              ││
│  │ 扩展  │ │ └──────┘ │ └──────────────┘│
│  └─────┘ │           │                 │
│          └───────────┴─────────────────┘

活动栏（Activity Bar）：切换侧边栏的不同面板
侧边栏（Side Bar）：文件浏览、搜索、源码管理等
编辑器区（Editor）：代码编辑主区域
状态栏（Status Bar）：显示行号、编码、Git 分支等信息

常用设置

File → Preferences → Settings（或 Ctrl + ,）

json

{
  // 编辑器
  "editor.fontSize": 14,
  "editor.fontFamily": "'Cascadia Code', 'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.minimap.enabled": true,
  "editor.renderWhitespace": "boundary",
  "editor.bracketPairColorization.enabled": true,
  "editor.smoothScrolling": true,
  "editor.cursorBlinking": "smooth",
  "editor.formatOnSave": true,

  // 终端
  "terminal.integrated.defaultProfile.windows": "Command Prompt",
  "terminal.integrated.fontSize": 13,

  // 文件
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.encoding": "utf8",
  "files.eol": "\n",

  // 工作台
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.startupEditor": "none",
  "window.titleBarStyle": "custom"
}

同步设置

Settings → Turn on Settings Sync...

可同步：设置、快捷键、插件列表、用户代码片段、UI 状态等。

插件	说明
ESLint	JavaScript/TypeScript 代码检查
Prettier	代码格式化
Auto Close Tag	HTML/XML 标签自动闭合
Auto Rename Tag	HTML/XML 标签成对重命名
Path Intellisense	路径智能补全
npm Intellisense	npm 模块导入自动补全
Live Server	启动本地开发服务器，实时刷新页面
Tailwind CSS IntelliSense	Tailwind CSS 类名补全
Vue Language Features (Volar)	Vue 3 语言支持

插件	说明
Extension Pack for Java	Java 开发全家桶（包含以下多个插件）
Language Support for Java	Java 语言支持
Debugger for Java	Java 调试器
Maven for Java	Maven 构建支持
Spring Boot Extension Pack	Spring Boot 开发支持
MyBatisX	MyBatis XML 与 Mapper 跳转
Lombok Annotations Support	Lombok 支持

插件	说明
Python	Python 语言支持（微软官方）
Pylance	Python 语言服务器
Jupyter	Jupyter Notebook 支持

插件	说明
GitLens	Git 历史、Blame 注释增强
Git History	Git 历史可视化
Git Graph	Git 分支图
Thunder Client	轻量级 API 测试（类似 Postman）
REST Client	在编辑器中发送 HTTP 请求
Markdown Preview Enhanced	Markdown 预览增强
Todo Tree	代码中 TODO 标注管理
Code Runner	一键运行代码片段
Error Lens	错误信息内联显示
Bracket Pair Colorizer	括号颜色配对（已内置到 VSCode）

插件	说明
One Dark Pro	Atom 经典暗色主题
Material Icon Theme	文件图标主题
Material Theme	Material Design 风格主题
Dracula Official	吸血鬼主题
Catppuccin	柔和配色主题
Community Material Theme	Material 主题社区版

插件	说明
GitHub Copilot	AI 代码补全（付费）
Tabnine	AI 代码补全（免费/付费）
Codeium	免费 AI 代码补全
通义灵码（Tongyi Lingma）	阿里出品的中文 AI 助手

基本使用

命令行打开

bash

# 打开当前目录
code .

# 打开指定文件
code app.js

# 打开多个文件
code file1.js file2.js

# 对比两个文件
code --diff file1.js file2.js

# 以新窗口打开
code -n .

常用快捷键

快捷键	功能
`Ctrl + P`	快速打开文件
`Ctrl + Shift + P`	命令面板
`Ctrl + ``	打开终端
`Ctrl + B`	切换侧边栏
`Ctrl + J`	切换面板（终端/输出/调试控制台）
`Ctrl + Shift + E`	打开文件资源管理器
`Ctrl + Shift + F`	全局搜索
`Ctrl + Shift + G`	打开源码管理
`Ctrl + Shift + D`	打开调试面板
`Ctrl + Shift + X`	打开扩展面板
`Ctrl + ``	拆分编辑器
`Ctrl + 1/2/3`	切换编辑器组
`Alt + ↑/↓`	上下移动行
`Ctrl + D`	选中下一个相同的词
`Ctrl + Shift + L`	选中所有相同的词
`Alt + Click`	添加多个光标

常用操作

多光标编辑：Alt + Click 或 Ctrl + Alt + ↑/↓
代码格式化：右键 → Format Document 或 Shift + Alt + F
代码片段：输入关键词后按 Tab 插入预设模板
Emmet 缩写：输入 div.container>ul.list>li*5>a 后按 Tab

插件开发

VSCode 插件本质是一个包含 package.json 的目录，使用 TypeScript 或 JavaScript 编写。

入门步骤

1. 安装脚手架

bash

npm install -g yo generator-code

2. 生成插件模板

bash

yo code

选择 New Extension (TypeScript)，填写插件信息：

插件名称（如 hello-world）
标识符（如 hello-world-id）
描述
是否启用 JavaScript 检查等

3. 项目结构

hello-world/
├── .vscode/
│   ├── launch.json        # 调试配置
│   └── tasks.json
├── src/
│   └── extension.ts       # 插件入口
├── package.json           # 插件清单
├── tsconfig.json
└── README.md

4. 核心文件 `extension.ts`

typescript

import * as vscode from 'vscode'

// 插件激活时调用
export function activate(context: vscode.ExtensionContext) {
  // 注册一个命令
  const disposable = vscode.commands.registerCommand('hello-world.sayHello', () => {
    vscode.window.showInformationMessage('Hello World!')
  })
  context.subscriptions.push(disposable)

  // 注册状态栏项
  const statusBar = vscode.window.createStatusBarItem(vscode.StatusBarAlignment.Right, 100)
  statusBar.text = '$(heart) Hello'
  statusBar.show()
}

// 插件停用时调用
export function deactivate() {}

5. 本地调试

在 VSCode 中按 F5 打开插件开发主机窗口，即可测试插件效果。

核心 API

API	说明
`vscode.commands`	注册/执行命令
`vscode.window`	窗口操作（状态栏、信息提示、输入框等）
`vscode.workspace`	文件读写、配置读写
`vscode.languages`	语言功能（代码补全、跳转定义、诊断等）
`vscode.ExtensionContext`	插件上下文（全局/工作区存储）

发布插件

bash

# 安装 vsce 发布工具
npm install -g @vscode/vsce

# 打包
vsce package

# 发布到 Marketplace
vsce publish

发布前需要在 Azure DevOps 创建发布者账号，获取 Personal Access Token。

plugin.xml 关键字段

json

{
  "name": "hello-world",
  "displayName": "Hello World",
  "version": "0.0.1",
  "publisher": "your-publisher-name",
  "engines": { "vscode": "^1.80.0" },
  "categories": ["Other"],
  "activationEvents": ["onCommand:hello-world.sayHello"],
  "main": "./out/extension.js",
  "contributes": {
    "commands": [{
      "command": "hello-world.sayHello",
      "title": "Say Hello"
    }],
    "keybindings": [{
      "command": "hello-world.sayHello",
      "key": "ctrl+alt+h"
    }]
  }
}

常见问题

中文乱码

在设置中搜索 files.encoding，设置为 utf8。如果打开 GBK 编码的文件，VSCode 右下角点击编码选择 GBK 重新打开。

终端无法使用

确保 Windows 上已启用 PowerShell 或 WSL，或在设置中配置 terminal.integrated.defaultProfile.windows。

VSCode 卡顿

禁用不必要的插件
减少大型文件夹的监视：files.watcherExclude 添加 **/node_modules/**
在大型项目中设置 search.exclude 排除搜索范围
使用 Workspace Trust 功能，仅在可信窗口启用插件

Maven

VSCode

发展历史

开发团队

下载

版本选择

安装

Windows

macOS

Linux

初始化配置

界面介绍

常用设置

同步设置

推荐插件

前端开发

Java 开发

Python 开发

通用工具

主题美化

AI 辅助

基本使用

命令行打开

常用快捷键

常用操作

插件开发

入门步骤

1. 安装脚手架

2. 生成插件模板

3. 项目结构

4. 核心文件 `extension.ts`

5. 本地调试

核心 API

发布插件

plugin.xml 关键字段

常见问题

中文乱码

终端无法使用

VSCode 卡顿

VSCode ​

发展历史 ​

开发团队 ​

下载 ​

版本选择 ​

安装 ​

Windows ​

macOS ​

Linux ​

初始化配置 ​

界面介绍 ​

常用设置 ​

同步设置 ​

推荐插件 ​

前端开发 ​

Java 开发 ​

Python 开发 ​

通用工具 ​

主题美化 ​

AI 辅助 ​

基本使用 ​

命令行打开 ​

常用快捷键 ​

常用操作 ​

插件开发 ​

入门步骤 ​

1. 安装脚手架 ​

2. 生成插件模板 ​

3. 项目结构 ​

4. 核心文件 extension.ts ​

5. 本地调试 ​

核心 API ​

发布插件 ​

plugin.xml 关键字段 ​

常见问题 ​

中文乱码 ​

终端无法使用 ​

VSCode 卡顿 ​

VSCode

发展历史

开发团队

下载

版本选择

安装

Windows

macOS

Linux

初始化配置

界面介绍

常用设置

同步设置

推荐插件

前端开发

Java 开发

Python 开发

通用工具

主题美化

AI 辅助

基本使用

命令行打开

常用快捷键

常用操作

插件开发

入门步骤

1. 安装脚手架

2. 生成插件模板

3. 项目结构

4. 核心文件 `extension.ts`

5. 本地调试

核心 API

发布插件

plugin.xml 关键字段

常见问题

中文乱码

终端无法使用

VSCode 卡顿