VsCode 安装文档

VS Code 安装文档

一、VS Code 完整说明

VS Code（Visual Studio Code） 是微软2015年推出的免费、开源、跨平台代码编辑器（非重型IDE），基于Electron框架开发，底层用Chromium+Node.js，兼顾轻量与强功能。

1. 核心定位

本质：轻量级编辑器 → 可通过插件变身全功能IDE。
三端覆盖：Windows/macOS/Linux 全支持。
免费商用 ：MIT协议，个人/公司永久免费。

2. 内置核心能力（开箱即用）

语法高亮、代码折叠、括号匹配、智能缩进
IntelliSense智能提示（变量/函数/参数）
集成终端（Ctrl+`）、Git可视化、文件Diff对比
断点调试（JS/TS/Python/C#等）、变量监视、调用栈
多光标编辑、代码片段、快捷键自定义、工作区设置

3. 插件生态（灵魂所在）

市场5万+插件，覆盖所有主流语言与框架。
典型插件：
- 前端：Volar（Vue）、ESLint、Prettier、JavaScript and TypeScript
- 后端：Python、Java Extension Pack、Go、C/C++
- 效率：Chinese（中文）、Code Runner、GitLens、Remote-SSH

二、主流同类软件

1. VS Code vs Sublime Text

VS Code ：免费、插件极多、内置调试/Git/终端、UI现代；缺点：大项目略占内存、启动稍慢。
Sublime Text ：启动极速、极简、大文件流畅、多光标顶级；缺点：收费（$99）、插件少、无内置调试/Git、更新慢。
结论：日常开发选VS Code；极速轻量查看/编辑超大文件选Sublime。

2. VS Code vs WebStorm（JetBrains）

VS Code ：免费、轻量、插件自由、前端/全栈友好；缺点：需配置插件、大型项目索引慢、重构能力弱。
WebStorm ：全能IDE、开箱即用 、智能重构、深度框架支持（React/Vue/Angular）、内置测试/部署；缺点：收费、笨重、内存占用高、启动慢。
结论：个人/小团队/快速开发选VS Code；企业级前端/大型项目选WebStorm。

3. VS Code vs Vim/Neovim

VS Code ：GUI友好、上手快、鼠标+键盘、生态强；缺点：依赖图形界面、纯键盘效率低于Vim。
Vim/Neovim ：终端运行、纯键盘极速 、高度自定义、资源占用极低；缺点：学习曲线极陡、配置复杂、GUI弱、插件零散。
结论：新手/ GUI偏好选VS Code；服务器/远程/极致键盘效率选Neovim（可搭配VS Code的Vim插件过渡）。

4. VS Code vs 重型IDE（IntelliJ IDEA/Eclipse/Visual Studio）

VS Code ：轻量、跨平台、多语言、免费；缺点：语言深度支持弱、重构/分析能力有限。
重型IDE ：语言专精（IDEA-Java、VS-C#）、项目级分析/重构/调试 、内置数据库/服务器/测试；缺点：笨重、收费（IDEA）、单语言强、跨平台差。
结论：多语言/脚本/前端/轻量后端选VS Code；单一语言企业级开发选对应重型IDE。

三、VS Code 高级用法

1. 快捷键大师（必背）

Ctrl+Shift+P：命令面板（万能入口，输入命令/切换功能）。
Ctrl+P ：快速打开文件（输文件名/@函数/#行号，如@init/#42）。
Ctrl+D：选中下一个相同词（批量修改变量名）。
Alt+单击：多光标定点（批量插入/修改）。
F2 ：重命名符号（变量/函数/类，跨文件自动更新引用）。
Ctrl+`：显示/隐藏集成终端。
Ctrl+Shift+O：当前文件内定位类/方法/属性。

2. 编辑与重构技巧

多光标批量编辑 ：
1. 选中多行 → Ctrl+Shift+L → 所有行末尾同时加光标（统一加分号/逗号）。
2. Alt+拖动鼠标：列选择（批量删除/插入列内容）。
代码折叠 ：
- Ctrl+K → Ctrl+0：折叠所有代码。
- Ctrl+K → Ctrl+J：展开所有代码。
智能重构 ：
- 选中代码 → Ctrl+Shift+R → 提取函数/变量/常量。
- 右键函数 → Change Signature → 修改参数并同步所有调用。

3. 终端与调试进阶

