1、View In Browser 在浏览器里预览网页必备。 2、vscode-icons 改变编辑器里面的文件图标，个人比较稀饭这个。其他的这里就不说了。 3、Bracket Pair Colorizer 给嵌套的各种括号加上不同的颜色。 4、Highlight Matching Tag 高亮对应的 HTML 标签 以及 标识出对应的各种括号。 5、Auto Rename Tag 自动修改匹配的 HTML 标签。 6、Auto Close Tag 自动标签闭合 7、Path Intellisense 智能路径提示，可以在你输入文件路径时智能提示。 8、Markdown Preview 实时预览 markdown。 9、stylelint CSS / SCSS / Less 语法检查 进价必备插件 10、Live Server 这个插件基本功能是预览网页，但它的特点是：会将网页在本地服务器上预览，最重要的是代码保存之后，浏览器自动刷新，有多方便不用我说了吧？ Open with live Server Alt+L Alt+O 在 HTML 文件上右键 打开 HTML 文件，点击编辑器右下角 Go Live 按钮 11、Prettier 格式化插件。有的人可能会推荐 Beautify。我原来也是一直用这个，后来发现这个并不能格式化 React 的代码。所以果断换成 Prettier。 12、carbon-now-sh 将代码分享为图片（图片的格式可以为 png 和 svg），最最最重要的是： 图片逼格敲高 ↓↓↓ 之所以将代码分享为图片，是因为如果直接分享代码，在有些地方代码格式可能会乱。 比如：你在评论区和别人交流代码，结果那个评论区做的很垃圾，粘贴上去的代码格式会很乱，有的代码甚至被解析了？所以是不是有必要将代码分享为图片呢？ 13、Codelf Codelf 是一个用来给变量命名的网站，你只要输入你想起的中文名，它就会给你提供很多建议的命名： 可能很多人知道有 Codeif 这么个网站，其实 VSCode 上有插件哦，是不是很神奇 : ) 14、Turbo Console Log 快捷添加 console.log，一键 注释 / 启用 / 删除 所有 console.log。 简直好用到犯规！ 简单说下这个插件要用到的快捷键: ctrl + alt + l 选中变量之后，使用这个快捷键生成 console.log alt + shift + c 注释所有 console.log alt + shift + u 启用所有 console.log alt + shift + d 删除所有 console.log 15、GitLens 详细的 Git 提交日志。 Git 重度使用者必备，尤其是多人协作时：哪一行代码，何时、何人提交都有记录。 16、Regex Previewer 实时预览正则表达式的效果。 17、css-auto-prefix 自动添加 CSS 私有前缀。 18、Change Case 转换命名风格。 19、CSS Peek 定位 CSS 类名。 20、vscode-json 处理 JSON 文件 21、HTML Boilerplate 虽然 VSCode 已经内置了一键生成 HTML 模板的快捷方式，但这个有另外的用处 22、settings sync 在不同电脑间同步你的插件。 安装了这么多插件，换了台电脑又得重新安装，所以，这个插件不考虑入手吗？ 23、React/Redux/react-router Snippets React 代码快捷生成。 24、Minify 压缩 HTML、CSS、JS 代码。 25、:emojisense: 快速挑选 Markdown 中的 Emoji。 26、TODO Highlight 高亮 TODO，FIXME、还可以自己配置要高亮的关键字。 我猜小伙伴们在跑代码时一定和我一样，经常打一些 TODO 标记吧？ 27、Icon Fonts 添加字体图标。 28、SVG View 预览 SVG。 29、px to rem 像素转 rem。 =========== 自带 Emmet插件 最新版集成了Emmet 2.0，在文件→首选项→设置可以开启或者关闭功能 快捷键 所有快捷键设置：文件→首选项→键盘快捷方式 1. 在当前行中间换行到下一行：ctrl+enter 2. 当光标点击到某一行时，默认选中全行，可以直接复制剪切 3. 直接删除某一行：shift+delete或者ctrl+shift+k 4. 多行光标选择：alt+鼠标左键 5. 自动生成html结构和meta声明：首先输入“!”，然后按tab键 6. 标签自动补全：tab键 7. 折叠所有代码：ctrl+k、ctrl+0 8. 拆分编辑器：ctrl+\ 查找框右边的3个参数分别为：区分大小写，全字匹配，使用正则 9. 跳转行号：ctrl+G 10. 添加函数注释：在函数上方输入“/**”，然后点击enter 11. 格式化：alt+shift+f 12. 注释：ctrl+/ 13. 全部保存：ctrl+k, 然后只按s一个键 14. 向上移动一行：alt+↑ 15. 向下移动一行：alt+↓ 16. 向上复制一行：alt+shift+↑ 17. 向下复制一行：alt+shift+↓ 18. 查找：ctrl+F 19. 替换：ctrl+H 20. 文件中查找：ctrl+shift+f 可以在打开的文件夹中搜索所有文件内容 21. 文件中替换：ctrl+shift+h 22. 转到定义：F12 23. 转到实现：ctrl+F12 24. 打开文件夹：ctrl+k, ctrl+o 25. 关闭文件夹：ctrl+k, 然后单按一个f 26. 选中一段代码，通过“ctrl+[”可以左移，“ctrl+]”可以右移 =========== PHP PHP Debug PHP Extension Pack #PHP扩展包 PHP Intellisense #PHP自动补全工具，只需要配置一个php.executablePath参数。比如我是"php.executablePath": "/usr/local/opt/php72/bin/php”, 仅是这样就可以启用插件功能了。 PHP Intellisense -Crane #PHP自动补全工具 =========== 特殊插件 ESLint 代码检查工具 ftp-simple FTP远程同步工具 Code Spell Checker 插件地址：https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker 此插件安装后就不用管就好了，在你代码中有单词拼写错误时，你就会发现它的好处，因为我们写代码毕竟都是大量的英文单词变量定义，插件还可以给出错误拼写单词的建议。 Auto Import 自动去查找、分析、然后提供代码补全。对于TypeScript和TSX，可以适用。 lit-html 在JavaScript/TypeScript的文件中，如果有使用到HTML标记，lit-html提供语法高亮和相应的补全支持。 npm Intellisense VSCode 插件可以在导入语句自动补全npm模块名称。 Import Cost 该插件会在行尾显示导入的包的大小。为了计算包大小，该插件要使用Webpack和babili-webpack-plugin。 highlight-matching-tag 这本来应该是VSCode应该默认提供的功能，高亮匹配的标签。 Color Highlight 直观展示你定义的颜色。 Debugger for Chrome 用Chrome来Debug你的JavaScript代码，或则其它支持Chrome Debugger协议的平台。