VSCode 配置

1. VSCode 简介

1.1 什么是 VSCode

Visual Studio Code（简称 VSCode）是微软开发的一款免费、开源的代码编辑器，具有以下特点：

跨平台：支持 Windows、macOS 和 Linux
轻量级：启动速度快，资源占用少
强大的扩展生态：拥有丰富的插件市场
内置 Git 集成：方便版本控制
智能代码补全：基于 IntelliSense 技术
内置终端：无需切换窗口即可运行命令
调试支持：内置调试器，支持多种语言

1.2 为什么选择 VSCode 进行前端开发

前端友好：对 HTML、CSS、JavaScript/TypeScript 有良好支持
快速响应：编辑大型文件时依然保持流畅
插件丰富：前端开发相关插件众多，如 ESLint、Prettier、Vetur 等
TypeScript 支持：内置 TypeScript 语言服务
高度可定制：可以根据个人喜好配置编辑器
活跃的社区：问题容易得到解决，功能持续更新

2. 安装指南

2.1 下载与安装

访问官方网站：https://code.visualstudio.com/
选择对应平台版本：根据你的操作系统选择 Windows、macOS 或 Linux 版本
安装过程：
- Windows：运行安装程序，按照提示完成安装
- macOS：打开 .dmg 文件，将 VSCode 拖动到 Applications 文件夹
- Linux：根据发行版选择合适的安装方式（deb、rpm 或 tar.gz）

2.2 首次启动配置

欢迎页面：首次启动会显示欢迎页面，可以选择打开文件夹或克隆仓库
设置语言：如果需要更改界面语言，可以安装相应的语言包
安装基本插件：根据开发需求安装必要的插件

2.3 更新 VSCode

自动更新：VSCode 默认会自动检查并更新到最新版本
手动更新：可以通过帮助菜单中的「检查更新」手动检查更新

3. 前端开发配置

3.1 编辑器基本设置

3.1.1 用户设置 vs 工作区设置

用户设置：全局生效，适用于所有项目
工作区设置：仅对当前项目生效，可以在 .vscode/settings.json 文件中配置

3.1.2 常用编辑器设置

打开设置界面（快捷键：Ctrl+, 或 Cmd+,），可以配置以下常用选项：

编辑器字体：设置代码字体和大小
缩进：设置制表符大小和缩进方式（空格或制表符）
自动保存：启用自动保存功能
代码折叠：启用或禁用代码折叠
行号：显示或隐藏行号
括号匹配：启用括号匹配高亮
代码建议：配置代码建议的行为

3.1.3 JSON 格式的设置示例

可以通过编辑 JSON 文件来进行更详细的配置：

json

{
  "editor.fontFamily": "'Consolas', 'Courier New', monospace",
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "workbench.colorTheme": "Visual Studio Dark",
  "terminal.integrated.fontSize": 14
}

3.2 前端开发特定设置

3.2.1 HTML/CSS 配置

json

{
  "html.format.enable": true,
  "html.format.wrapLineLength": 120,
  "css.format.enable": true,
  "css.format.newlineBetweenRules": true
}

3.2.2 JavaScript/TypeScript 配置

json

{
  "javascript.format.enable": true,
  "typescript.format.enable": true,
  "javascript.preferences.quoteStyle": "single",
  "typescript.preferences.quoteStyle": "single",
  "javascript.format.semicolons": "insert",
  "typescript.format.semicolons": "insert"
}

3.2.3 Vue 配置

json

{
  "vetur.format.defaultFormatter.html": "prettier",
  "vetur.format.defaultFormatter.css": "prettier",
  "vetur.format.defaultFormatter.js": "prettier",
  "vetur.format.defaultFormatter.ts": "prettier"
}

4. 常用前端插件推荐

4.1 核心插件

插件名称	描述	推荐指数
ESLint	代码质量检查工具，帮助发现和修复代码问题	★★★★★
Prettier	代码格式化工具，保持代码风格一致	★★★★★
Vetur	Vue 2 支持插件，提供语法高亮、智能提示等	★★★★★
Vue Language Features (Volar)	Vue 3 支持插件，替代 Vetur	★★★★★
TypeScript Language Features	TypeScript 支持（内置）	★★★★★
JavaScript (ES6) code snippets	JavaScript 代码片段	★★★★☆
HTML CSS Support	HTML 中 CSS 智能提示	★★★★☆
Auto Rename Tag	自动重命名配对的 HTML/XML 标签	★★★★☆
Path Intellisense	路径自动补全	★★★★☆
GitLens	增强 Git 功能，显示代码作者和提交历史	★★★★☆

