浅谈Vue开发人员的7个最好的VSCode扩展


Posted in Vue.js onJanuary 20, 2021

在Visual Studio中添加正确的VS Code扩展可以让你作为开发者的生活变得更加轻松。
它们可以帮助格式化、可伸缩性、强制执行最佳实践,从而自动化开发过程中许多容易忘记的任务。它们也可以只是有趣的扩展,使我们的代码看起来更漂亮/更容易编写。
作为一个Vue爱好者,我花了很多时间为Vue开发人员寻找最好的VS Code扩展。这里有一些让我的生活变得如此简单的方法。
准备好了吗?

让我们直接切入正题。

Vetur

如果你从这篇文章中下载了一个VS Code扩展,它一定是Vetur。
一个针对VS Code的Vue工具包——它提供了Vue特定的语法高亮显示、通用代码段的代码段,以及所有Vue开发人员都需要的更多内容。
Vetur维护得很好——它甚至还提供了对Vue3 Typescript的支持。
关于Vetur,真的没有太多别的好说的了——明白了吧。这会让你的发展更好。

ESLint Plugin VueJS

大多数开发人员都很熟悉ESLint——这是最流行的linter工具之一,它可以帮助你保持代码与最佳实践一致,并在大型代码库中具有可读性。
VueJS有自己的ESLint插件来检查单个文件组件的语法。我认为它是编写可维护和可伸缩代码的最佳工具之一。
没有什么比查看一些旧代码,甚至不知道从哪里开始调试它更糟糕的了。
ESLint可以帮助你保持组织性,并且随着对Vue3支持的增加,你将会编写可扩展的Vue项目。

Vue VSCode Snippets

Sarah Drasner的VSCode扩展将为你节省很多开发时间。它为常用的Vue用例提供了自动填充的代码片段。用她自己的话来说……
从真实世界使用的Vue的角度关注开发者的人机工程学。其中包括我个人厌倦了打字的部分,以及有助于快速删除的样板文件。
它非常适合编写快速sfc、Vue指令和快速访问生命周期钩子。

Bookmarks

许多Vue开发人员的VSCode扩展直到进入大型项目时才真正展现出其全部潜力。
这就是Bookmarks的工作原理。这个扩展可以让你在代码中标记和命名位置。然后,你可以在这些不同的“Bookmarks”之间切换以提高开发速度。
为了找到某个特性,你需要小心翼翼地上下滚动你的文件,这样的日子一去不复返了。

Bracket Pair Colorizer

Bracket Pair Colorizer确实做到了它说的-它需要匹配括号,并给他们独特的匹配颜色。
虽然这看起来像是一个小细节,但它确实可以帮助你修复讨厌的嵌套错误,也可以帮助你。
我也很享受这样做的视觉效果——让我的代码色彩丰富,又不会让它太分散注意力。
绝对值得一看。

Auto Rename Tag

Auto Rename Tag是一个有用的VSCode扩展,将有助于防止错误出现在你的模板代码。
每当你去改变一个标签的HTML括号对(无论是开始或结束标签),Auto Rename Tag将自动重命名另一个。
这个小的优化可以帮助防止如此多的错误,特别是在处理大型模板时。

NPM Intellisense

当你在Javascript中编写import语句时,NPM Intellisense会自动完成你的NPM模块。
这可以节省你记住一个npm模块的确切名称的时间。
我已经在我的很多项目中使用了它,而且它绝对是我已经变得非常习惯的东西。

结论

总之,有很多VS Code扩展可供Vue开发人员使用。
虽然这个列表中的许多修改在一开始可能看起来微不足道,但这些小的修改可以为你节省大量的开发时间。我强烈建议至少尝试所有的方法。
谁知道呢——你可能会爱上其中的一些。
如果你认为还有其他的VS Code扩展值得在这个列表上——请告诉我!

到此这篇关于浅谈Vue开发人员的7个最好的VSCode扩展的文章就介绍到这了,更多相关Vue VSCode扩展内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue+iview实现文件上传
Nov 17 Vue.js
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
在Vue中使用CSS3实现内容无缝滚动的示例代码
Nov 27 Vue.js
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
vue使用require.context实现动态注册路由
Dec 25 Vue.js
基于VUE实现简单的学生信息管理系统
Jan 13 Vue.js
如何使用vue3打造一个物料库
May 08 Vue.js
详解Vue的列表渲染
Nov 20 Vue.js
vue+iview实现手机号分段输入框
Mar 25 Vue.js
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
解决vue中provide inject的响应式监听
Apr 19 Vue.js
详解实现vue的数据响应式原理
Jan 20 #Vue.js
vue实现简易计算器功能
Jan 20 #Vue.js
vue使用过滤器格式化日期
Jan 20 #Vue.js
Vue实现简单计算器
Jan 20 #Vue.js
vue实现验证用户名是否可用
Jan 20 #Vue.js
vue实现按钮切换图片
Jan 20 #Vue.js
Vue实现图书管理案例
Jan 20 #Vue.js
You might like
咖啡的传说和历史
2021/03/03 新手入门
微信支付开发告警通知实例
2016/07/12 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
2020/02/21 PHP
数理公式,也可以这么唯美
2021/03/10 无线电
根据分辨率不同,调用不同的css文件
2006/07/07 Javascript
jQuery AJAX 调用WebService实现代码
2010/03/24 Javascript
js打印纸函数代码(递归)
2010/06/18 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
2014/01/06 Javascript
js 针对html DOM元素操作等经验累积
2014/03/11 Javascript
完美的js div拖拽实例代码
2016/09/24 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
node+koa实现数据mock接口的方法
2017/09/20 Javascript
jQuery动态移除与增加onclick属性的方法详解
2018/06/07 jQuery
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
vue 实现锚点功能操作
2020/08/10 Javascript
python访问抓取网页常用命令总结
2017/04/11 Python
详解supervisor使用教程
2017/11/21 Python
Python笔记之观察者模式
2019/11/20 Python
使用python写一个自动浏览文章的脚本实例
2019/12/05 Python
如何用tempfile库创建python进程中的临时文件
2021/01/28 Python
通过一张图教会你CSS3倒影的实现
2017/09/26 HTML / CSS
美国最大的网上冲印店:Shutterfly
2017/01/01 全球购物
friso美素佳儿官方海外旗舰店:荷兰原产原罐
2017/07/03 全球购物
英国时尚女装购物网站:Missguided
2018/08/23 全球购物
声明struct x1 { . . . }; 和typedef struct { . . . }x2;有什么不同
2012/06/02 面试题
资深地理教师自我评价
2013/09/21 职场文书
卫生安全检查制度
2014/02/04 职场文书
社区党的群众路线教育实践活动剖析材料
2014/10/09 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
教育教学工作反思
2016/02/24 职场文书
MySql新手入门的基本操作汇总
2021/05/13 MySQL
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
纯 CSS 自定义多行省略的问题(从原理到实现)
2021/11/11 HTML / CSS