VS Code 安装文档一、VS Code 完整说明VS CodeVisual Studio Code是微软2015年推出的免费、开源、跨平台代码编辑器非重型IDE基于Electron框架开发底层用ChromiumNode.js兼顾轻量与强功能。1. 核心定位本质轻量级编辑器 → 可通过插件变身全功能IDE。三端覆盖Windows/macOS/Linux 全支持。免费商用MIT协议个人/公司永久免费。2. 内置核心能力开箱即用语法高亮、代码折叠、括号匹配、智能缩进IntelliSense智能提示变量/函数/参数集成终端Ctrl、Git可视化、文件Diff对比断点调试JS/TS/Python/C#等、变量监视、调用栈多光标编辑、代码片段、快捷键自定义、工作区设置3. 插件生态灵魂所在市场5万插件覆盖所有主流语言与框架。典型插件前端VolarVue、ESLint、Prettier、JavaScript and TypeScript后端Python、Java Extension Pack、Go、C/C效率Chinese中文、Code Runner、GitLens、Remote-SSH二、主流同类软件1. VS Code vs Sublime TextVS Code免费、插件极多、内置调试/Git/终端、UI现代缺点大项目略占内存、启动稍慢。Sublime Text启动极速、极简、大文件流畅、多光标顶级缺点收费$99、插件少、无内置调试/Git、更新慢。结论日常开发选VS Code极速轻量查看/编辑超大文件选Sublime。2. VS Code vs WebStormJetBrainsVS Code免费、轻量、插件自由、前端/全栈友好缺点需配置插件、大型项目索引慢、重构能力弱。WebStorm全能IDE、开箱即用、智能重构、深度框架支持React/Vue/Angular、内置测试/部署缺点收费、笨重、内存占用高、启动慢。结论个人/小团队/快速开发选VS Code企业级前端/大型项目选WebStorm。3. VS Code vs Vim/NeovimVS CodeGUI友好、上手快、鼠标键盘、生态强缺点依赖图形界面、纯键盘效率低于Vim。Vim/Neovim终端运行、纯键盘极速、高度自定义、资源占用极低缺点学习曲线极陡、配置复杂、GUI弱、插件零散。结论新手/ GUI偏好选VS Code服务器/远程/极致键盘效率选Neovim可搭配VS Code的Vim插件过渡。4. VS Code vs 重型IDEIntelliJ IDEA/Eclipse/Visual StudioVS Code轻量、跨平台、多语言、免费缺点语言深度支持弱、重构/分析能力有限。重型IDE语言专精IDEA-Java、VS-C#、项目级分析/重构/调试、内置数据库/服务器/测试缺点笨重、收费IDEA、单语言强、跨平台差。结论多语言/脚本/前端/轻量后端选VS Code单一语言企业级开发选对应重型IDE。三、VS Code 高级用法1. 快捷键大师必背CtrlShiftP命令面板万能入口输入命令/切换功能。CtrlP快速打开文件输文件名/函数/#行号如init/#42。CtrlD选中下一个相同词批量修改变量名。Alt单击多光标定点批量插入/修改。F2重命名符号变量/函数/类跨文件自动更新引用。Ctrl显示/隐藏集成终端。CtrlShiftO当前文件内定位类/方法/属性。2. 编辑与重构技巧多光标批量编辑选中多行 →CtrlShiftL→ 所有行末尾同时加光标统一加分号/逗号。Alt拖动鼠标列选择批量删除/插入列内容。代码折叠CtrlK → Ctrl0折叠所有代码。CtrlK → CtrlJ展开所有代码。智能重构选中代码 →CtrlShiftR→ 提取函数/变量/常量。右键函数 →Change Signature→ 修改参数并同步所有调用。3. 终端与调试进阶集成终端增强支持多终端拆分右键→Split Terminal。选中命令 →CtrlShiftEnter→ 直接运行。终端内Ctrl点击文件名→ 跳转至VS Code打开。断点调试高级玩法条件断点断点右键→Edit Breakpoint→设置条件如user.id1仅满足条件时暂停。日志断点不暂停仅输出日志适合生产环境调试。调试控制台调试时直接执行代码、修改变量、调用函数。4. Git 深度集成可视化Diff左侧Git图标→点击文件→左右对比修改直接编辑差异区。暂存部分代码选中代码→右键→Stage Selected Ranges只提交部分修改。GitLens插件显示每行代码的最后提交人/时间/信息点击可查看完整历史与对比。5. 远程开发杀手锏Remote-SSH插件本地VS Code直接连接远程Linux服务器编辑/调试/运行远程代码体验本地一致。容器开发Remote-Containers插件→在Docker容器中开发环境隔离、即开即用。WSL开发Windows下通过WSLLinux子系统开发无缝衔接Linux工具链。6. 自定义与工作流优化用户代码片段CtrlShiftP→输入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文件支持自定义打开指定的浏览器包括FirefoxChromeOperaIE以及SafariLive 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 UtilsFile 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}具体配置项的含义鼠标放在配置项上会自动悬浮展示出来。