经历：

最近sublime和webstorm的***频频失效，经常在关键时候掉链子，深有体会，刚好身边有朋友也有使用VS code，对比atom,sublime,webstorm这些编辑器，个人觉得VS code是一款不错编辑器，比sublime插件多，比Atom的界面好看，比webstorm更轻量级。可谓聚齐各家优点于一身，关键还免费免费免费，再也不用为编辑器付费而困扰，还有向右大大看齐

Settings Sync

同步配置，再不同主机上，一劳永逸

在GitHub上创建gist
在设置里面配置gist命牌即可

好消息，一键下载怎么多插件想不想学（搞得像推销一样，哈哈）

下载Settings Sync插件后重启 ctrl + shift + p 然后输入sync 然后选择高级选项 → 从公共配置里下载gist 然后在按ctrl + shift + p 输入sync 选择下载配置复制这串代码进去 d3bc45d8096f6bc3d9d46c69ed7052cd OK，完事（可能还有一些人看不懂，过后传GIF操作图，我先溜了）

HTML Snippets

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

Atom Keymap

Sublime Text Keymap and Settings Importer

IntelliJ IDEA Keybindings

快捷键习惯替换（选一，多个会冲突）

Color-Highlight

在编辑器中高亮显示颜色。

Guides

代码的标签对齐线。

HTML CSS support

css 自动补齐

Npm Intellisense

在import语句中自动完成npm模块引入的代码插件

Debugger for Chrome

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

beautify

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

Auto Close Tag

自动闭合HTML标签

###Auto Rename Tag 修改HTML标签时，自动修改匹配的标签

Bracket Pair Colorizer

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

Open-In-Browser

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

Live Server

用于服务器端页面的Live Server，如PHP

IntelliSense for CSS class names

CSS类名智能命名提示

JavaScript (ES6) code snippets

ES6语法提示

Git History

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

CSS Peek

能在源代码中的字符串中找到对应的css（类和ID）。显示在那个css文件里，还有在第几行。

Vue插件

vetur

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

    "vetur.format.defaultFormatter.html": "js-beautify-html", //vue中HTML部分格式化
复制代码

Vue 2 Snippets

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

vscode-element-helper

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

Quiet Light

vsc常用快捷键：同时打开多个窗口（查看多个项目）

打开一个新窗口： Ctrl+Shift+N 关闭窗口： Ctrl+Shift+W 同时打开多个编辑器（查看多个文件）

新建文件 Ctrl+N 历史打开文件之间切换 Ctrl+Tab，Alt+Left，Alt+Right 切出一个新的编辑器（最多3个）Ctrl+\，也可以按住Ctrl鼠标点击Explorer里的文件名左中右3个编辑器的快捷键Ctrl+1 Ctrl+2 Ctrl+3 3个编辑器之间循环切换 Ctrl+` 编辑器换位置，Ctrl+k然后按Left或Right 格式调整

代码行缩进Ctrl+[， Ctrl+] 折叠打开代码块 Ctrl+Shift+[， Ctrl+Shift+] Ctrl+C Ctrl+V如果不选中，默认复制或剪切一整行代码格式化：Shift+Alt+F，或Ctrl+Shift+P后输入format code 修剪空格Ctrl+Shift+X 上下移动一行： Alt+Up 或 Alt+Down 向上向下复制一行： Shift+Alt+Up或Shift+Alt+Down 在当前行下边插入一行Ctrl+Enter 在当前行上方插入一行Ctrl+Shift+Enter 光标相关

移动到行首：Home 移动到行尾：End 移动到文件结尾：Ctrl+End 移动到文件开头：Ctrl+Home 移动到后半个括号 Ctrl+Shift+] 选中当前行Ctrl+i（双击）选择从光标到行尾Shift+End 选择从行首到光标处Shift+Home 删除光标右侧的所有字Ctrl+Delete Shrink/expand selection： Shift+Alt+Left和Shift+Alt+Right Multi-Cursor：可以连续选择多处，然后一起修改，Alt+Click添加cursor或者Ctrl+Alt+Down 或 Ctrl+Alt+Up 同时选中所有匹配的Ctrl+Shift+L Ctrl+D下一个匹配的也被选中(被我自定义成删除当前行了，见下边Ctrl+Shift+K) 回退上一个光标操作Ctrl+U 重构代码

跳转到定义处：F12 定义处缩略图：只看一眼而不跳转过去Alt+F12 列出所有的引用：Shift+F12 同时修改本文件中所有匹配的：Ctrl+F12 重命名：比如要修改一个方法名，可以选中后按F2，输入新的名字，回车，会发现所有的文件都修改过了。跳转到下一个Error或Warning：当有多个错误时可以按F8逐个跳转查看diff 在explorer里选择文件右键 Set file to compare，然后需要对比的文件上右键选择Compare with 'file_name_you_chose'. 查找替换

查找 Ctrl+F 查找替换 Ctrl+H 整个文件夹中查找 Ctrl+Shift+F

参考文档： VS Code 使用小技巧

VS code 插件推荐

经历：