VsCode的安装&实用插件

内容来自：@黑马程序员

一、下载

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

当然也可以点击旁边的箭头，下载Windows版本 或 Mac OS 版本

二、安装

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

• 

• 选择安装路径（也可以使用默认值: C:\Users\super\AppData\Local\Programs\Microsoft VS Code），点击下一步 。

• 

• 继续点击下一步

• 

• 勾选创建桌面快捷方式，如果不想使用vscode作为代码默认打开方式，可以取消将code注册为受支持的文件类型的编辑器，点击下一步

• 

• 点击安装，开始安装

• 

• 

• 安装完成，运行VS Code。

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

• 

三、VsCode插件安装

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 browser

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

10、Live Server

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

11、Vue - Official

一个专门为 Vue 3 构建的语言支持插件。

12、File Utils

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

13、IntelliJ IDEA Keybindings

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

14、MarsCode AI

MarsCode 是字节跳动豆包旗下的智能编程助手，提供以智能代码补全为代表的核心能力，支持主流编程语言及 IDE，能在编码过程中提供单行或整个函数的建议，同时支持在用户编码过程中提供代码解释、单测生成、问题修复、技术问答等辅助功能，提升编码效率与质量。

AI助手账号注册：https://www.marscode.cn/home?utm_source=mkt&utm_medium=cpaitcast&utm_campaign=hmcxy

15、TONGYI Lingma

通义灵码，是一款基于通义大模型的智能编码辅助工具，提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力，并针对阿里云 SDK/API 的使用场景调优，为开发者带来高效、流畅的编码体验。

AI助手账号注册：https://account.aliyun.com/register/qr_register.htm?spm=5176.29741907.J_4VYgf18xNlTAyFFbOuOQe.d_register_1.e939154ab73d0j&oauth_callback=https%3A%2F%2Fwww.aliyun.com%2F

四、VsCode配置

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

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

然后在打开的 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"
}

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