## 前言

VSCode 是微软开发的一款轻量级代码编辑器，支持多种编程语言，包括 JavaScript、TypeScript、Python、Java 等。VSCode 以其强大的功能和灵活的扩展性，成为了开发者中非常受欢迎的工具。

我们可以把它当做一个文本编辑器来使用，也可以把它当做一个 IDE 来使用。

## 安装 VSCode

1. 打开 [VSCode 官网](https://code.visualstudio.com/)，下载 Mac 版本的安装包。
2. 下载完成后，双击安装包，按照提示完成安装。

当然，也可以通过 Homebrew 来安装：

```bash
brew install --cask visual-studio-code
```

![安装 VSCode](https://cdn.nlark.com/yuque/0/2025/png/1863084/1741526223883-a7f65e0b-5f8f-4ed3-a0f8-24034e0c9088.png?x-oss-process=image%2Fformat%2Cwebp%2Fresize%2Cw_1300%2Climit_0)

## 基础配置

如果你之前在其他设备上有相关的配置，可以直接登录账号，然后同步到新设备上。

![参考配置](https://cdn.nlark.com/yuque/0/2025/png/1863084/1741529105627-b077f0c8-de3a-45ef-9488-f23ed8c96295.png?x-oss-process=image%2Fformat%2Cwebp%2Fresize%2Cw_1500%2Climit_0)

VSCode 基础配置可以参考 [VSCode 官方文档](https://code.visualstudio.com/docs/getstarted/settings)。

我的个人必备的插件 Vim，关于 Vim 的相关内容在之前文章中有所介绍。这里贴一下我的配置。

在 `settings.json` 中添加以下配置

```json
{
    "window.commandCenter": 1,
    // vim config
    "vim.easymotion": true,
    "vim.incsearch": true,
    "vim.useSystemClipboard": true,
    "vim.useCtrlKeys": true,
    "vim.hlsearch": true,
    "vim.insertModeKeyBindings": [
        {
            "before": [
                "i",
                "i"
            ],
            "after": [
                "<Esc>"
            ]
        }
    ],
    "vim.normalModeKeyBindingsNonRecursive": [
        {
            "before": [
                "<leader>",
                "d"
            ],
            "after": [
                "d",
                "d"
            ]
        },
        {
            "before": [
                "D"
            ],
            "after": [
                "g",
                "g",
                "v",
                "G",
                "d"
            ]
        },
        {
            "before": [
                "<C-n>"
            ],
            "commands": [
                ":nohl"
            ]
        },
        {
            "before": [
                "J"
            ],
            "after": [
                "5",
                "j"
            ],
            "silent": true
        },
        {
            "before": [
                "K"
            ],
            "after": [
                "5",
                "k"
            ],
            "silent": true
        },
        {
            "before": [
                "H"
            ],
            "after": [
                "5",
                "h"
            ],
            "silent": true
        },
        {
            "before": [
                "L"
            ],
            "after": [
                "5",
                "l"
            ],
            "silent": true
        },
        {
            "before": [
                "W"
            ],
            "commands": [
                ":w",
                "<Enter>"
            ],
            "silent": true
        },
        {
            "before": [
                "Q"
            ],
            "commands": [
                ":q",
                "<Enter>"
            ],
            "silent": true
        },
        {
            "before": [
                "Y"
            ],
            "commands": [
                ":%y",
                "<Enter>"
            ],
            "silent": true
        },
    ],
    "vim.leader": "<space>",
    "vim.handleKeys": {
        // "<C-a>": false,
        "<C-f>": false,
    },
    "extensions.experimental.affinity": {
        "vscodevim.vim": 1
    },
    "vim.sneak": true,
    "vim.sneakUseIgnorecaseAndSmartcase": true,
    "vim.camelCaseMotion.enable": true,
    "vim.replaceWithRegister": true,
    "fittencode.inlineCompletion.enable": true,
    "editor.fontSize": 13
}
```

## 常用插件

大家可以根据自己的需求选择插件，这里我列出一些常用的插件，供大家参考。

### 通用开发工具

- **Chinese (Simplified) Language Pack**：VS Code 的中文语言包，提供本地化界面
- **Code Runner**：快速运行多种语言的代码片段
- **Prettier - Code formatter**：代码格式化工具，支持多种语言
- **ESLint**：JavaScript 和 TypeScript 的代码质量检查工具
- **GitLens**：增强 Git 功能，显示代码行的详细 Git 信息
- **Live Server**：为静态和动态页面启动本地开发服务器，支持实时重载
- **Auto Rename Tag**：自动重命名成对的 HTML/XML 标签
- **Path Intellisense**：自动补全文件路径

### 编程语言支持

- **Python**：Python 语言支持与智能提示
- **Java Extension Pack**：Java 开发必备插件集合
- **C/C++**：C/C++ 语言支持与智能提示
- **Go**：Go 语言支持
- **Rust**：Rust 语言支持
- **JavaScript (ES6) code snippets**：ES6 语法的代码片段

### 数据库工具

- **SQLTools**：数据库连接和查询管理工具
- **MongoDB for VS Code**：MongoDB 数据库支持

### 主题与界面美化

- **Material Icon Theme**：文件图标主题
- **One Dark Pro**：深色主题，减轻眼睛疲劳
- **Vracula Official**：流行的暗色主题
- **Vitesse Theme**：深色主题，减轻眼睛疲劳
- **Bracket Pair Colorizer 2**：彩色括号匹配，提高代码可读性

### 效率工具

- **Todo Tree**：快速查找和管理代码中的 TODO 注释
- **Bookmarks**：在代码中添加书签并快速导航
- **Project Manager**：快速切换和管理多个项目
- **Remote - SSH**：通过 SSH 连接远程开发环境
- **Code Spell Checker**：拼写检查，避免代码中的拼写错误
- **Vim**：为喜欢 Vim 键位的开发者提供 Vim 模式

### Markdown 工具

- **Markdown All in One**：Markdown 写作和预览增强
- **Markdown Preview Enhanced**：增强的 Markdown 预览功能

### 容器开发

- **Docker**：Docker 容器管理和开发支持
- **Kubernetes**：Kubernetes 集群管理和开发

### AI 辅助编程

- **GitHub Copilot**：AI 代码辅助工具，提供智能代码建议
- **Tabnine AI**：基于 AI 的代码补全工具

### 团队协作

- **Live Share**：实时代码协作和共享开发环境

按照你的开发需求选择适合的插件，不建议安装太多插件，以免影响 VS Code 的性能。

最后放一张 vitesse theme 主题插件的截图，这个主题插件挺好看，推荐给大家。

![vitesse theme](https://cdn.nlark.com/yuque/0/2025/png/1863084/1741527482941-b326da23-000c-493e-be05-7f1728dd8c0a.png?x-oss-process=image%2Fformat%2Cwebp%2Fresize%2Cw_1500%2Climit_0)

## 最后

以上就是 VSCode 的安装、配置以及常用插件的介绍，希望对你有所帮助。