VS Code
安装文档
一、下载
进入
VS Code
官网:
https://code.visualstudio.com
,点击
DownLoad for Windows
下载
windows
版本
![](https://img-blog.csdnimg.cn/direct/213819ffe06e4a8182b19dd2ff26f59f.png)
当然也可以点击旁边的箭头,下载
Windows
版本 或
Mac OS
版本
Stable
:稳定版
Insiders
:内测版
二、安装
![](https://img-blog.csdnimg.cn/direct/7e1de44a37144384a41bbfc568ddd13f.png)
![](https://img-blog.csdnimg.cn/direct/51aa28feceb942e0acf3731afcc0ea85.png)
选择安装路径,点击下一步 。也可以使用默认值:
C:\Users\super\AppData\Local\Programs\Microsoft VS Code
C:\Users\super\AppData\Local\Programs\Microsoft VS Code
![](https://img-blog.csdnimg.cn/direct/2142c22ff4bb48ceabd7746ab209aca9.png)
继续点击下一步
![](https://img-blog.csdnimg.cn/direct/6e46657161cf4d28af3aaba6328579eb.png)
可以勾选创建桌面快捷方式,如果不想使用vscode作为代码默认打开方式,可以取消
将code注册为受支持的文件类型的编辑器,点击下一步
![](https://img-blog.csdnimg.cn/direct/08a3cc89dbb846b7b61ff9b0251fa985.png)
点击安装,开始安装
![](https://img-blog.csdnimg.cn/direct/4568bed293ad40d8a5e6b027dbd45cb2.png)
![](https://img-blog.csdnimg.cn/direct/673101b8734f4350b09ca4ad48ebbcd0.png)
![](https://img-blog.csdnimg.cn/direct/c32bed5ed9b749e39dbbda11eb77ca65.png)
安装完成,运行VS Code
![](https://img-blog.csdnimg.cn/direct/a78d6f809c04432683ac18868b518d14.png)
三、VS Code插件安装
VS Code提供了非常丰富的插件功能,根据你的需要,安装对应的插件可以大大提高开发效率。
![](https://img-blog.csdnimg.cn/direct/28a7c15b0eb84a3ab3a295c9e34a1c4c.png)
四、前端开发常见插件
1、Chinese (Simplified) Language Pack
适用于 VS Code 的中文(简体)语言包
适用于 VS Code 的中文(简体)语言包
![](https://img-blog.csdnimg.cn/direct/4883e3b837f44633a736f37ab47796dd.png)
2、Code Spell Checker
拼写检查器。比如 banana 单词写错成 banane ,会提示你是否修改成 banana ,也可以将
banane 添加至检查器的字典中。
banane 添加至检查器的字典中。
![](https://img-blog.csdnimg.cn/direct/570d76e3c47d4bd9986adaab10bb7f8a.png)
3、HTML CSS Support
在编写样式表的时候,自动补全功能大大缩减了编写时间。
![](https://img-blog.csdnimg.cn/direct/020addbad08a4547bf5f19879b470d15.png)
4、JavaScript (ES6) code snippets
支持ES6语法提示
![](https://img-blog.csdnimg.cn/direct/99f3957b4d504b9284d58c7b9702267d.png)
5、Mithril Emmet
一个能大幅度提高前端开发效率的一个工具,用于补全代码
![](https://img-blog.csdnimg.cn/direct/f037b9f6c2c44038a95278f02da62ef6.png)
6、Path Intellisense
路径提示插件
![](https://img-blog.csdnimg.cn/direct/67379997e0e940bfa67bee336b3775a8.png)
7、Vue 3 Snippets
在 Vue 2 或者 Vue 3 开发中提供代码片段,语法高亮和格式化的 VS Code 插件,能极大提高你
的开发效率。
的开发效率。
![](https://img-blog.csdnimg.cn/direct/0785bc1caf6c40ff82eef2ddb0f05f8a.png)
8、VueHelper
vscode最好的vue代码提示插件,不仅包括了vue2所有api,还含有vue-router2和vuex2的代码
![](https://img-blog.csdnimg.cn/direct/74b14376b26e44aa8041b525e7da45fe.png)
9、Auto Close Tag
自动闭合HTML/XML标签
![](https://img-blog.csdnimg.cn/direct/7b126037c54944a3b4e0dcf530c87645.png)
10、Auto Rename Tag
自动完成另一侧标签的同步修改
![](https://img-blog.csdnimg.cn/direct/0d58593460c143a382b03bdcfac8ba3e.png)
11、Beautify
格式化 html ,js,css
![](https://img-blog.csdnimg.cn/direct/3896f1f58d9a449390cd757182d02958.png)
安装过程中, 如果提示是否需要继续安装, 选择 "仍要安装"。
12、Bracket Pair Colorizer
给括号加上不同的颜色,便于区分不同的区块,使用者可以定义不同括号类型和不同颜色
![](https://img-blog.csdnimg.cn/direct/d9d3302d93e24ccba661efe31aadd2b8.png)
安装过程中, 如果提示是否需要继续安装, 选择 "仍要安装"。
13、open in browser
vscode不像IDE一样能够直接在浏览器中打开html,而该插件支持快捷键与鼠标右键快速在浏览器中打开html文件,支持自定义打开指定的浏览器,包括:Firefox,Chrome,Opera,IE以及Safari
![](https://img-blog.csdnimg.cn/direct/0313f9389e554582a511552a9c582040.png)
14、Vetur
Vue多功能集成插件,包括:语法高亮,智能提示,emmet,错误提示,格式化,自动补全,
debugger。vscode官方钦定Vue插件,Vue开发者必备。
debugger。vscode官方钦定Vue插件,Vue开发者必备。
![](https://img-blog.csdnimg.cn/direct/e1de9576d1954fb4a6fe0fc308f28f91.png)
15、File Utils
File Utils插件,可以方便快捷的来创建、复制、移动、重命名文件和目录。
![](https://img-blog.csdnimg.cn/direct/5dcb06f55ff441d09e4b1016883efa4f.png)
16、IntelliJ IDEA Keybindings
安装VSCode的插件 IntelliJ IDEA Keybindings 即可在VSCode中使用IDEA的快捷键。
![](https://img-blog.csdnimg.cn/direct/0294e1f4a5904ec99ec8ec09caf7f5e1.png)
五、VS Code 配置
打开配置面板,根据自己的喜好,可以修改字体、背景样式等偏好设置
![](https://img-blog.csdnimg.cn/direct/d86d016aeb014f719a35b94c684d7431.png)
六、VS Code 快捷键
英文:
![](https://img-blog.csdnimg.cn/direct/af716ef2771a47c792ffc47efc7aa093.png)
中文:
![](https://img-blog.csdnimg.cn/direct/d77dc153851043a5af1a3f5e8bdb07da.png)