VSCode 前端常用插件集合

Visual Studio Code 是由微软开发的一款免费、跨平台的文本编辑器。由于其卓越的性能和丰富的功能，它很快就受到了大家的喜爱。

但工欲善其事必先利其器，以下是本人为前端开发收集的常用的vscode插件，有需要的话赶紧mark起来吧~

一、下载

vscode官网：https://code.visualstudio.com/

解决vscode下载很慢的问题

1. 在官网根据自己电脑 点击下载
   
   

2.下载时可以去浏览器的下载内容里面，看到正在下载的vscode，然后点击上面的链接，会发生跳转



2. 然后在浏览器上的地址上会发现这个链接，这个时候直接复制 vscode.cdn.azure.cn 替换地址上面的

会发现速度起飞，这里用vscode.cdn.azure.cn 是采用的国内镜像，直接起飞

二、安装插件的方法

1. 使用 ctrl + shift + x
2. 使用 Ctrl+P , 输入 ext install xxxx ，搜索要安装的插件，点击安装按钮即可
3. 点击扩展图标，如下图

三、常用插件

（1）Chinese (Simplified) Language Pack for Visual Studio Code

软件汉化

（2）Auto Close Tag

自动闭合HTML/XML标签

效果：

（3）Auto Rename Tag

自动完成另一侧标签的同步修改

效果：

（4）Bracket Pair Colorizer

给嵌套的各种括号加上不同的颜色

效果：

（5）Path Intellisense

智能路径提示，可以在你输入文件路径时智能提示

效果：

（6）HTML Snippets

HTML代码片段，该插件可为你提供html标签的代码提示，不用键入尖括号了

效果：

（7）filesize

效果：

（8）Prettier - Code formatter

保存的时候自动格式化代码

（9）JavaScript(ES6) code snippets

ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间

四、VUE插件

（1）Vetur

Vue多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。vscode官方钦定Vue插件，Vue开发者必备。

效果：

（2）EsLint

语法纠错

效果：

五、微信小程序插件

（1）wechat-snippet

微信小程序代码辅助,代码片段自动完成

（2）minapp

• 微信小程序标签、属性的智能补全（同时支持原生小程序、mpvue 和 wepy 框架，并提供 snippets）
• 需要输入<才会触发标签补全
• 输入空格会触发对应标签的属性补全

（3) wxapp-helper

选择创建wx组件，自动生成配套的文件，简直不要太爽