Visual Studio Code（vscode）安装和插件安装

Visual Studio Code，简称vscode，在笔者看来，是前端开发的神器，它可以安装很多插件帮助开发者提高效率和体验。

获取链接：Visual Studio Code - Code Editing. Redefined

选择操作系统，点击按钮下载即可

安装过程中，软件尽量别装C盘。其它选项，比如是否创建桌面快捷方式，根据自己的需求选择就行。

安装插件：

vscode默认语言是英文，我们可以添加中文插件。

搜索之后，点击Intall安装

HTML开发中需要的插件，仅供参考

1.  Chinese (Simplified) (简体中文) Language Pack for Visual Studio Code：  中文插件，安装之后需要重启编辑器才会生效
2. HTML Snippets：HTML代码提示
3. HTML CSS Support：提供HTML，Css支持
4. Class autocomplete for HTML：在HTML代码中，自动提示类名
5. Auto Close Tag：自动闭合标签
6. Auto Rename Tag：更改标签时，自动更改配对标签
7. Auto-Save on Window Change：当窗口变化的时候自动保存代码，在写完代码之后，是否经常忘记保存，有了它，切换到浏览器预览的时候能自动保存了
8. Bracket Pair Colorizer：多重括号，中括号，花括号的时候使用不同颜色显示
9. JavaScript (ES6) code snippets：js代码提示
10. jQuery Code Snippets：jQuery代码提示，写jQuery的朋友可以添加
11. open in browser：在浏览器中打开HTML文件
12. live server：在浏览器中打开
13. Beautify：一个很好用的代码格式化样式
14. Path Intellisense：文件路径提示

主题文件插件：

vscode吸引我的另一个原因，就是它众多的主题插件和文件图标插件了。介绍一下笔者常用的插件和设置方式。

界面左下方的齿轮状按钮，点击之后就可以设置您想设置的内容了。

1、颜色主题

1. Atom One Dark Theme
2. Luke Dark Theme
3. One Dark Pro
4. Eva Theme

这几款是颜色主题，具体的样式，还需要各位看官移步vscode自行体验。可以手动点击设置，也可以使用快捷键 Ctrl+K Ctrl+T，按住Ctrl，先K再T，之后选择主题设置

 

2、文件图标主题

Material Icon Theme：文件图标主题，设置方式在左下角的齿轮，点击文件图标主题，设置为它就行。

 

3、产品图标主题

Material Product Icons：产品图标主题，设置方式和上面一样，选择产品图标主题设置即可。