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

在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扩展内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vscode 安装go第三方扩展包填坑记录的详细教程

    1.vscode中安装go扩展包,不再阐述. 2.在安装好go的扩展包以后,创建GOPATH环境变量 3.PATH中会自动添加,如果没有可手动添加 4.在GOPATH目录下创建自己的工作空间(为什么一定是在GOPATH下创建,还不太清楚),我的是workspace(名称可以自定义) 5.打开VSCODE,文件-打开文件夹,选择GOPATH目录 6.在workspace下创建helloworld目录(我称为项目空间) 7.配置VSCODE中的setting.json文件 加入如下配置: 8.编写h

  • VSCode 云同步扩展设置Settings Sync插件

    关于 Settings Sync扩展: Settings Sync可以同步你当前的VSCode配置环境,当你需要在其它的电脑工作时,您不用重头再来一遍.新机器登录一下就搞定了.再也不用折腾环境了. 大致原理:使用GitHub Gist来同步多台计算机上的设置,代码段,主题,文件图标,启动,键绑定,工作区和扩展. 环境版本: Visual Studio Code 1.36 Settings Sync 3.4.0 教程分为 初次使用 如何上传配置(#1) 已有配置 直接下载(#2) 初次使用: 在V

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

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

  • 浅谈Vue入门需掌握的知识

    浅谈Vue入门需掌握的知识

    Vue作为一款目前最流行的前端框架之一,是许多前端开发工程师的不二选择.最近我在前端岗位上也运用Vue实现了几款产品,那么今天来分享一下Vue是什么,以及我对Vue的见解. 一.定义 Vue是一套用于构建用户界面的渐进式JavaScript框架 与传统JS和JQuery框架不同,Vue的渐进式框架表示开发者可以由简单组件写起,渐渐搭建出一个复杂的前端平台. 形成Vue渐进式框架的核心概念为:组件化,MVVM,响应式,和生命周期,下面会一个个详细介绍. 二.为什么要用Vue? 1. 组件化 Vue

  • 浅谈Vue灰度发布新功能的使用

    目录 概述 组件级别 页面级别 方案一 新增入口页面分发 方案二 高阶组件方案 方案三 动态Router.js引入 总结 参考 什么是灰度发布?百度百科的解释如下. 灰度发布是指在黑与白之间,能够平滑过渡的一种发布方式.AB test就是一种灰度发布方式,让一部分用户继续用A,一部分用户开始用B,如果用户对B没有什么反对意见,那么逐步扩大范围,把所有用户都迁移到B上面来.灰度发布可以保证整体系统的稳定,在初始灰度的时候就可以发现.调整问题,以保证其影响度. 从上可以看出,灰度发布的主要作用有以下

  • 浅谈vue项目4rs vue-router上线后history模式遇到的坑

    此次项目开发完后准备打包,因为hash模式的路径带#看着实在是有点丑,所以采用history模式.因为本次项目属于以前网站重构,但是seo问题,所以需要以前的一些地址路径写,所以vue-router的路径全部重改了.打包后查了网上一大堆,都说要把config里的index.js 里的build里的 assetsPublicPath: '/'改成'./',打包上线发现在hash模式下是没问题的, 但一旦改成history模式,有些动态js文件的路径都是错的.无奈之下死马当活马医,把'./'改回了'

  • 浅谈vue引入css,less遇到的坑和解决方法

    在使用vux开发手机页面时,引入vux的公共样式less一直报错,通过各种百度,Google都没有解决,走了很多弯路.最后才发现钻牛角尖了,可以换一种方法引入. 1.报错的使用:在App中 @ ./~/css-loader?{"minimize":false,"sourceMap":false}!./~/vux/src/styles/reset. less 3:10-115 @ ./~/css-loader?{"minimize":false,&

  • 浅谈vue首屏加载优化

    本文介绍了浅谈vue首屏加载优化,分享给大家,具体如下: 库使用情况 vue vue-router axios muse-ui material-icons vue-baidu-map 未优化前 首先我们在正常情况下build 优化 1. 按需加载 当前流行的UI框架如iview,muse-ui,Element UI都支持按需加载,只需稍微改动一下代码. 修改前: import MuseUI from 'muse-ui' import 'muse-ui/dist/muse-ui.css' imp

  • 浅谈Vue render函数在ElementUi中的应用

    vue的render函数在日常开发中被广泛应用,今天以ElementUI中的table表头重构为引,实际应用一下借助render函数实现表头搜索,不足之处请多多指教! 首先引入官方demo <el-table :data="tableData" style="width: 100%" :border="true"> <el-table-column prop="date" label="日期&quo

  • 浅谈vue的第一个commit分析

    为什么写这篇vue的分析文章? 对于天资愚钝的前端(我)来说,阅读源码是件不容易的事情,毕竟有时候看源码分析的文章都看不懂.每次看到大佬们用了1-2年的vue就能掌握原理,甚至精通源码,再看看自己用了好几年都还在基本的使用阶段,心中总是羞愧不已.如果一直满足于基本的业务开发,怕是得在初级水平一直待下去了吧.所以希望在学习源码的同时记录知识点,可以让自己的理解和记忆更加深刻,也方便将来查阅. 目录结构 本文以vue的第一次 commit a879ec06 作为分析版本 ├── build │ └─

  • 浅谈vue单页面中有多个echarts图表时的公用代码写法

    html中: <div class="charts1"/> <div class="charts2"/> <div class="charts3"/> <div class="charts4"/> <div class="charts5"/> <div class="charts6"/> <div class=

  • 浅谈vue生命周期共有几个阶段？分别是什么？

    一共8个阶段 1.beforeCreate(创建前) 2.created(创建后) 3.beforeMount(载入前) 4.mounted(载入后) 5.beforeUpdate(更新前) 6.updated(更新后) 7.beforeDestroy(销毁前) 8.destroyed(销毁后) vue第一次页面加载会触发哪几个钩子函数? beforeCreate.created.beforeMount.mounted DOM 渲染在哪个周期中就已经完成? mounted 补充知识:记录一次vu

随机推荐