文章目录
*
– 官网地址
– 基础插件
–
+ html CSS Support
+ HTML Snippets
+ HTMLHint
+ stylelint
+ JavaScript (ES6) code snippets
+ ESLint
+ Latest TypeScript and Javascript Grammar
+ markdownlint
– 框架插件
–
+ EJS language support
+ jQuery Code Snippets
+ vetur
+ Vue 2 Snippets
– 工具插件
–
+ Auto Rename Tag
+ Beautify
+ cssrem
+ Document This
+ filesize
+ JSON Tools
+ Live Server
+ Material Icon Theme
+ Minify
+ npm
+ open in browser
+ Path Intellisense
+ Sass
+ Sass Lint
+ vscode-fileheader
+ webpack
– 最后
这篇博客主要是我使用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的编写提示，包括到属性的格式监测，语法细致监测纠正，非常好的。插件地址
; 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年历史，但是还是有很多人在使用，所以也推荐一下。插件地址
提供以下方法：
- 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的语法插件，也作为补充插件。插件地址
; 工具插件
这部分插件主要是日常工作过程中的一些工程化编译，构建还有辅助等工具，辅助编程。
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包，非常方便。插件地址
; open in browser
这个插件是在默认游览器打开你的网页，可以预览，但是需要手动刷新内容。插件地址
; Path Intellisense
这个插件具有自动补全功能，非常方便。插件地址
; Sass
这个插件是一个sass编译工具，方便书写sass代码。插件地址
; Sass Lint
这个是和sass配套的一个插件，检查sass语法是否正确，插件地址
vscode-fileheader
这个插件可以在文档顶部插入一段说明注释，非常便于你查看当日写了哪些内容，插件地址
; webpack
这个插件是一个webpack的辅助工具，可以创建webpack配置文件的，还有babel编译帮助功能,插件地址
; 最后
这就是我日常使用的一些vscode的插件，在此作为一个汇总，方便日后查看。
Original: https://blog.csdn.net/qq_43934844/article/details/127816665
Author: 是空空呀
Title: VScode常用插件_AE必备插件
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/655089/
转载文章受原作者版权保护。转载请注明原作者出处！