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中增加如下配置信息：

{"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"}

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