前端开发常用 VSCode 扩展(2024)

在这里插入图片描述

VSCode 因为超强的插件生态,才变得如此强大。作为前端,推荐一些日常使用较为高频的插件。

错误检查

  • ESLint:JS 语法检查
  • Stylelint:CSS 样式检查
  • Code Spell Checker:代码拼写错误检查

编码辅助

语法提示

  • JavaScript (ES6) code snippets
  • Path Intellisense:文件路径自动提示

HTML 快速编辑

  • Auto Close Tag:自动添加结束标签
  • Auto Rename Tag:重命名成对标签

代码格式化

  • Prettier - Code Formatter:代码格式化

动态 HTTP 服务

  • Live Server:本地开启 http 服务用于展示 HTML 文件等

注释

  • koroFileHeader:用于生成文件头部注释和函数注释的插件

react 专属

  • ES7 React/Redux/GraphQL/React Native snippets
  • Simple React Snippets

Vue 专属

  • Vue - Offical:Vue 3 专用,注意:和 Vetur 不能混用
  • Vetur: Vue 2 专用
  • Vue VSCode Snippets
  • Vue 3 Snippets

这种插件不用装太多,有一两个趁手的就好

uni-app 专属

  • uni-create-view:在 VSCode 右键点击文件夹可以快速创建页面与组件,创建页面时将自动添加 pages.json 中,脱离 HBuilderX 不是梦
  • uni-helper:uni-app 代码提示
  • uniapp小程序扩展::提供创建页面和组件功能,鼠标悬停到组件上的 API 提示功能

AI 编码

  • CodeGeeX
  • Tabnine

外观美化

  • indent-rainbow:彩虹色显示缩进
  • Bracket Pair Colorization Toggler:每对括号标上鲜明且不同的颜色,方便识别

其他

  • Auto Import:自动查找分析依赖并引入
  • GitLens:显示代码是谁改的
  • Import Cost:显示 import 的第三方包有多大
  • TODO Highlight:高亮代码中的 TODO、FIXME 等
  • Turbo Console log:快速高效的 console.log
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

希默软件

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值