【利器篇】前端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


相关文章
|
6天前
|
人工智能 小程序 程序员
【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
153 7
|
8天前
|
机器学习/深度学习 人工智能 自然语言处理
|
29天前
|
JavaScript 前端开发 jenkins
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
本文探讨了在不依赖Node和VSCode的情况下,仅使用记事本和浏览器开发一个完整的Vue3前端项目的方法。通过CDN引入Vue、Vue Router、Element-UI等库,直接编写HTML文件实现页面功能,展示了前端开发的本质是生成HTML。虽然日常开发离不开现代工具,但掌握这种基础方法有助于快速实现想法或应对特殊环境限制。文章还介绍了如何用Node简单部署HTML文件到服务器,提供了一种高效、轻量的开发思路。
55 10
|
3月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
89 8
|
3月前
|
自然语言处理 API C++
阿里通义推出SmartVscode插件,自然语言控制VS Code,轻松开发应用,核心技术开源!
SmartVscode插件深度解析:自然语言控制VS Code的革命性工具及其开源框架App-Controller
|
3月前
|
开发工具 C++ git
利用VS Code提升开发效率的五大插件推荐
本文推荐了五款能显著提升开发效率的VS Code插件:ESLint用于代码质量和风格检查;Prettier自动格式化代码;GitLens增强Git功能;Live Server提供前端实时预览;Docker支持容器管理。
|
3月前
|
前端开发 数据可视化 数据挖掘
前端开发者的福音:这些插件让你轻松应对各种复杂需求!
前端开发领域充满创意与挑战,面对复杂需求,开发者常感力不从心。本文通过三个真实案例,介绍如何利用Chart.js、ESLint和Ant Design等强大插件,解决数据可视化、代码质量和UI组件复用等问题,提高开发效率,创造更出色的前端作品。
47 3
|
4月前
|
自然语言处理 JavaScript 开发者
通义灵码插件:VSCode 的智能编程助手
通义灵码插件:VSCode 的智能编程助手
1847 3
|
4月前
|
前端开发 JavaScript 编译器
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
【10月更文挑战第11天】2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
1117 0
2024最新VSCode实用插件推荐,开发效率遥遥领先!超全面,快收藏~
|
4月前
|
资源调度 前端开发 安全
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
前端实战:基于Verdaccio搭建私有npm仓库,轻松上传与下载自定义npm插件包
228 0

热门文章

最新文章

  • 1
    告别熬夜写代码!VSCode+Cline扩展插件+DeepSeek-V3大模型,让你的编程水平瞬间超越99.9%的人!
  • 2
    python安装、vscode安装、conda安装:一文搞定Python的开发环境(史上最全)
  • 3
    vscode+git解决远程分支合并冲突
  • 4
    【视频测评 DEMO 参考】VSCode 神级 AI 插件通义灵码:完全免费+实战教程+微信贪吃蛇小程序
  • 5
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 7
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 9
    详解智能编码在前端研发的创新应用
  • 10
    巧用通义灵码,提升前端研发效率
  • 1
    以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
    29
  • 2
    大前端之前端开发接口测试工具postman的使用方法-简单get接口请求测试的使用方法-简单教学一看就会-以实际例子来说明-优雅草卓伊凡
    51
  • 3
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 4
    巧用通义灵码,提升前端研发效率
    93
  • 5
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    141
  • 6
    详解智能编码在前端研发的创新应用
    96
  • 7
    智能编码在前端研发的创新应用
    83
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    37
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    121
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    75