集成终端增强 ：
- 支持多终端拆分（右键→Split Terminal）。
- 选中命令 → Ctrl+Shift+Enter → 直接运行。
- 终端内Ctrl+点击文件名 → 跳转至VS Code打开。
断点调试高级玩法 ：
- 条件断点 ：断点右键→Edit Breakpoint→设置条件（如user.id===1），仅满足条件时暂停。
- 日志断点：不暂停，仅输出日志（适合生产环境调试）。
- 调试控制台：调试时直接执行代码、修改变量、调用函数。

4. Git 深度集成

可视化Diff ：左侧Git图标→点击文件→左右对比修改，直接编辑差异区。
暂存部分代码：选中代码→右键→Stage Selected Ranges（只提交部分修改）。
GitLens插件 ：显示每行代码的最后提交人/时间/信息，点击可查看完整历史与对比。

5. 远程开发（杀手锏）

Remote-SSH插件 ：本地VS Code直接连接远程Linux服务器，编辑/调试/运行远程代码，体验本地一致。
容器开发：Remote-Containers插件→在Docker容器中开发，环境隔离、即开即用。
WSL开发：Windows下通过WSL（Linux子系统）开发，无缝衔接Linux工具链。

6. 自定义与工作流优化

用户代码片段：
- Ctrl+Shift+P →输入snippets→选择语言→自定义模板（如输入rfc生成React函数组件）。
工作区设置：
- 项目根目录创建.vscode/settings.json→配置项目专属规则（如缩进2空格、禁用特定插件）。
主题与图标：
- 安装One Dark Pro（暗黑主题）、Material Icon Theme（文件图标），界面更美观、辨识度更高。

四、下载、安装

进入VS Code官网：https://code.visualstudio.com ，点击 DownLoad for Windows下载windows版本

备注：
- Stable：稳定版
- Insiders：内测版

注意：上述下载软件安装包的过程，大家可以不用操作，因为在提供的课程资料中，已经为大家准备好了安装包。

双击安装包，选择我同意此协议，再点击下一步

选择安装路径（也可以使用默认值: C:\Users\super\AppData\Local\Programs\Microsoft VS Code）

点击左下角的 "设置" -> "主题" -> "主题颜色"，然后可以根据自己的喜好，选择喜欢的主题颜色。

五、VS Code 常用插件

HTML CSS Support

在编写样式表的时候，自动补全功能大大缩减了编写时间。

JavaScript (ES6) code snippets

支持ES6语法提示

Mithril Emmet

一个能大幅度提高前端开发效率的一个工具，用于补全代码

Path Intellisense

路径提示插件

Vue 3 Snippets

在 Vue 2 或者 Vue 3 开发中提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。

Auto Close Tag

自动闭合HTML/XML标签

Auto Rename Tag

自动完成另一侧标签的同步修改

open in browser

低版本 vscode不像IDE一样能够直接在浏览器中打开html，而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件，支持自定义打开指定的浏览器，包括：Firefox，Chrome，Opera，IE以及Safari

Live Server

一个具有实时加载功能的小型服务器，也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。

Vue Language Features (Volar)

一个专门为 Vue 3 构建的语言支持插件。它基于@vue/reactivity按需计算一切，实现原生 TypeScript 语言服务级别的性能。

TypeScript Vue Plugin (Volar)

TypeScript Vue Plugin是一个对Vue.js框架进行扩展的插件，它允许开发者使用TypeScript语言编写Vue组件和应用程序，并提供了更好的类型检查和编辑器支持。通过使用TypeScript Vue Plugin，开发者可以在编写Vue应用时获得更好的开发体验和代码可维护性。

File Utils

File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录。

IntelliJ IDEA Keybindings

安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。

六、VS Code 配置

打开配置面板，根据自己的喜好，可以修改字体、背景样式等偏好设置。点击 "设置" 按钮。

然后点击右上角 "打开设置" 的图标。

然后在打开的 settings.json 中增加如下配置信息：

json 复制代码

{
  "workbench.colorTheme": "Default Light+",
  "workbench.statusBar.visible": false,
  "editor.fontFamily": "'Courier New', Consolas, monospace",
  "editor.fontSize": 15,
  "editor.lineHeight": 1.8,
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.minimap.enabled": true,
  "liveServer.settings.donotShowInfoMsg": true,
  "git.confirmSync": false,
  "terminal.integrated.defaultProfile.windows": "Command Prompt"
}

具体配置项的含义，鼠标放在配置项上，会自动悬浮展示出来。