4.2 实用工具插件

插件名称	描述	推荐指数
Live Server	启动本地开发服务器，支持实时刷新	★★★★★
REST Client	直接在 VSCode 中发送 HTTP 请求	★★★★☆
Code Spell Checker	拼写检查工具，避免代码中的拼写错误	★★★★☆
TODO Highlight	高亮显示 TODO、FIXME 等注释	★★★★☆
Better Comments	增强注释功能，支持不同颜色的注释	★★★☆☆
Color Picker	颜色选择器，方便选择和管理颜色	★★★☆☆

4.3 主题与图标插件

插件名称	描述	推荐指数
One Dark Pro	Atom 的 One Dark 主题	★★★★★
Material Theme	Material 设计风格的主题	★★★★★
Dracula Official	Dracula 主题	★★★★☆
vscode-icons	丰富的文件图标	★★★★★
Material Icon Theme	Material 设计风格的文件图标	★★★★★

5. VSCode 常用快捷键

5.1 编辑相关快捷键

快捷键	功能	平台
`Ctrl+C`	复制	全平台
`Ctrl+X`	剪切	全平台
`Ctrl+V`	粘贴	全平台
`Ctrl+Z`	撤销	全平台
`Ctrl+Y` / `Ctrl+Shift+Z`	重做	全平台
`Ctrl+S`	保存	全平台
`Ctrl+F`	查找	全平台
`Ctrl+H`	替换	全平台
`Ctrl+D`	选择下一个匹配项	全平台
`Ctrl+Shift+L`	选择所有匹配项	全平台
`Ctrl+Shift+Enter`	在当前行上方插入新行	全平台
`Ctrl+Enter`	在当前行下方插入新行	全平台
`Ctrl+Backspace`	删除光标左侧的单词	全平台
`Ctrl+Delete`	删除光标右侧的单词	全平台
`Home`	移动到行首	全平台
`End`	移动到行尾	全平台
`Ctrl+Home`	移动到文件开头	全平台
`Ctrl+End`	移动到文件结尾	全平台
`Alt+Up/Down`	向上/向下移动当前行	全平台
`Shift+Alt+Up/Down`	向上/向下复制当前行	全平台
`Ctrl+Shift+K`	删除当前行	全平台

5.2 多光标编辑快捷键

快捷键	功能	平台
`Alt+Click`	在点击位置添加光标	全平台
`Ctrl+Alt+Up/Down`	在上方/下方添加光标	全平台
`Ctrl+Shift+Alt+Up/Down`	在上方/下方选择	全平台
`Esc`	取消多光标	全平台

5.3 导航相关快捷键

快捷键	功能	平台
`Ctrl+P`	快速打开文件	全平台
`Ctrl+Shift+P`	打开命令面板	全平台
`Ctrl+Tab`	切换编辑器标签	全平台
`Ctrl+W`	关闭当前编辑器	全平台
`Ctrl+Shift+W`	关闭所有编辑器	全平台
`Ctrl+1/2/3`	切换到对应编辑器组	全平台
`Ctrl+K Ctrl+0`	展开所有代码	全平台
`Ctrl+K Ctrl+1-9`	展开到对应层级	全平台
`Ctrl+K Ctrl+J`	折叠所有代码	全平台

5.4 终端与调试快捷键

快捷键	功能	平台
`Ctrl+``	显示/隐藏集成终端	全平台
`Ctrl+Shift+``	创建新终端	全平台
`Ctrl+Shift+D`	打开调试视图	全平台
`F5`	开始调试	全平台
`F9`	切换断点	全平台
`F10`	单步跳过	全平台
`F11`	单步进入	全平台
`Shift+F11`	单步退出	全平台

5.5 Git 相关快捷键

快捷键	功能	平台
`Ctrl+Shift+G`	打开 Git 视图	全平台
`Ctrl+K Ctrl+G`	打开 Git 命令面板	全平台

6. VSCode 高级功能

6.1 调试功能

VSCode 内置了强大的调试器，支持多种语言和框架：

设置断点：点击行号左侧添加断点
启动调试：按 F5 或点击调试视图中的「启动调试」
调试控制台：查看变量值和执行表达式
监视变量：在调试视图中添加要监视的变量
调用栈：查看函数调用栈

6.2 多光标编辑

多光标编辑是 VSCode 的一项强大功能，可以同时在多个位置编辑代码：

