实用干货:分享一个““自动转``的VSCode插件

大家好,我是大澈!

本文约1000+字,整篇阅读大约需要2分钟。

感谢关注微信公众号:“程序员大澈”,免费领取"面试礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

1. 干货速览

对于VSCode的插件,其实我个人用的并不多。

除了一些必要的语法提示高亮插件,如 Volar,这种用的比较多。

对于其它的,确实没怎么用过。欢迎朋友们多多推荐,毕竟我这人有时候也挺懒的哈。

说正题,前阵子我看网课玩,在视频中博主利用短暂的几秒钟,介绍了一个老款插件“Template String Converter”,让我感觉挺实用的,特此推荐给大家,当然主要针对和我一样没用过的朋友。

这个插件的功能,一句话概括就是:当你在字符串中输入“${”时,它会自动将字符串转换为模板字符串``,可以让你懒到极致!

下面请看,此插件的详细介绍。

图片

2. 干货详细

先说说怎么使用这个插件,再简单聊聊几个插件配置。

2.1 如何使用

先在插件商店搜索插件“Template String Converter”,并安装最新版本。

图片

修改该扩展的 package.json 配置文件,进行自定义配置,如:添加vue、html文件自动支持。

不知道为什么直接在vscode中修改配置,有时候不能生效,重新加载后依然会有问题,所以我们直接改配置文件。

图片

图片

配置文件本机地址:C:\Users\admin\.vscode\extensions\meganrogge.template-string-converter-0.6.1。这个地址根据个人情况找就行,就是找vscode安装的扩展包。

图片

2.2 插件配置

先一览一下所有配置项,再分述。

图片

quoteType:单引号转换、还是双引号转换。有用!

enabled:开启扩展。重要!

addBracketsToProps:自动在 JSX 属性的模板字符串外添加花括号。

autoRemoveTemplateString:如果删除“${”,则用常规字符串替换

模板字符串。有用!

convertOutermostQuotes:对于嵌套字符串,将最外面的引号转换为反引号。

convertWithinTemplateString:在模板字符串中,当键入 "${" 时将字符串转换为模板字符串。有用!

validLanguages:扩展生效的语言。重要!

filesExcluded:配置 glob 模式以排除文件和文件夹。用不到!

2.3 小结

这个插件可以帮助我们偷懒,应用是在字符串中输入“${”时,它会自动将字符串转换为模板字符串``,不用再手动输入``。

但此插件在实际应用中,会存在一些小问题或不生效的情况,我们可以直接去修改vscode安装的该扩展包配置文件解决。

当然,若有其它更好的插件,根据个人情况,择优使用。

结语

建立这个平台的初衷:

  • 打造一个专注于前端功能问题的问答平台,让大家高效搜索处理同样问题。

  • 遇到有共鸣的问题,与众多同行朋友们一起讨论,一起沉淀成长。

  • 平台现拥有功能问题、技术资讯、实用干货3个专栏内容。

感谢关注微信公众号:“程序员大澈”,免费领取"面试礼包"一份,然后免费加入问答群,从此让解决问题的你不再孤单!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/441183.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数学算法知识编程

(1)辗转相除法求最大公约数(gcd) 辗转相除法, 又名欧几里德算法(Euclidean algorithm),是求最大公约数的一种方法。它的具体做法是:用较小数除较大数,再用出现…

分布式ID介绍实现方案总结

分布式 ID 介绍 什么是 ID? 日常开发中,我们需要对系统中的各种数据使用 ID 唯一表示,比如用户 ID 对应且仅对应一个人,商品 ID 对应且仅对应一件商品,订单 ID 对应且仅对应一个订单。 我们现实生活中也有各种 ID&…

原来服务器这么有用-使用轻量应用服务器搭建专属自己PDF处理工具

原来服务器这么有用-使用轻量应用服务器搭建专属自己PDF处理工具 1、前言 PDF文件是日常办公中经常使用的一种文档格式。最近,青阳面临一个问题:某公司发送过来的文件需要我们进行印章流程,但由于该公司系统在电子文件加盖电子公章后会自动…

OpenGL ES 渲染 NV21、NV12 格式图像有哪些“姿势”?

使用2个纹理实现 NV21 格式图像渲染 前文提到渲染 NV21 格式图像需要使用 2 个纹理,分别用于保存 Y plane 和 UV plane 的数据,然后在片段着色器中分别对 2 个纹理进行采样,转换成 RGB 数据。 OpenGLES 渲染 NV21或 NV12 格式图像需要用到 GL_LUMINANCE 和 GL_LUMINANCE_A…

Covalent (CQT):构建全新链上协议收入体系,致力于财务透明

在充满活力的区块链世界以及去中心化技术领域,Covalent Network(CQT) 正在通过其创新的协议收入模型对链上经济体系进行重塑。这一特性与传统金融系统不同,这一特性带来了无与伦比的可访问性,消除了中介,并…

电商平台如何安全的出金入金?如何合规避税?如何消除泡沫?

大家好 我是一家软件开发公司的产品经理 我叫吴军 最近银行卡风控非常严重,不管是电商行业,各行各业都是如此,连去银行取大额都要提前预约并且说明来意。 做生意的老板都知道,但凡有一笔资金被冻结,就有可能导致资金…

掌握 Android JNI 基础

写在前面 最近在看一些底层源码,发现 JNI 这块还是有必要系统的看一下,索性就写一写博客,加深加深印象🍻 本文重点聊一聊一些干货,避免长篇大论 JNI 概述 JNI 是什么? 定义:Java Native In…

vue3使用@imengyu/vue3-context-menu完成antv/x6右键菜单

1、下载插件&#xff1a; npm i imengyu/vue3-context-menu1.3.6 2、在页面中引入并使用插件&#xff1a; <script setup> import ContextMenu from "imengyu/vue3-context-menu";graph.on("node:contextmenu", ({ e, x, y, cell, view }) > {ha…

JAVA 学习 面试(十一)常见设计模式

设计模式 ## 1、创建型模式 对象实例化的模式&#xff0c;创建型模式用于解耦对象的实例化过程。 单例模式&#xff1a;某个类智能有一个实例&#xff0c;提供一个全局的访问点。 工厂模式&#xff1a;一个工厂类根据传入的参量决定创建出哪一种产品类的实例。 抽象工厂模式&a…

Linux系统中Docker的安装及常用组件的安装

什么是Docker Docker是一个开源的应用容器引擎&#xff0c;它可以让开发者将应用程序及其依赖项打包到一个可移植的镜像中&#xff0c;并发布到任何流行的操作系统上。Docker使用沙箱机制来隔离容器&#xff0c;使其相互独立&#xff0c;并简化了应用程序的部署和管理。沙箱机…

推荐一款简单好用的数据库建模工具

程序员的公众号&#xff1a;源1024&#xff0c;获取更多资料&#xff0c;无加密无套路&#xff01; 最近整理了一份大厂面试资料《史上最全大厂面试题》&#xff0c;Springboot、微服务、算法、数据结构、Zookeeper、Mybatis、Dubbo、linux、Kafka、Elasticsearch、数据库等等 …

市面上的小型办公室都是哪些人在租?

市面上的小型办公室&#xff0c;又称服务式办公室&#xff0c;是一种将传统的写字楼进行精装修&#xff0c;分割成若干个独立的小型办公空间&#xff0c;提供给不同的租户的新型办公模式。那么&#xff0c;市面上的小型办公室都是哪些人在租&#xff1f;本文将从租户的特点和需…