ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【利器篇】前端40+精选VSCode插件，总有几个你未拥有！ [打印本页]
作者: 九天猎人    时间: 2024-6-11 09:47
标题: 【利器篇】前端40+精选VSCode插件，总有几个你未拥有！
前言

姊妹篇：
【利器篇】35+精选chrome插件，含15+前端插件，总有一款值得你停顿
关于关于 【前端工具系列】：
有句话，事半功倍，其必然是借助了某些头脑和工具。
VSCode是我们前端开发的武器，本文40+精选插件，让其更加锋利，无坚不摧！！
多谢掘友在评论区的反馈，补充两款非常棒的插件

另外两款也不错，但是不太保举

必备的

下面这些必备的我就不说了



由于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

Live Server 静态服务器

为静态和动态页面启动具有及时重载特性的本地开发服务器。
这也是我平常最喜欢用的插件之一， 右键一键启动，还支持热等，爽字了得。

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 # 脚本，多到你想不到。

Tabnine AI 代码完成插件

感谢评论区的保举。 这是一款人工智能代码完成工具，可以或许以更快的速率完成代码，而且错误更少， 其支持多种语言，还具备影象功能，真的强大。
我用了，就爱了

Trailing Spaces 尾部空格删除插件

高亮空格，并提供了一键删除。

Markdown Preview Enhanced markdown编辑和预览

typora？ 其实不需要的，这款markdown插件，让你一边编辑markdonwn一边预览，编程体验不差于掘金那款。

如果需要更多功能好比 TODO, 大概多行同时修改等, Markdown All in One 是不错的选择。
下面演示一下常用的TODO便签。

Git History 和 GitLens Git汗青记录

谁动了我的代码？ 直接在VSCode内里，查看Git的汗青，搜索，版本对比。 清爽！！
VSCode也内置了时间线的功能，但是能力照旧弱一些。

GitLens功能更加强大，无缝导航和欣赏 Git 存储库。

Image Preview 图片预览

CSS编写，再也担心写错图片地点啦！
其支持在html和css文件内里，当有使用图片路径的时间，在左边实现小的预览器，一眼就知对与错。

JSON to TS json转为TS申明

现在的前端，谁还不写个TypeScript，可是咋天生申明文件呢？ 手写，那你太out了。
这款插件，一键天生。
别人手巧，我在品茗，笑一个。

vscode-fileheader 和 koroFileHeader 天生文件备注

或人某天编写，或人某天更新，来过就留下足迹，一眼望穿！

如果你觉得这些信息还不敷，koroFileHeader 提供更督导的解释， 也同时支持天生函数解释。


npm Intellisense npm模块导入智能提示

那么多npm模块，记性欠好，脑筋不快，没关系，这款插件替你分忧。

Import Cost 依赖包大小提示

我们一来那么多包，你引入的成本是多少呢？ 成本早知道，就交给她吧！

formate: CSS/LESS/SCSS formatter css样式美化

VSCode内置css格式化功能，这款支持less, scss，高效美观，如你！

TODO Highlight 高亮TODO

在代码中突出显示 TODO、 FIXME 和其他解释。
有时间，在将代码发布到生产环境之前，您会忘记检查在编码时添加的 todo。

Add jsdoc comments 给方法添加JSDoc

自动给方法添加JSDoc, 可别说我不会写解释, 我对我写的每一行代码负责！！！

DotENV env文件高亮

这年初，谁的配置还没不用个env文件，没高亮，真难看，这款就是你的救星。

HTML Snippets html代码段

此插件能快速的输出html代码， 服从就是懒出来的，你们说对吧。

Wrap Console Log Lite 快捷的输出变量

我们经常使用console.log输出变量来查看执行环境，这插件，直接给你天生出书代码，懒的可以啊，懒到极致。


Quokka.js 直接显示变量结果

不用运行，就能知道你的代码结果，这编程体验也是没谁了，把更多时间话费在逻辑上吧。

REST Client rest请求

想请求某个站点的接口，axios?, express? , No No No , 打开VS code直接发请求就好。
此插件允许您直接发送 HTTP 请求并查看 visualstudio 代码中的响应。

Path Intellisense 引用路径智能提示


vscode-faker 天生虚伪数据

谁还没造点假数据，就这么简单！

Regex Previewer 边写正则边看结果

一边写正则，一边就能看到结果，这调试真的太方便了！！！

SVG Viewer SVG文件预览

预览svg文件，还能随处成为图片，利器！

Auto Close Tag 自动关闭标签

自动添加 HTML/XML 关闭标记，与 Visual Studio IDE 或 Sublime Text 相同。

Auto Rename Tag 标签重命名

自动重命名成对的 HTML/XML 标记，与 Visual Studio IDE 相同。
我们总有时间会写错，那么这就可以降低你犯错后修复成本。

CSS Peek css定位器

我的class在哪界说的，本身都找不到了，怎么办，有请这位！！


Code Spell Checker 拼写检查

妈妈再也不担心我写错单词了。 其能检查拼写错误，并给于提示，非常好的伙伴！

Color Picker 颜色选择器

那种颜色好看呢，别着急，调精彩板，逐步选择吧。

Sort Typescript imports import自动排序

导入太多的库了，眼花撩顺，这款插件让他们有序分列， 逼迫症患者的福星。我记得eslint好像也有类似的规则。

Bracket Pair Colorizer 2 括号对齐利器

代码写太多，大括号太多，都不知道谁是谁的谁呢，这款插件给你明示。

vscode-icon 文件图标

让 vscode 资源树目录加上图标，赏心悦目！

npm npm扩展

这个扩展支持运行 package.json 文件中界说的 npm 脚本，并根据 package.json 中界说的依赖项验证已安装的模块。 是不是很酷！


Project Manager 项目管理利器

它可以资助你轻松地访问你的项目，不管它们位于那里。不要再错过那些紧张的项目了。

Live Sass Compiler SASS及时编译

一个 VSCode 扩展，它可以资助您及时地将 SASS/SCSS 文件编译/传输到 CSS 文件中，并及时重新加载欣赏器。

Todo Tree TODO展示

把你的TODO事项以树形布局列出来，再也不担心忘记点啥呢

Markdown PDF markdown转PDF

markdown写完文章，趁便天生pdf, 真的是6啊

写在最后

如果你觉得不错，你的一赞一评就是我前行的最大动力。
技术交换群请到 这里来。
大概添加我的微信 dirge-cloud，一起学习。
引用

   精选！15 个必备的 VSCode 插件（前端类）
VSCode拓展保举（前端开发）
VSCode前端必备插件，有可能你装了却不知道如何使用？
marketplace.visualstudio

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4