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组件，自动生成配套的文件，简直不要太爽

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/164339.html原文链接：https://javaforall.cn