序言

经历：
最近sublime和webstorm的序列号频频失效，经常在关键时候掉链子，深有体会，
刚好有个机会接触到VS code，然后才发现身边一些人开始用VS code，atom,sublime,webstorm这些编辑器，各用过有一段时间，个人觉得VS code越来越占优势，比sublime开源多，比Atom的界面好看，比webstorm更轻量级。可谓聚齐各种优点于一身，关键还免费 免费 免费，vue作者现在也转向VS code，想必VS code有些过人之处，
尝试VS code插件，个人觉得好用就分享一下

image.png

HTML Snippets

超级实用且初级的 H5代码片段以及提示

Debugger for Chrome

让 vscode 映射 chrome 的 debug功能，静态页面都可以用 vscode 来打断点调试

background

设置背景

beautify

在Visual Studio代码中美化JavaScript，JSON，CSS，Sass和HTML。

Auto Close Tag

自动闭合HTML标签

Auto Rename Tag

修改HTML标签时，自动修改匹配的标签

Bracket Pair Colorizer

让括号拥有独立的颜色，易于区分

Open-In-Browser

由于 VSCode 没有提供直接在浏览器中打开文件的内置界面，所以此插件可以打开命令面板选项。

Indenticator

缩进高亮

IntelliSense for CSS class names

CSS类名智能命名提示

JavaScript (ES6) code snippets

ES6语法提示

Path Intellisense

编辑器中输入路径时,自动补全

Git History

查看和搜索git日志以及图表和细节。查看文件的前一个副本。查看和搜索历史

CSS Peek

自动查找CSS文件

Vue插件

vetur

语法高亮、智能感知、Emmet
注意vue文件代码格式化，需要在首选项-设置-用户设置添加这行代码

    "files.autoSave": "afterDelay",             // 个人爱好配置
    "editor.fontSize": 16,                     // 个人爱好配置
    "editor.formatOnSave": true,               // 个人爱好配置
    "vetur.format.defaultFormatter.html": "js-beautify-html",      // vue文件格式化代码
    "workbench.colorTheme": "Dracula Soft",          //第三方主题

Vue 2 Snippets

基于最新的 Vue 官方语法高亮文件添加了语法高亮，并且依据 Vue 2 的 API 添加了代码补全

vscode-element-helper

Element-UI 库代码提醒
主题推荐：浅色调

Brackets Light Pro

Brackets Light Pro.png

Quiet Light

image.png