Visual Studio Code 配置教程，手把手教你如何配置 - 主机乐

字体大小：搜索 editor.fontSize，调整字体大小以符合您的阅读习惯。
行号显示：搜索 editor.lineNumbers，选择 on 显示行号。
自动保存：搜索 files.autoSave，可以选择 onFocusChange 或 afterDelay，以确保文件不会因为意外情况而丢失修改内容。
光标样式：搜索 editor.cursorStyle，可以选择 line、block 等不同样式，提升编码体验。
缩进设置：搜索 editor.tabSize 和 editor.insertSpaces，设置缩进大小和是否用空格替代 Tab。

3. 安装和配置扩展插件

VS Code 的强大之处在于其丰富的扩展插件库。您可以根据需要安装各种扩展来增强功能。

3.1 安装扩展

点击左侧活动栏的扩展图标，或者使用快捷键 Ctrl + Shift + X 打开扩展面板。
在搜索栏中输入扩展名，点击 Install 安装扩展。

3.2 推荐扩展

Python：适用于 Python 开发，提供语法高亮、智能提示、调试等功能。
ESLint：用于 JavaScript 和 TypeScript 的代码规范检查，帮助您保持代码质量。
Prettier：代码格式化工具，支持多种语言，保证代码风格一致。
Live Server：用于实时预览 HTML 文件，非常适合前端开发。
GitLens：增强 Git 功能，提供丰富的 Git 历史和贡献者信息。
Docker：支持 Docker 容器管理和调试，适用于 DevOps 和微服务开发。
Remote - SSH：允许通过 SSH 连接到远程服务器进行开发，非常适合远程开发环境。

3.3 配置扩展

每个扩展可能都有特定的配置选项，可以在 Settings 中搜索扩展名来进行相应配置。
例如，配置 Prettier 作为默认格式化工具：搜索 editor.defaultFormatter，选择 esbenp.prettier-vscode。

4. 主题和配色方案

4.1 安装主题

在扩展面板搜索 theme，安装喜欢的主题扩展。
常用主题有 One Dark Pro、Dracula Official 等，您可以根据个人喜好选择。

4.2 切换主题

打开命令面板：按 Ctrl + Shift + P，输入 Preferences: Color Theme，然后选择已安装的主题。

4.3 自定义配色方案

如果已有主题不能完全满足您的需求，您可以通过编辑 settings.json 文件自定义配色方案。
打开 settings.json：在设置页面右上角点击 {} 图标。
示例自定义配置：

代码语言：javascript

AI代码解释

复制

"workbench.colorCustomizations": {
    "editor.background": "#1e1e1e",
    "editor.foreground": "#d4d4d4",
    "activityBar.background": "#333333",
    "sideBar.background": "#252526"
}

5. 版本控制集成

5.1 配置 Git

确保已安装 Git，可以在终端输入 git --version 检查。
在 VS Code 中，点击左侧活动栏的源代码管理图标，初始化或克隆仓库。

5.2 Git 扩展

安装 GitLens 扩展，提供丰富的 Git 交互功能，如文件历史、代码作者等。
在设置中搜索 gitlens，根据需要进行配置。例如，启用文件更改高亮显示和提交历史等功能。

5.3 使用 Git

提交更改：在源代码管理面板，输入提交信息并点击 ✔ 提交。
同步仓库：点击源代码管理面板右上角的同步图标，与远程仓库同步。
分支管理：点击源代码管理面板底部的分支名称，可以创建、切换或合并分支。

6. 调试配置

VS Code 提供强大的调试功能，支持多种语言和环境。

6.1 配置启动文件

在左侧活动栏点击调试图标，选择 create a launch.json file 创建调试配置文件。
根据语言选择相应的调试器，如 Python、Node.js 等。
示例 launch.json 配置文件：

代码语言：javascript

AI代码解释

复制

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal"
    }
  ]
}

6.2 设置断点和启动调试

在代码行号区域点击即可设置断点。
点击调试面板的绿色播放按钮开始调试。
在调试过程中，您可以使用调试控制台查看变量值和输出信息。

7. 代码片段

7.1 创建代码片段

打开命令面板：按 Ctrl + Shift + P，输入 Preferences: Configure User Snippets。
选择语言或全局片段，添加 JSON 格式的代码片段。

