前端开发VSCode工具必备的神仙插件推荐，本人开发亲测，好用的插件能帮助我们在写代码、开发过程中提高效率和规范等。

目录

1、VSCode简介

2、插件下载位置

2.1下载位置

2.2、查看已下载插件

3、神仙插件

3.1、Chinese（Simplified）

3.2、Vue-Official

3.3、vscode-pigments

3.4、SVN

3.5、Prettier-Code formatter

3.6、open in browser

3.7、Minify

3.8、JavaScript（ES6）code snippets

3.9、HTML Boilerplate

3.10、GitLens—Git supercharged

3.11、

---

前言

在前端开发的工作中，会经常用到VSCode代码编辑器，然后不同开发者的代码风格不同、为了满足不同开发者的需求，于是丰富的生态插件，帮助用户根据个人需求个性化配置编辑器。接下来我将推荐几个本人在开发时能提高效率规范的插件供参考。欧克，废话不多说正文开始：

1、VSCode简介

        Visual Studio Code（简称“VS Code” [1]）是Microsoft在2015年4月30日Build开发者大会上正式宣布一个运行于 Mac OS X、Windows和 Linux 之上的，针对于编写现代Web和云应用的跨平台源代码编辑器， [2]可在桌面上运行，并且可用于Windows，macOS和Linux。它具有对JavaScript，TypeScript和Node.js的内置支持，并具有丰富的其他语言（例如C++，C＃，Java，Python，PHP，Go）和运行时（例如.NET和Unity）扩展的生态系统。（上段文字来源于百度百科）。

2、插件下载位置

2.1下载位置

        打开vscode，在主界面左侧工具栏中找到并点击扩展（下图红框）或者使用快捷键 ctrl+shift+x 打开扩展模块，即可进行下载功能。

2.2、查看已下载插件

         打开vscode，在主界面左侧工具栏中找到并点击扩展，即可展示已安装和推荐安装的界面。

3、神仙插件

3.1、Chinese（Simplified）

        首先第一个Chinese 中文语言包是必备的，它能将界面翻译成中文，支持语法高亮、代码提示等。当然，如果本人更喜欢英文版，英文阅读毫无压力也可以按个人喜好来决定是否安装。

3.2、Vue-Official

        Vue-Official就是原先的Volar，现已改名，不需要安装Volar和TypeScript Vue Plugin (Volar)，安装这一个插件即可。

3.3、vscode-pigments

        在css对应的颜色参数下生成对应的背景颜色，实时展示css的颜色。

3.4、SVN

        通过SVN扩展,你可以在VSCode中使用SVN的各种功能,包括更新代码、提交代码、查看版本历史、比较文件等。

3.5、Prettier-Code formatter

        Prettier是一个代码格式化器。通过解析代码并使用自己的规则(考虑到最大行长度)重新打印代码，并在必要时包装代码，从而实现一致的风格。

3.6、open in browser

        在浏览器中打开html文件，并可设置默认浏览器。

3.7、Minify

        缩小js, css和html文件，以节省传输带宽。

3.8、JavaScript（ES6）code snippets

        它包含了vscode编辑器的ES6语法JavaScript代码片段(支持JavaScript和TypeScript)。

3.9、HTML Boilerplate

        这个扩展提供了所有web应用程序中使用的标准HTML样板代码。

3.10、GitLens—Git supercharged

        GitLens是一款增强VSCode内置Git功能的插件。它提供了Git blame注解和代码镜头功能，能够直观地显示代码作者和提交信息，方便开发者快速定位责任人。

3.11、CodeSnap

        代码截图工具，可将截图保存到本地，也可以Ctrl+C复制截的图,然后就可以Ctrl+V粘贴到其他应用程序里了。