VS Code 安装文档一、下载进入VS Code官网https://code.visualstudio.com点击DownLoad for Windows下载windows版本当然也可以点击旁边的箭头下载Windows版本 或 Mac OS 版本Stable稳定版Insiders内测版二、安装双击安装包选择我同意此协议再点击下一步选择安装路径点击下一步。也可以使用默认值: C:\Users\super\AppData\Local\Programs\Microsoft VS Code继续点击下一步可以勾选创建桌面快捷方式如果不想使用vscode作为代码默认打开方式可以取消将code注册为受支持的文件类型的编辑器点击下一步点击安装开始安装安装完成运行VS Code。三、VS Code插件安装VS Code提供了非常丰富的插件功能根据你的需要安装对应的插件可以大大提高开发效率。完成前端开发常见插件介绍1、Chinese (Simplified) Language Pack适用于 VS Code 的中文简体语言包安装完毕之后点击右下角的 Change Language and Restart 按钮重新启动服务。2、HTML CSS Support在编写样式表的时候自动补全功能大大缩减了编写时间。3、JavaScript (ES6) code snippets支持ES6语法提示4、Mithril Emmet一个能大幅度提高前端开发效率的一个工具用于补全代码5、Path Intellisense路径提示插件6、Vue 3 Snippets在 Vue 2 或者 Vue 3 开发中提供代码片段语法高亮和格式化的 VS Code 插件能极大提高你的开发效率。7、Auto Close Tag自动闭合HTML/XML标签8、Auto Rename Tag自动完成另一侧标签的同步修改9、open in browservscode不像IDE一样能够直接在浏览器中打开html而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件支持自定义打开指定的浏览器包括FirefoxChromeOperaIE以及Safari10、Live Server一个具有实时加载功能的小型服务器也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。11、Vue - Official一个专门为 Vue 3 构建的语言支持插件。12、File UtilsFile Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录。13、IntelliJ IDEA Keybindings安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。14、MarsCode AIMarsCode 是字节跳动豆包旗下的智能编程助手提供以智能代码补全为代表的核心能力支持主流编程语言及 IDE能在编码过程中提供单行或整个函数的建议同时支持在用户编码过程中提供代码解释、单测生成、问题修复、技术问答等辅助功能提升编码效率与质量。AI助手账号注册https://www.marscode.cn/home?utm_sourcemktutm_mediumcpaitcastutm_campaignhmcxy15、TONGYI Lingma通义灵码是一款基于通义大模型的智能编码辅助工具提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力并针对阿里云 SDK/API 的使用场景调优为开发者带来高效、流畅的编码体验。AI助手账号注册https://account.aliyun.com/register/qr_register.htm?spm5176.29741907.J_4VYgf18xNlTAyFFbOuOQe.d_register_1.e939154ab73d0joauth_callbackhttps%3A%2F%2Fwww.aliyun.com%2F四、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 }具体配置项的含义鼠标放在配置项上会自动悬浮展示出来。五、VS Code 快捷键
