VScode安装后的插件安装

杭州SEO：Chinese(Simplified) Language Pack for Visual Stidio Code 中文汉化包

对于一些英文不太好的小伙伴，上来第一件事肯定是要切换成中文语言环境，安装汉化包插件之后，按快捷键Ctrl+Shift+P调出命令面板，输入Configure Display Language，选择zh-ch，然后重启vs code即可。

open-in-browser 在浏览器中查看
VS Code没有提供直接在浏览器中运行程序的内置功能，所以我们需要安装此插件，在浏览器中查看我们的程序运行效果。

Live Server 实时预览
安装这个插件之后，我们在编辑器中修改代码，按Ctrl+S保存，修改效果就会实时同步，显示在浏览器中，再不用手动刷新。

Auto Close Tag 自动闭合标签
输入标签名称的时候自动生成闭合标签，特别方便。

Auto Rename Tag 尾部闭合标签同步修改
自动检测配对标签，同步修改。

Bracket Pair Colorizer 用不同颜色高亮显示匹配的括号
对配对的括号进行着色，方便区分，未安装该插件之前括号统一都是白色的。

Highlight Matching Tag 高亮显示匹配标签
这个插件自动帮我们将选中的匹配标签高亮显示，再也不用费劲查找了。

Vscode-icons VSCode 文件图标
此插件可以帮助我们根据不同的文件类型生成对应的图标，这样我们在侧边栏查看文件列表的时候直接通过图标就可以区分文件类型。

TODO Highlight 高亮
如果我们在编写代码时想在某个地方做一个标记，后续再来完善或者修改里面的内容，可以利用此插件高亮显示，之后可以帮助我们快速定位到需要修改的代码行。

Code Spell Checker 单词拼写检查
我们在编写代码的时候经常会不小心拼写错误造成软件运行失败，安装这个插件后会自动帮我们识别单词拼写错误并且给出修改建议，大大帮我们减轻了排除bug的压力。

Vetur VUE语言包
VUE是时下最流行的js框架之一，很多公司都会选择基于VUE来构建产品，Vetur对VUE提供了很好的语言支持。

Settings Sync VSCode设置同步到Gist

有时候我们到了新公司或者换了新电脑需要配置新的开发环境，这时候一个一个下载插件，再重新配置vs code就非常麻烦而且你还不一定记得那么全面，通过这个插件我们可以将当前vs code中的配置上传到Gist，之后再通过Gist下载，就可以将所有配置同步到新环境中了。

在Github首页点击头像，选择Settings进入设置页面。

点击左侧侧边栏Developer settings，进入开发者设置。

选择Personal access tokens，点击右侧Generate new token。

填写token名称，在下方勾选gist。

点击下方的Generate token按钮生成一个新的token。

将生成的新的token保存下来。

在vscode中安装Settings Sync插件，输入Ctrl+Shift+p输入Sync，选择更新/上传配置。

将github中生成的token输入，点击回车。

在控制台中自动生成一串id,之后便可以通过token和id进行配置同步。

输入Ctrl+Shift+p输入Sync，选择下载配置，输入token和id即可同步下载。

这篇文章中介绍的vs code配置已经全部同步到Gist，有需要的小伙伴可以下载一下。

token:b3c5f29c0e6f9f49b23b44ce89467226cd91c9c6
Id:338d5dfb6b7784c980250cffe8365899

可以在配置文件中选择是否自动上传和下载

"sync.removeExtensions": true,
 "sync.syncExtensions": true,
 "sync.autoDownload": true,
 "sync.autoUpload": true,
 "sync.gist": "338d5dfb6b7784c980250cffe8365899"

第二部分

CSS Peek

HTML CSS Support

Icon Fonts

Prettier - Code formatter

HTML Boilerplate

Color Info