添加多个光标：使用 Alt+Click 或 Ctrl+Alt+Up/Down
选择所有匹配项：使用 Ctrl+Shift+L
列选择：使用 Shift+Alt+鼠标拖动 或 Shift+Alt+箭头键

6.3 代码片段

代码片段可以快速插入常用代码模板：

内置代码片段：VSCode 内置了多种语言的代码片段
自定义代码片段：可以通过文件 -> 首选项 -> 用户代码片段来创建
使用代码片段：在编辑器中输入片段前缀，然后按 Tab 键展开

6.4 集成终端

VSCode 内置了终端，可以直接在编辑器中运行命令：

打开终端：使用 `Ctrl+``
切换终端类型：可以在设置中配置默认终端类型（PowerShell、Cmd、Bash 等）
分割终端：右键点击终端，选择「分割终端」
终端配置：可以在设置中配置终端的字体、颜色等

6.5 工作区与多根文件夹

VSCode 支持工作区功能，可以在一个窗口中管理多个项目：

创建工作区：文件 -> 保存工作区为...
添加文件夹：文件 -> 添加文件夹到工作区...
工作区设置：可以为工作区配置特定的设置

7. 前端开发工作流优化

7.1 代码格式化与 linting

配置 ESLint 和 Prettier：
- 安装相关依赖
- 创建 .eslintrc.js 和 .prettierrc 配置文件
- 启用编辑器的自动格式化和 linting
使用 husky 和 lint-staged：
- 在提交代码前自动运行 linting 和格式化
- 确保代码质量符合规范

7.2 快速启动项目

使用 VSCode 任务：
- 在 .vscode/tasks.json 中定义任务
- 使用 Ctrl+Shift+P 运行任务
使用 npm scripts：
- 在 package.json 中定义脚本
- 在集成终端中运行脚本

7.3 版本控制工作流

使用 GitLens 插件：
- 查看代码作者和提交历史
- 比较不同版本的代码
使用 VSCode 的 Git 集成：
- 查看更改
- 暂存和提交更改
- 推送和拉取代码

7.4 代码导航与搜索

使用 Go to Definition：
- 按 F12 跳转到定义
- 按 Alt+F12 查看定义预览
使用 Search：
- 按 Ctrl+Shift+F 进行全局搜索
- 使用正则表达式进行高级搜索

8. 自定义配置与代码片段

8.1 自定义设置

可以通过编辑 settings.json 文件来进行详细的自定义配置：

用户设置：位于 %APPDATA%\Code\User\settings.json（Windows）或 ~/.config/Code/User/settings.json（Linux/macOS）
工作区设置：位于项目根目录的 .vscode/settings.json

8.2 自定义快捷键

可以通过文件 -> 首选项 -> 键盘快捷方式来自定义快捷键：

GUI 方式：使用图形界面修改快捷键
JSON 方式：编辑 keybindings.json 文件

8.3 自定义代码片段

代码片段可以大大提高编码效率，以下是一些常用的前端代码片段示例：

8.3.1 HTML 代码片段

json

{
  "HTML5 模板": {
    "prefix": "html5",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"zh-CN\">",
      "<head>",
      "  <meta charset=\"UTF-8\">",
      "  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "  <title>$1</title>",
      "</head>",
      "<body>",
      "  $2",
      "</body>",
      "</html>"
    ],
    "description": "HTML5 基础模板"
  }
}

8.3.2 JavaScript 代码片段

json

{
  "console.log": {
    "prefix": "cl",
    "body": [
      "console.log($1);"
    ],
    "description": "console.log 语句"
  },
  "箭头函数": {
    "prefix": "af",
    "body": [
      "const $1 = ($2) => {\n  $3\n};"
    ],
    "description": "箭头函数"
  }
}

8.3.3 Vue 代码片段

json

{
  "Vue 组件模板": {
    "prefix": "vue",
    "body": [
      "<template>",
      "  <div class=\"$1\">",
      "    $2",
      "  </div>",
      "</template>",
      "",
      "<script setup>",
      "$3",
      "</script>",
      "",
      "<style scoped>",
      "$4",
      "</style>"
    ],
    "description": "Vue 3 组件模板"
  }
}

9. 常见问题与解决方案

9.1 性能问题

问题：VSCode 运行缓慢
解决方案：
- 禁用不常用的插件
- 清理工作区缓存
- 增加 VSCode 的内存限制
- 关闭自动保存大型文件

9.2 插件冲突

问题：插件之间发生冲突
解决方案：
- 禁用最近安装的插件
- 检查插件版本兼容性
- 查看 VSCode 开发者工具中的错误信息

9.3 代码提示不工作

问题：智能代码提示不工作
解决方案：
- 确保安装了相关语言的插件
- 检查项目的依赖是否安装
- 重启 VSCode 或重新加载窗口

9.4 终端问题

问题：集成终端无法正常工作
解决方案：
- 检查终端配置
- 尝试使用不同的终端类型
- 检查系统环境变量

10. 总结

VSCode 是一款功能强大、灵活可定制的代码编辑器，特别适合前端开发。通过本文档的配置和使用指南，你可以：

快速上手 VSCode 并进行基本配置
安装和使用前端开发常用的插件
掌握 VSCode 的常用快捷键和高级功能
优化前端开发工作流，提高开发效率
自定义 VSCode 以适应个人开发习惯

随着你对 VSCode 的深入使用，你会发现更多提高开发效率的技巧和方法。不断探索和配置 VSCode，让它成为你前端开发的得力助手！

VSCode 配置 ​

1. VSCode 简介 ​

1.1 什么是 VSCode ​

1.2 为什么选择 VSCode 进行前端开发 ​

2. 安装指南 ​

2.1 下载与安装 ​

2.2 首次启动配置 ​

2.3 更新 VSCode ​

3. 前端开发配置 ​

3.1 编辑器基本设置 ​

3.1.1 用户设置 vs 工作区设置 ​

3.1.2 常用编辑器设置 ​

3.1.3 JSON 格式的设置示例 ​

3.2 前端开发特定设置 ​

3.2.1 HTML/CSS 配置 ​

3.2.2 JavaScript/TypeScript 配置 ​

3.2.3 Vue 配置 ​

4. 常用前端插件推荐 ​

4.1 核心插件 ​

4.2 实用工具插件 ​

4.3 主题与图标插件 ​

5. VSCode 常用快捷键 ​

5.1 编辑相关快捷键 ​

5.2 多光标编辑快捷键 ​

5.3 导航相关快捷键 ​

5.4 终端与调试快捷键 ​

5.5 Git 相关快捷键 ​

6. VSCode 高级功能 ​

6.1 调试功能 ​

6.2 多光标编辑 ​

6.3 代码片段 ​

6.4 集成终端 ​

6.5 工作区与多根文件夹 ​

7. 前端开发工作流优化 ​

7.1 代码格式化与 linting ​

7.2 快速启动项目 ​

7.3 版本控制工作流 ​

7.4 代码导航与搜索 ​

8. 自定义配置与代码片段 ​

8.1 自定义设置 ​

8.2 自定义快捷键 ​

8.3 自定义代码片段 ​

8.3.1 HTML 代码片段 ​

8.3.2 JavaScript 代码片段 ​

8.3.3 Vue 代码片段 ​

9. 常见问题与解决方案 ​

9.1 性能问题 ​

9.2 插件冲突 ​

9.3 代码提示不工作 ​

9.4 终端问题 ​

10. 总结 ​

VSCode 配置

1. VSCode 简介

1.1 什么是 VSCode

1.2 为什么选择 VSCode 进行前端开发

2. 安装指南

2.1 下载与安装

2.2 首次启动配置

2.3 更新 VSCode

3. 前端开发配置

3.1 编辑器基本设置

3.1.1 用户设置 vs 工作区设置

3.1.2 常用编辑器设置

3.1.3 JSON 格式的设置示例

3.2 前端开发特定设置

3.2.1 HTML/CSS 配置

3.2.2 JavaScript/TypeScript 配置

3.2.3 Vue 配置

4. 常用前端插件推荐

4.1 核心插件

4.2 实用工具插件

4.3 主题与图标插件

5. VSCode 常用快捷键

5.1 编辑相关快捷键

5.2 多光标编辑快捷键

5.3 导航相关快捷键

5.4 终端与调试快捷键

5.5 Git 相关快捷键

6. VSCode 高级功能

6.1 调试功能

6.2 多光标编辑

6.3 代码片段

6.4 集成终端

6.5 工作区与多根文件夹

7. 前端开发工作流优化

7.1 代码格式化与 linting

7.2 快速启动项目

7.3 版本控制工作流

7.4 代码导航与搜索

8. 自定义配置与代码片段

8.1 自定义设置

8.2 自定义快捷键

8.3 自定义代码片段

8.3.1 HTML 代码片段

8.3.2 JavaScript 代码片段

8.3.3 Vue 代码片段

9. 常见问题与解决方案

9.1 性能问题

9.2 插件冲突

9.3 代码提示不工作

9.4 终端问题

10. 总结