俗话说的好，工欲上其事必先利器，有了vscode的更好的开发工具，那肯定要配上更好的发动引擎（vscode插件）。废话不多说，现在来介绍几款常用vscode插件，让我们的开发更具有速度。

1.基础类：

Chinese (Simplified) Language Pack for Visual Studio Code

描述：这个不多介绍，就是一个中文语言包，必装，如果喜欢初始vscode自带英文那也可以

Vetur

描述：用vue必装

Vue Peek

描述：点击父组件快速导航到vue子组件

open in browser

描述：可以直接打开html文件

Beautify

描述：可以美化高亮 javascript, JSON, CSS, Sass, and HTML 在 Visual Studio Code里.

carbon-now-sh

描述：源代码语法高亮插件

Code Runner

描述：运行多种语言的代码片段或代码文件，详细看安装好后的描述使用

CSS Peek

描述：扩展了HTML和ejs代码编辑

Debugger for Chrome

描述：在vscode里调试运行在谷歌浏览器里的代码

File Peek

描述：此扩展扩展了Typescript和Javascript代码编辑，支持在源代码中的字符串中找到的文件名

filesize

描述：显示当前文件大小，可以为优化提供一些帮助

Image preview

描述：引入图片左侧导航条显示图像预览，好用很强大

Import Cost

描述：在编辑器中显示导入包的大小，可配置

javascript console utils

描述：快捷键快速打log，很好用Cmd+Shift+L

Path Autocomplete

描述：路径自动补全，很强大

Path Intellisense

描述：同上，差不多的功能

Prettier - Code formatter

描述：VS Code包使用Prettier格式化您的JavaScript / TypeScript / CSS

Sass

描述：用Sass必装

Search node_modules

描述：搜索快速导航和打开文件node_modules的某个包位置

2.小程序类：

wpy-beautify

描述：wepy美化高亮工具

小程序助手

描述：对小程序项目的 .wxss和.wxml类别文件进行识别高亮

minapp

描述：对小程序项目的 .wxss和.wxml类别文件进行识别高亮

vscode wxml

描述：为 VSCode 提供 wxml 语法支持及代码片段

3.git开发工具类

Git History

描述：git历史，搜索，log等等

Git Project Manager

描述：git的项目管理，VSCode窗口打开一个面向git存储库的新窗口

GitLens — Git supercharged

描述：可以帮助我们通过Git注释和代码镜头一目了然地查看代码作者身份，无缝导航和Git探索，特别是团队协作好用，看到代码原作者

终极杀器：

Syncing

描述：很多人怕换电脑或者重装后插件重新一个个下载很麻烦，此扩展会用GitHub绑定一个id保存上传插件信息，然后新电脑用此id可以全部下载之前的配置插件，就无需一个个去找

vscode用了3年多了， 非常推荐给大家，所以也就整理了下vscode的常用相关插件

以上插件基本可以覆盖目前前端开发的需求，也是整合了之前别人的一些推荐插件，拿出一些使用频率比较高插件推荐给大家

作者：午夜程序男

链接：https://juejin.im/post/5d300d5ff265da1b7004e0c1

来源：掘金