VSCode常用插件汇总

article/2025/10/5 11:16:21

这篇博客主要是我使用vscode过程中的插件汇总，使用了这么长时间，总想有个总结，也方便日后查看，这里我将我使用的插件分为基础、框架、工具三个类型。

官网地址

VSCode插件官网地址，里面有很多的插件可以使用。

基础插件

这部分插件主要是和html、css、js有关的。

html CSS Support

这个插件支持以下语言，提供基础的语法知识编写辅助。

这是插件地址

html
laravel-blade
razor
vue
pug
jade
handlebars
php
twig
md
nunjucks
javascript
javascriptreact

HTML Snippets

这个插件主要是针对html的语法的，支持以下标签，插件地址

html5的全部标签
标签含义信息提示
一些描述性的语法

HTMLHint

这个插件提供html的编写提示，包括到属性的格式监测，语法细致监测纠正，非常好的。插件地址

htmlhint

stylelint

这个插件是有个css，sass,less的语法监测。插件地址

[外链图片转存失败(img-ej0M6HsR-1565668009858)(https://github.com/shinnn/vscode-stylelint/raw/master/screenshot.png)]

JavaScript (ES6) code snippets

这个插件就是js方面的内容，主要提供以下支持，插件地址

JavaScript (.js)
TypeScript (.ts)
JavaScript React (.jsx)
TypeScript React (.tsx)
Html (.html)
Vue (.vue)

ESLint

这个是有关js的语法监测插件，也很棒。插件地址

Latest TypeScript and Javascript Grammar

这个插件提供最新的TypeScript和Javascript语法，可以看一下。插件地址

typescript语法支持
JavaScript语法支持

markdownlint

这个是提供markdown语法监测的插件，非常好用，帮助你养成良好的markdown编写风格。插件地址

框架插件

这部分插件主要是和各个框架有关的插件，比如jquery,bootstrap,vue等ui框架，html模板引擎和js框架。

EJS language support

这是一个非常好用的html模板引擎插件，提供ejs的用法。

插件地址

if
for
插值
…

jQuery Code Snippets

虽然jQuery诞生于2006年，距今已有13年历史，但是还是有很多人在使用，所以也推荐一下。插件地址

提供以下方法：

jQuery Code Snippets

func
jqAfter
jqAjax
jqAjaxAspNetWebService
jqAppend
jqAppendTo
jqAttrGet
jqAttrRemove
jqAttrSet
jqAttrSetFn
jqAttrSetObj
jqBefore
jqBind
jqBindWithData
jqBlur
jqChange
…

vetur

这个是vuejs官方团队的一名成员写的有关vuejs语法的插件，强力推荐。插件地址

Syntax-highlighting
Snippet
Emmet
Linting / Error Checking
Formatting
Auto Completion
Debugging

Vue 2 Snippets

这个也是vue的语法插件，也作为补充插件。插件地址

Vue 2 Snippets

工具插件

这部分插件主要是日常工作过程中的一些工程化编译，构建还有辅助等工具，辅助编程。

Auto Rename Tag

这是一款有关html标签的工具，具有自动重命名标签的功能，插件地址

[外链图片转存失败(img-i9bOpBUU-1565668009862)(https://github.com/formulahendry/vscode-auto-rename-tag/raw/master/images/usage.gif)]

Beautify

这是一款代码格式化的插件，可以对你写的代码进行格式调整，使得代码易读，规整，好看。插件地址

cssrem

这是一款有关css的px和rem转换的工具插件，方便移动端网页设计稿开发。插件地址

[外链图片转存失败(img-ruajzoSz-1565668009863)(https://github.com/cipchk/vscode-cssrem/raw/master/screenshots/cssrem.gif)]

Document This

这是一款给js函数方法添加参数注解的插件。插件地址

[外链图片转存失败(img-LsWFfuQp-1565668009864)(https://github.com/joelday/vscode-docthis/raw/master/images/demo.gif)]

filesize

这是一款计算每个文件大小的插件，方便你对你的代码量进行可视化观察，及时缩小代码量，提供代码质量。插件地址

JSON Tools

这是一款有关json数据格式化的插件，可以压缩和解压格式化json代码。插件地址

Ctrl(Cmd)+Alt+M,格式化json数据
Alt+M，压缩json数据

Live Server

这是一款可以提供http协议服务的插件，可以使用http进行访问本地网页,而且是实时更新内容。插件地址

[外链图片转存失败(img-PCLWlcRo-1565668009865)(https://github.com/ritwickdey/vscode-live-server/raw/master/images/Screenshot/vscode-live-server-animated-demo.gif)]

Material Icon Theme

这是一款Material主题风格的图标插件，涵盖了大多数文件对应的图标，非常容易识别确认。插件地址

[外链图片转存失败(img-BNHltqgR-1565668009866)(https://raw.githubusercontent.com/PKief/vscode-material-icon-theme/master/images/fileIcons.png)]

Minify

这是一款代码压缩插件，可以对html,css,js代码进行压缩，就像webpack打包工具那样压缩你的代码，使代码体积变小，打开速度加快。插件地址

默认是压缩以后，生成一个原来名字后加.的文件，里面是压缩后的代码,比如：example.html压缩后的名字变为example.min.html。

npm

这个插件主要是用来管理npm包的，可以在编辑器内下载，安装，查询，卸载npm包，非常方便。插件地址

npm

open in browser

这个插件是在默认游览器打开你的网页，可以预览，但是需要手动刷新内容。插件地址

open in browser

Path Intellisense

这个插件具有自动补全功能，非常方便。插件地址

Path Intellisense

Sass

这个插件是一个sass编译工具，方便书写sass代码。插件地址

Sass

Sass Lint

这个是和sass配套的一个插件，检查sass语法是否正确，插件地址

vscode-fileheader

这个插件可以在文档顶部插入一段说明注释，非常便于你查看当日写了哪些内容，插件地址

vscode-fileheader

webpack

这个插件是一个webpack的辅助工具，可以创建webpack配置文件的，还有babel编译帮助功能,插件地址

webpack

最后

这就是我日常使用的一些vscode的插件，在此作为一个汇总，方便日后查看。