前端VSCODE常用插件

新手刚入门VSCODE可以直接安装 常用插件所有的（避免你一安装VSCODE无从下手），直接上手入门编程之旅，后期根据自己的喜好添加或删除部份插件，大部整理在常用插件内是针对前端的

本文章会根据情况更新实用点的插件，也欢迎分享你们好用的前端插件名称

 

 

Settings Sync 同步git插件的，每次到新电脑安装软件，又不想重复安装之前N多插件的，就可以使用这个插件一口气同步过来即可

1、在VSCODE里先安装好软件，然后按F1在输入sync后同步一下，或F1选择down下载输入GIST ID的数值回车自动下载之前上传的配置

2、然后会弹出github登陆页面，登陆Github>右上角个人settings>Developer settings>personal access tokens>generate new token，输入名称，勾选Gist，提交

3、保存Github Access Token

4、回到vscode，顶部命令框输入Token（就是之前上面生成的一串代码），上传成功后会返回Gist ID，保存此Gist ID.

5、若需在其他机器上DownLoad插件的话，同样，Ctrl+Shift+P打开命令框，输入sync，找到Download settings，会跳转到Github的Token编辑界面，点Edit，regenerate token，保存新生成的token，在vscode命令框中输入此Token，回车，再输入之前的Gist ID，即可同步插件和设置。

 

Class autocomplete for HTML编写html代码的朋友们对html代码的一大体现就是重复，如果纯用手敲不仅累还会影响项目进度，这款自动补全插件真的很棒；

 

Open-In-Browser 调试工具 直接在浏览器中打开文件，此插件在快捷菜单中添加了在默认浏览器查看文件选项，以及在客户端（Firefox，Chrome，IE）中打开命令面板选项，使用方式：对着vscode打开的html文件，按右键选择  open in ***  一共有二个选择，default是打开默认的，另一个other是自定义打开的浏览器

 

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

 

HTML CSS Support让html标签上写class 智能提示当前项目所支持的样式，自动补全功能大大缩减了编写时间

 

Javascript (ES6) Code Snippets 常用的类声明、ES 模块声明、CMD 模块导入等（ES6语法提示），支持的缩写不下 20 种

 

JavaScript Snippet Pack针对js的插件，包含了js的常用语法关键字，很实用

 

Javascript Standard Style 针对JS严格模式格式化插件，严格自己写代码的规范

 

Auto Close Tag编写html代码的时候，写完开始标签，这款插件会自动补全结束标签，其实上面所说的html自动补全插件一个Tab就搞定了，不过有时也需要这款插件

 

Auto Rename Tag非常实用！要修改标签名称的时候自动修改结束标签，节省一半时间，提升效率，非常棒！

 

Path Intellisense路径提示器，文件路径自动补全！！

 

jQuery Code Snippets 自动提示jquery，如果是你一个重度JQ使用者，可以考虑安装

 

Bracket Pair Colorizer自动标识相匹配括号的颜色，有利于区分，webstorm的默认功能，VS Code里需要单独安装！

 

Prettify JSON 格式化JSON，有些没有排版好的JSON免去自己手动排列好。一键格式化效率还是很不错的

 

Beautify 格式化代码css/sass/less

 

Quokka调试工具插件，能够根据你正在编写的代码提供实时反馈，并能够预览变量的函数和计算值结果

使用方法：先进入你要调试的JS文件，按F1弹出输入框quokka  然后选择>start on current file 代表当前Js文件打开调试

如果选择>new javascript File 就是单独建立一个新的JS文件带调试功能，此插件还支持新建TypeScript超集 调试

 

CSS Peek使用此插件，你可以追踪至样式表中 CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时，选择“ Go to Definition 和 Peek definition ”选项，它便会给你发送样式设置的 CSS 代码

 

css-triggers 这个插件的亮点就是可以看到渲染的流程和理论…可以当做参考工具，这个只针对.css后缀名称有用，优先级 紫色先渲染》》黄色》绿色

 

Npm Intellisense 在webpack下配置npm包代依赖补全提示，在你引入任何 node_modules 里面的依赖包时提供智能提示和自动完成（安装了的npm都会有提示）

 

vetur 目前比较好的Vue语法高亮

 

fileheader顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间 按ctrl+alt+i出现注释

 

IntelliSense for CSS class names类名补全CSS，会自动扫描整个项目里面的 CSS 类名并在你输入类名时做智能提示（吃资源配置，要是你电脑配置低就不要安装）；

 

TODO Highlight这个插件能够在你的代码中标记出所有的 TODO 注释，以便更容易追踪任何未完成的业务。在默认的情况下，它会查找 TODO 和 FIXME 关键字。当然，你也可以添加自定义表达式。

 

Partial Diff 对比两段代码或文件，在VSCODE对文件按右键选择对比（记的要选择2二文件哦，不然不会显示出来对比）

 

 

选择配插件如下（进阶篇）

vscode-element-helper 饿了么UI组件提示，element组件是都会提示，如果你项目经常使用可以考虑添加，效率还是可以的

 

Cssrem 转换px单位到rem，并且可以输入px单位提示是否转换rem（主要用来输入单位提示转换rem）

 

Px to rem 互转单位插件，可以把PX和rem之间互相转换，上面的只是单向的，但是缺陷没有单个输入有提示转换的(alt+z)

 

HTML SCSS Support  scss的智能补全,支持在 html,ng,vue,.net等使用(布局局限具体看文档)--颜色提示会和css提示重复

 

SCSS IntelliSense 智能提醒SCSS

 

Scss2Css自动编译scss及压缩风格，自己配置一下Scss2Css.formats压缩风格和Scss2Css.targetDir输出路径

 

language-stylus       Stylus语法高亮和提示

 

MagicPython 非常好的Python语法提示插件；

 

Bootstrap 3 Snippets --- bootstrap必备提示语法

 

Bookmarks   给文件某个位置打标签,用来快速跳转的..不知道这个功能到现在为何没内置!!

 

VS Color Picker——拾色器，直接在某个图片或区域内取一个图像的色值，还是不错的插件

 

Project Manager 快速切换项目 适合有多个git项目的小伙伴,可以快速跳转,比如打开文件夹慢慢找快 N 倍

工程项目过多时，shift+cmd+p(shift+ctrl+p) 然后输入project，第一次选择edit Project编辑自己的工程项目，之后就可以直接选择open打开你的项目

新版本切换项目放到左侧栏去了。使用配置都差不多就不更换细节图了

 

Import Cost  允许您查看导入模块的大小。 这对 Webpack 等打包工具来说是一个巨大的帮助。 您可以查看是导入整个库还是仅导入特定实用程序。不足之处是它不显示自定义文件或模块的花销。

 

 

REST Client  作为Web开发人员，我们经常需要使用 REST API。为了检查URL并检查响应，使用 Postman 等工具。但是，当编辑器可以轻松完成相同的任务时，为什么还要使用不同的应用程序呢。欢迎使用 REST Client。它允许您在Visual Studio Code中直接发送 HTTP 请求并查看响应