7.2 示例

代码语言：javascript

AI代码解释

复制

{
  "Print to console": {
    "prefix": "log",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "Log output to console"
  }
}

上述片段在输入 log 时会自动补全为 console.log('');，光标位于引号之间，方便快速打印调试信息。

8. 终端集成

8.1 打开终端

使用快捷键 Ctrl + 或者在菜单栏选择View -> Terminal` 打开集成终端。

8.2 配置终端

在设置中搜索 terminal.integrated.shell，配置默认终端，如 bash、zsh 或 powershell。
示例配置：

代码语言：javascript

AI代码解释

复制

"terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
"terminal.integrated.shell.linux": "/usr/bin/zsh",
"terminal.integrated.shell.osx": "/bin/zsh"

9. 高级配置和技巧

9.1 自定义快捷键

打开命令面板：按 Ctrl + Shift + P，输入 Preferences: Open Keyboard Shortcuts。
在打开的快捷键配置界面中，您可以搜索特定命令并自定义其快捷键。
示例：

代码语言：javascript

AI代码解释

复制

{
  "key": "ctrl+alt+n",
  "command": "workbench.action.files.newUntitledFile"
}

上述配置将 Ctrl + Alt + N 设置为创建新文件的快捷键。

9.2 配置多根工作区

VS Code 支持在一个窗口中管理多个项目（多根工作区）。
打开命令面板：按 `

Ctrl + Shift + P，输入 Workspaces: Add Folder to Workspace`。

添加多个项目文件夹后，您可以在同一窗口中无缝切换和管理多个项目。

9.3 使用任务自动化

VS Code 提供了任务系统，可以执行常见的构建、测试和部署任务。
在项目根目录创建 tasks.json 文件，定义任务：

代码语言：javascript

AI代码解释

复制

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build",
      "type": "shell",
      "command": "npm run build",
      "group": "build",
      "problemMatcher": ["$tsc"]
    }
  ]
}

使用 Ctrl + Shift + B 快速执行定义的构建任务。

10. 常见问题和解决方案

10.1 扩展安装失败

检查网络连接，尝试更换扩展市场源。
在终端中使用命令安装：code --install-extension <extension-id>。

10.2 代码格式化问题

确认已安装 Prettier 或其他格式化扩展，并在设置中启用自动格式化：editor.formatOnSave。
在项目根目录创建 .prettierrc 文件，定义格式化规则：

代码语言：javascript

AI代码解释

复制

{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2
}

10.3 调试无法启动

检查调试配置文件 launch.json 是否正确配置。
确认调试器依赖已安装，如 Python 的 ptvsd。

10.4 性能优化

禁用不常用的扩展以减少资源占用。
调整设置中搜索 files.exclude 和 search.exclude 以排除不必要的文件和文件夹，提高搜索速度。
在设置中禁用或调整 editor.minimap.enabled 以减少资源消耗。

总结

通过本文的详细步骤，您可以将 Visual Studio Code 配置成一个高效、个性化的开发环境。合理利用各种插件和扩展，结合个性化设置，能大大提升开发体验和效率。希望这篇教程能帮助到广大开发者顺利配置和使用 VS Code。

联系我们

返回顶部

帮助中心/最新通知

所有文章

【运维相关】Visual Studio Code 配置教程，手把手教你如何配置

引言

1. 安装 VS Code

1.1 下载和安装

1.2 初次启动

2. 基本配置

2.1 设置用户和工作区配置

2.2 常用配置项

3. 安装和配置扩展插件

3.1 安装扩展

3.2 推荐扩展

3.3 配置扩展

4. 主题和配色方案

4.1 安装主题

4.2 切换主题

4.3 自定义配色方案

5. 版本控制集成

5.1 配置 Git

5.2 Git 扩展

5.3 使用 Git

6. 调试配置

6.1 配置启动文件

6.2 设置断点和启动调试

7. 代码片段

7.1 创建代码片段

7.2 示例

8. 终端集成

8.1 打开终端

8.2 配置终端

9. 高级配置和技巧

9.1 自定义快捷键

9.2 配置多根工作区

9.3 使用任务自动化

10. 常见问题和解决方案

10.1 扩展安装失败

10.2 代码格式化问题

10.3 调试无法启动

10.4 性能优化

总结