【利器篇】前端40+精选VSCode插件,总有几个你未拥有!(上)

简介: 有句话,事半功倍,其必然是借助了某些思想和工具。VSCode是我们前端开发的武器,本文40+精选插件,让其更加锋利,无坚不摧!

1.JPG


前言


姊妹篇: 【利器篇】35+精选chrome插件,含15+前端插件,总有一款值得你停留


关于关于 【前端工具系列】


有句话,事半功倍,其必然是借助了某些思想和工具。


VSCode是我们前端开发的武器,本文40+精选插件,让其更加锋利,无坚不摧!!

多谢掘友在评论区的反馈,补充两款非常棒的插件



另外两款也不错,但是不太推荐


  • rong-notes 添加注释,下载量比较小,最后维护日期是2019年1月,就不推荐了。
  • ClassTree 根据jsx,dom结构快速生成 jsx/vue class结构。还是比较有创意的,下载量太小。


必备的


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


  1. 代码段


代码段这玩意,你也可自定义,可以参见 VSCode创建自定义代码段


  1. 代码检查和格式化
  1. 其他


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

2.JPG


Live Server 静态服务器



为静态和动态页面启动具有实时重载特性的本地开发服务器。


这也是我平时最喜欢用的插件之一, 右键一键启动,还支持热等,爽字了得。


3.JPG


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


4.JPG


Tabnine AI 代码完成插件



感谢评论区的推荐。 这是一款人工智能代码完成工具,能够以更快的速度完成代码,并且错误更少, 其支持多种语言,还具备记忆功能,真的强大。


我用了,就爱了


5.JPG


Trailing Spaces 尾部空格删除插件



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

6.JPG


Markdown Preview Enhanced markdown编辑和预览



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


7.JPG


如果需要更多功能比如 TODO, 或者多行同时修改等, Markdown All in One 是不错的选择。


下面演示一下常用的TODO便签。


8.JPG


Git HistoryGitLens Git历史记录



谁动了我的代码? 直接在VSCode里面,查看Git的历史,搜索,版本对比。 清爽!!

VSCode也内置了时间线的功能,但是能力还是弱一些。


9.JPG


GitLens功能更加强大,无缝导航和浏览 Git 存储库。


10.JPG


Image Preview 图片预览



CSS编写,再也担心写错图片地址啦!


其支持在htmlcss文件里面,当有使用图片路径的时候,在左边实现小的预览器,一眼就知对与错。


11.JPG


JSON to TS json转为TS申明



现在的前端,谁还不写个TypeScript,可是咋生成申明文件呢? 手写,那你太out了。 这款插件,一键生成。


别人手巧,我在喝茶,笑一个。

12.JPG

13.JPG


vscode-fileheaderkoroFileHeader 生成文件备注



某人某天编写,某人某天更新,来过就留下足迹,一眼望穿!


14.JPG


如果你觉得这些信息还不够,koroFileHeader 提供更督导的注释, 也同时支持生成函数注释。


15.JPG


npm Intellisense npm模块导入智能提示



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


16.JPG


Import Cost 依赖包大小提示


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


17.JPG


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


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


18.JPG


TODO Highlight 高亮TODO



在代码中突出显示 TODO、 FIXME 和其他注释。


有时候,在将代码发布到生产环境之前,您会忘记检查在编码时添加的 todo。


19.JPG


Add jsdoc comments 给方法添加JSDoc



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


20.JPG


DotENV env文件高亮



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


21.JPG


HTML Snippets html代码段


此插件能快速的输出html代码, 效率就是懒出来的,你们说对吧。


22.JPG


Wrap Console Log Lite 快捷的输出变量



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


23.JPG

Quokka.js 直接显示变量结果



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


24.JPG


相关文章
|
1月前
|
移动开发 前端开发 JavaScript
ruoyi-nbcio-plus的Vue3前端一些插件使用介绍(二)
ruoyi-nbcio-plus的Vue3前端一些插件使用介绍(二)
21 2
|
1月前
|
开发框架 前端开发 定位技术
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
【4月更文挑战第30天】Flutter插件市场和开源资源加速开发进程。pub.dev是官方插件库,提供大量第三方插件,节约时间和保证质量。选择插件时关注功能需求、评价及维护状况。开源资源作为学习、解决问题和创新的平台,需注意版权、代码质量和兼容性。案例分析展示插件应用,开源社区促进交流与技术进步,未来市场将持续发展。善用资源,提升开发效率与项目竞争力。
【Flutter 前端技术开发专栏】Flutter 中的插件市场与开源资源利用
|
1月前
|
传感器 前端开发 Android开发
【Flutter 前端技术开发专栏】Flutter 中的插件开发与集成
【4月更文挑战第30天】本文探讨了Flutter插件开发的关键技术和实践,包括插件作为连接Flutter与原生功能桥梁的角色,开发流程(定义接口、实现原生代码、打包发布),以及集成方法(添加依赖、初始化)。文中提到了多媒体、传感器和文件系统等常见插件类型,并以相机插件为例说明开发步骤。此外,还强调了版本兼容性、性能优化和错误处理的注意事项,推荐了开发工具和资源。随着Flutter的发展,插件开发将更加重要,未来有望形成更丰富的生态系统。
【Flutter 前端技术开发专栏】Flutter 中的插件开发与集成
|
1月前
|
前端开发 数据可视化 API
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
65 0
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(二)
|
1月前
|
前端开发 JavaScript CDN
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏(一)
前端react 18.2整合ckeditor富文本编辑器——配置插件、自定义toolbar工具栏
58 0
|
1月前
|
Web App开发 XML 传感器
VSCode 开发Vue必备插件
VSCode 开发Vue必备插件
32 0
|
1月前
|
前端开发 JavaScript 开发工具
前端开发工具VS Code深度探索
前端开发工具VS Code深度探索
42 1
|
1月前
VSCode插件分享--免费的ER工具
VSCode插件分享--免费的ER工具
25 0
|
1月前
|
JavaScript 开发工具 git
【Vscode】 Vscode常用插件
【Vscode】 Vscode常用插件
71 0
|
1月前
sublime和vscode 推荐安装的插件
sublime和vscode 推荐安装的插件
22 0

热门文章

最新文章