【利器篇】前端40+精选VSCode插件，总有几个你未拥有！
前言姊妹篇：
【利器篇】35+精选chrome插件，含15+前端插件，总有一款值得你停顿
关于关于 【前端工具系列】：
有句话，事半功倍，其必然是借助了某些头脑和工具。
VSCode是我们前端开发的武器，本文40+精选插件，让其更加锋利，无坚不摧！！
多谢掘友在评论区的反馈，补充两款非常棒的插件
[*]TabnineAI 代码完成插
[*]Trailing Spaces 尾部空格删除插件
另外两款也不错，但是不太保举
[*] rong-notes 添加解释，下载量比力小，最后维护日期是2019年1月，就不保举了。
[*]ClassTree 根据jsx，dom布局快速天生 jsx/vue class布局。照旧比力有创意的，下载量太小。
必备的
下面这些必备的我就不说了
[*]代码段
[*]JavaScript (ES6) code snippets， ES7 React/Redux/GraphQL/React-Native snippets
[*]vue, vetur, Vue 3 Snippets， Vue VSCode Snippets
代码段这玩意，你也可自界说，可以拜见 VSCode创建自界说代码段
[*]代码检查和格式化
[*]ESLint, Prettier - Code formatter, Beautify
[*]其他
[*]open in browser
由于VSCode自身功能的增强，NPM-Scripts, Change Case等的插件就不需要特意安装了。
接下来更精彩！！！， 全程高能动图，请别分神！
实用高效工具
scode-js-debug debug利器
新版VSCode内置。
可用于调试Node.js、 Chrome、 Edge、 WebView2、 VS Code 扩展等等，更换 Debugger for Chrome 插件。
其还可以调试Service Worker, Web Worker, 功能是异常的强大。
如下的演示，你起首的配置好launch.json
https://img-blog.csdnimg.cn/img_convert/e4ce9fd1c112106ff307bd521a83875e.gif
Live Server 静态服务器
为静态和动态页面启动具有及时重载特性的本地开发服务器。
这也是我平常最喜欢用的插件之一， 右键一键启动，还支持热等，爽字了得。
https://img-blog.csdnimg.cn/img_convert/a229b450d69dbaf4040b01ce4c971f23.gif
Code Runner 代码运行器
最喜欢的插件，没有之三，平常写一些测试代码，和一些逻辑库，快捷键 Ctrl+Alt+M, 喝口水，看一下结果，悠哉。
一键运行多种语言运行代码片断或代码文件: c，c + + ，Java，JavaScript，PHP，Python，Perl，Perl 6，Ruby，Go，Lua，Groovy，PowerShell，BAT/CMD，BASH/SH，f # Script，f # (。NET 核心) ，c # 脚本，多到你想不到。
https://img-blog.csdnimg.cn/img_convert/4fbaba75c519044a5800caf775976f8f.gif
Tabnine AI 代码完成插件
感谢评论区的保举。 这是一款人工智能代码完成工具，可以或许以更快的速率完成代码，而且错误更少， 其支持多种语言，还具备影象功能，真的强大。
我用了，就爱了
https://img-blog.csdnimg.cn/direct/c9182a82b85745f3a3a7b290bb8ec71e.gif
Trailing Spaces 尾部空格删除插件
高亮空格，并提供了一键删除。
https://img-blog.csdnimg.cn/img_convert/503229456b691a28eeb977cac16edbc5.gif
Markdown Preview Enhanced markdown编辑和预览
typora？ 其实不需要的，这款markdown插件，让你一边编辑markdonwn一边预览，编程体验不差于掘金那款。
https://img-blog.csdnimg.cn/img_convert/ff1d98c3d6cbb9e1e13f822dcd108ab0.gif
如果需要更多功能好比 TODO, 大概多行同时修改等, Markdown All in One 是不错的选择。
下面演示一下常用的TODO便签。
https://img-blog.csdnimg.cn/img_convert/0a92f5399edd1bfa2200adc1d6d0f7c7.gif
Git History 和 GitLens Git汗青记录
谁动了我的代码？ 直接在VSCode内里，查看Git的汗青，搜索，版本对比。 清爽！！
VSCode也内置了时间线的功能，但是能力照旧弱一些。
https://img-blog.csdnimg.cn/img_convert/2c8c438d126c1b4f61929816a2ea5c6a.gif
GitLens功能更加强大，无缝导航和欣赏 Git 存储库。
https://img-blog.csdnimg.cn/img_convert/f84184f196c26ce09f7f2e6b29447dd9.gif
Image Preview 图片预览
CSS编写，再也担心写错图片地点啦！
其支持在html和css文件内里，当有使用图片路径的时间，在左边实现小的预览器，一眼就知对与错。
https://img-blog.csdnimg.cn/img_convert/9eaf5e7463aa5394a58d47e0f38cd284.gif
JSON to TS json转为TS申明
现在的前端，谁还不写个TypeScript，可是咋天生申明文件呢？ 手写，那你太out了。
这款插件，一键天生。
别人手巧，我在品茗，笑一个。
https://img-blog.csdnimg.cn/img_convert/360622968adb13f806b9fe629dc96164.gif
vscode-fileheader 和 koroFileHeader 天生文件备注
或人某天编写，或人某天更新，来过就留下足迹，一眼望穿！
https://img-blog.csdnimg.cn/img_convert/351075c9659d85bbc0ba30ce2739bbd6.gif
如果你觉得这些信息还不敷，koroFileHeader 提供更督导的解释， 也同时支持天生函数解释。
https://img-blog.csdnimg.cn/img_convert/70fa3dd375621ce7591a361ec0036edd.gif
https://img-blog.csdnimg.cn/img_convert/bf0650ef4c00e2f7b9cecce8f3e52d6a.gif
npm Intellisense npm模块导入智能提示
那么多npm模块，记性欠好，脑筋不快，没关系，这款插件替你分忧。
https://img-blog.csdnimg.cn/img_convert/936eca81e35d56258274fb58b3fc2005.gif
Import Cost 依赖包大小提示
我们一来那么多包，你引入的成本是多少呢？ 成本早知道，就交给她吧！
https://img-blog.csdnimg.cn/img_convert/18207f4e17e5abd1bad743bd1863431c.gif
formate: CSS/LESS/SCSS formatter css样式美化
VSCode内置css格式化功能，这款支持less, scss，高效美观，如你！
https://img-blog.csdnimg.cn/img_convert/6590499e38ab65dfbf1859e3e42193a1.gif
TODO Highlight 高亮TODO
在代码中突出显示 TODO、 FIXME 和其他解释。
有时间，在将代码发布到生产环境之前，您会忘记检查在编码时添加的 todo。
https://img-blog.csdnimg.cn/img_convert/078f1bc4fe438874b139f14c38c8dbad.gif
Add jsdoc comments 给方法添加JSDoc
自动给方法添加JSDoc, 可别说我不会写解释, 我对我写的每一行代码负责！！！
https://img-blog.csdnimg.cn/img_convert/5c284030a3e52d1b98c0b236eb557bd2.gif
DotENV env文件高亮
这年初，谁的配置还没不用个env文件，没高亮，真难看，这款就是你的救星。
https://img-blog.csdnimg.cn/img_convert/b957de63bd2505bd6c9fb81f4fffca4e.png
HTML Snippets html代码段
此插件能快速的输出html代码， 服从就是懒出来的，你们说对吧。
https://img-blog.csdnimg.cn/img_convert/152630496c675a656ac470d577973270.gif
Wrap Console Log Lite 快捷的输出变量
我们经常使用console.log输出变量来查看执行环境，这插件，直接给你天生出书代码，懒的可以啊，懒到极致。
https://img-blog.csdnimg.cn/img_convert/b2f52be8e736b2d2c230ee07c2bf93b3.gif
https://img-blog.csdnimg.cn/img_convert/e81a06bcc39d0e070d4b158ad48dea40.gif
Quokka.js 直接显示变量结果
不用运行，就能知道你的代码结果，这编程体验也是没谁了，把更多时间话费在逻辑上吧。
https://img-blog.csdnimg.cn/img_convert/0fff1c3f3c3279373791e1490dc73820.gif
REST Client rest请求
想请求某个站点的接口，axios?, express? , No No No , 打开VS code直接发请求就好。
此插件允许您直接发送 HTTP 请求并查看 visualstudio 代码中的响应。
https://img-blog.csdnimg.cn/img_convert/76711142e18a70d16a90c8137e5cf1c2.gif
Path Intellisense 引用路径智能提示
https://img-blog.csdnimg.cn/img_convert/f77d9347506f72b232d5b2d42a5d247a.gif
vscode-faker 天生虚伪数据
谁还没造点假数据，就这么简单！
https://img-blog.csdnimg.cn/img_convert/db3a8f9b38ae840ca496f582c992f183.gif
Regex Previewer 边写正则边看结果
一边写正则，一边就能看到结果，这调试真的太方便了！！！
https://img-blog.csdnimg.cn/img_convert/fb158777b35a7e983ac17faca346f6c2.gif
SVG Viewer SVG文件预览
预览svg文件，还能随处成为图片，利器！
https://img-blog.csdnimg.cn/img_convert/a765975833fdf11da9b412b74b7cda64.gif
Auto Close Tag 自动关闭标签
自动添加 HTML/XML 关闭标记，与 Visual Studio IDE 或 Sublime Text 相同。
https://img-blog.csdnimg.cn/img_convert/094e8467a5b0202f83808b6f3021300d.gif
Auto Rename Tag 标签重命名
自动重命名成对的 HTML/XML 标记，与 Visual Studio IDE 相同。
我们总有时间会写错，那么这就可以降低你犯错后修复成本。
https://img-blog.csdnimg.cn/img_convert/98e86e6168d28f942639542789016f8c.gif
CSS Peek css定位器
我的class在哪界说的，本身都找不到了，怎么办，有请这位！！
https://img-blog.csdnimg.cn/img_convert/e00dcaaaa6bbd9b8c26dc9154997b80d.gif
https://img-blog.csdnimg.cn/img_convert/1e3069013b63fb44d92eeb33155a2584.gif
Code Spell Checker 拼写检查
妈妈再也不担心我写错单词了。 其能检查拼写错误，并给于提示，非常好的伙伴！
https://img-blog.csdnimg.cn/img_convert/1172ebcbf094841ee75901040abe2a20.gif
Color Picker 颜色选择器
那种颜色好看呢，别着急，调精彩板，逐步选择吧。
https://img-blog.csdnimg.cn/img_convert/de35026fbd4b153f176348e06a0db76a.gif
Sort Typescript imports import自动排序
导入太多的库了，眼花撩顺，这款插件让他们有序分列， 逼迫症患者的福星。我记得eslint好像也有类似的规则。
https://img-blog.csdnimg.cn/img_convert/1ef9ae5c7fe77ef0b137237fa32a8d37.gif
Bracket Pair Colorizer 2 括号对齐利器
代码写太多，大括号太多，都不知道谁是谁的谁呢，这款插件给你明示。
https://img-blog.csdnimg.cn/img_convert/5e1dcb3287cc8ed1f8fdda63c5e324ce.gif
vscode-icon 文件图标
让 vscode 资源树目录加上图标，赏心悦目！
https://img-blog.csdnimg.cn/img_convert/ef5de679d9e99d84badf02e6683b7e4e.gif
npm npm扩展
这个扩展支持运行 package.json 文件中界说的 npm 脚本，并根据 package.json 中界说的依赖项验证已安装的模块。 是不是很酷！
https://img-blog.csdnimg.cn/img_convert/7c74152dfc2e0616bf7c2aff990c1676.png
https://img-blog.csdnimg.cn/img_convert/39ec13d13fac9582b82962193eeda334.png
Project Manager 项目管理利器
它可以资助你轻松地访问你的项目，不管它们位于那里。不要再错过那些紧张的项目了。
https://img-blog.csdnimg.cn/img_convert/c2b5bbfbb493202e814fee631659be3c.gif
Live Sass Compiler SASS及时编译
一个 VSCode 扩展，它可以资助您及时地将 SASS/SCSS 文件编译/传输到 CSS 文件中，并及时重新加载欣赏器。
https://img-blog.csdnimg.cn/direct/fea747655b594b27aa4e0d8064b627ea.gif
Todo Tree TODO展示
把你的TODO事项以树形布局列出来，再也不担心忘记点啥呢
https://img-blog.csdnimg.cn/img_convert/e7cdd8659709b911a0f2c87f42b90b8c.png
Markdown PDF markdown转PDF
markdown写完文章，趁便天生pdf, 真的是6啊
https://img-blog.csdnimg.cn/img_convert/a78b363cfa3f369fb131784fecc88080.gif
写在最后
如果你觉得不错，你的一赞一评就是我前行的最大动力。
技术交换群请到 这里来。
大概添加我的微信 dirge-cloud，一起学习。
引用
精选！15 个必备的 VSCode 插件（前端类）
VSCode拓展保举（前端开发）
VSCode前端必备插件，有可能你装了却不知道如何使用？
marketplace.visualstudio
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]