前端开发必备的 VSCode 插件推荐(第三期)

简介: 本文推荐两款提升Vue开发效率的VSCode插件:vue-helper,支持代码扩选、快速跳转与变量定位;别名路径跳转插件,解决@路径无法跳转问题。配置简单,实用高效,助力前端开发提速。

目录

1 前言

哈喽,你的喵喵侠又来啦!前两期的分享,不知道有没有对你的工作编码帮上忙呢?今天我要继续推荐一波好用的VSCode插件,希望它们能让你的编码体验更顺畅,更高效!准备好迎接新的工具了吗?让我们一起来看看这些插件吧!

2 插件推荐

2.1 vue-helper - 功能强大的Vue开发的全链路提效开发工具

请在此添加图片描述

这是一款非常强大的Vue 插件,可以大幅度增加你编写 Vue 的体验,对于常年使用 Vue 的前端开发同学非常友好。

这款插件我每天都会用到,功能非常强大,简直让我爱不释手。

它支持常见的 UI 框架,包括Element-UIElement-PlusAnt Design Vue,让你书写代码效效率翻倍!

由于功能过多,我挑选几个我最常用的功能为你介绍:

2.1.1 扩选功能[alt + x]

它可以让你很方便地选中代码块,支持属性、标签、对象、函数扩选。不用刻意的从花括号或者标签开始,就能快速复制一大段代码,非常实用。

请在此添加图片描述

2.1.2 增强 [alt + enter]

有时候想要快速跳转下一行,尤其是写完引号里面内容的时候,这时候你可以使用alt + enter,快速跳转到下一行。

请在此添加图片描述

2.1.3 方法变量快速定位

当你鼠标悬停在 template 某个标签变量上的时候,你会发现这个变量可以被点击。点击后就能快速跳转到 data 定义的位置,methods 也是同理。

请在此添加图片描述

以上是我最常用的三个功能,是不是很方便呢?当然插件的功能还远不止这些,你可以在官方介绍的更新日志中,看到很多功能特性。更新日志如下:

Changelog | Visual Studio Marketplace

2.2 别名路径跳转 - 解决恼人的别名路径跳转问题

请在此添加图片描述

这款插件的功能十分单一,就是解决别名路径跳转的问题。比方说你有一个路径是这样的:

import { httpAction, getAction } from '@/api/manage'

@是代表当前根目录下的 src 文件,默认情况下,你按 Ctrl+左键,是无法跳转的。

但你配置后,就可以跳转到对应的文件了。配置方法很简单,按照下面的操作来:

  1. 首先在设置中,搜索@ext:lihuiwang.vue-alias-skip,点击红色箭头位置:

请在此添加图片描述

你也可以通过插件的介绍页,点击这里进入到这个设置页面:

请在此添加图片描述

  1. 进入后,把配置写在右边,下面是官方默认推荐的配置,可以直接拿过来用。

请在此添加图片描述

  1. 保存成功后,试一下这个路径,可以跳转成功了!

请在此添加图片描述

怎么样,这款插件还不错吧,虽然是很小的一个功能,但每次可以帮你省去了复制跳转的操作。

3 总结

这次我深入介绍了两款非常实用的 VSCode 插件。首先,vue-helper 以其强大的功能极大提升了 Vue 开发的效率,无论是代码块选择、快速跳转还是方法变量定位,都表现出色。其次,别名路径跳转插件有效解决了别名路径无法跳转的问题,让路径跳转更加便捷。

这两款插件不仅能提升你的编码效率,还能让你的开发体验更加顺畅。希望这些工具能对你有所帮助。如果你有其他好用的 VSCode插件推荐,欢迎在评论区分享! 后续我会继续推荐更多有趣的 VSCode 插件,敬请期待!

目录
相关文章
|
8月前
|
人工智能 前端开发 Go
前端开发必备的 VSCode 插件推荐(第一期)
本文推荐三款提升前端开发效率的VSCode插件:Live Server实现网页实时预览,Tencent Cloud AI Code Assistant提供智能补全与代码优化,WakaTime记录编程时长。助力开发者高效编码,欢迎交流分享使用心得。
852 0
前端开发必备的 VSCode 插件推荐(第一期)
vscode点击通过import引入方法名或模块名跳转其定义的文件
window点击ctrl(MAC点击command)+通过import引入的文件、方法等到,跳转到其定义的页面
1904 0
|
开发工具 git
vscode 查看git提交日志
vscode 查看git提交日志
2631 0
有关element UI el-table 跟el-dialog搭配使用出现的问题,背景问题,穿透问题
有关element UI el-table 跟el-dialog搭配使用出现的问题,背景问题,穿透问题
1042 0
|
5月前
|
Web App开发 前端开发 网络安全
基于 Ghostty 带有分割标签页和为 Claude 编程设计的通知终端
cmux是macOS原生终端神器,集成Claude协作、内置浏览器、通知中心与多窗格分屏,告别频繁切换;搭配Yazi终端文件管理器,可直接预览编辑文件,大幅提升前端开发效率。(239字)
1399 0
|
8月前
|
人工智能 前端开发 搜索推荐
前端开发必备的 VSCode 插件推荐(第二期)
本文由喵喵侠推荐三款实用VSCode插件:background自定义编辑器背景、Codeium提供AI智能补全、colorize实现颜色值实时高亮,提升开发效率与视觉体验,适合前端开发者使用。
1111 0
|
8月前
|
JavaScript 前端开发 IDE
前端开发项目必备VSCode代码定位神器——code-inspector-plugin
本文介绍了一款由快手前端团队开发的高效开发工具——code-inspector-plugin。该插件可实现点击页面DOM元素,自动定位至IDE中对应源码行,支持Vue、React等主流框架及Webpack、Vite等多种构建工具,无侵入、易集成,大幅提升前端开发调试效率。
1017 0
|
8月前
|
自然语言处理 前端开发 Windows
推荐一款很好用的VSCode变量翻译插件
本文介绍VSCode插件“var-translate-en”,可一键将中文翻译为英文并转为小驼峰等命名格式,支持百度、腾讯、阿里等翻译服务。通过简单配置与快捷键设置,提升变量命名效率,解决命名难题。
2425 0
|
人工智能 JavaScript 开发工具
【完全免费】VS Code 最好用的 12 款 AI 代码提示插件!!!
🎉 探索12款免费VSCode AI代码提示插件:Codeium、Codegeex、CodeFuse、TONGYI Lingma、Comate、iFlyCode、Fitten Code、Bito AI、Mintlify Doc Writer、Kodezi AI、aiXcoder、IntelliCode。这些插件提供智能补全、代码生成、注释、优化,支持多种语言,提升编程效率!🚀👩‍💻👨‍💻
30931 121
|
前端开发 Go
vscode10大常用插件
本文介绍了前端开发中常用的工具及VSCode必备插件。推荐使用VSCode作为入门工具,并介绍了WebStorm和HBuilder等其他选项。VSCode插件包括:Open-In-Browser、live-server、Beautify、Code Runner、Image Preview、Path Intellisense、Turbo Console Log、css-auto-prefix、Bracket Pair Colorizer 和 Auto Rename Tag,这些插件能够显著提升开发效率和代码质量。此外,还提供了录制Gif图的工具GifCam。
1306 5
vscode10大常用插件

热门文章

最新文章