浅谈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在图片上传的时候压缩图片
Nov 18 Vue.js
vue 插槽简介及使用示例
Nov 19 Vue.js
vue中如何添加百度统计代码
Dec 19 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue keep-alive的简单总结
Jan 25 Vue.js
vue使用lodop打印控件实现浏览器兼容打印的方法
Feb 07 Vue.js
关于vue中如何监听数组变化
Apr 28 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
Vue的列表之渲染,排序,过滤详解
Feb 24 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
VUE中的v-if与v-show区别介绍
Mar 13 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
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
php过滤表单提交的html等危险代码
2014/11/03 PHP
PHP数据对象PDO操作技巧小结
2016/09/27 PHP
JavaScript中null与undefined分析
2009/07/25 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
第一次接触神奇的Bootstrap
2016/10/14 Javascript
jQuery实现ToolTip元素定位显示功能示例
2016/11/23 Javascript
使用Bootstrap Tabs选项卡Ajax加载数据实现
2016/12/23 Javascript
bootstrap 模态框(modal)实现水平垂直居中显示
2017/01/23 Javascript
jquery实现焦点轮播效果
2017/02/23 Javascript
小程序根据手机机型设置自定义底部导航距离
2019/06/04 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
js图片无缝滚动插件使用详解
2020/05/26 Javascript
JQuery实现折叠式菜单的详细代码
2020/06/03 jQuery
[07:54]DOTA2-DPC中国联赛 正赛 iG vs VG 选手采访
2021/03/11 DOTA
Python编写百度贴吧的简单爬虫
2015/04/02 Python
Python输出PowerPoint(ppt)文件中全部文字信息的方法
2015/04/28 Python
详解Python的Django框架中manage命令的使用与扩展
2016/04/11 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
python IDLE 背景以及字体大小的修改方法
2019/07/12 Python
django实现支付宝支付实例讲解
2019/10/17 Python
keras获得某一层或者某层权重的输出实例
2020/01/24 Python
Django 实现图片上传和下载功能
2020/12/31 Python
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
Java面试题:请说出如下代码的输出结果
2013/04/22 面试题
工程造价专业大学生职业生涯规划书
2014/01/18 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
实习证明格式范文
2014/10/14 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
活动主持人开场白
2015/05/28 职场文书
2019年行政人事个人工作总结范本!
2019/07/19 职场文书
Python 解决空列表.append() 输出为None的问题
2021/05/23 Python
SQL中的连接查询详解
2022/06/21 SQL Server