实用干货:分享一个""自动转``的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个专栏内容。

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

相关推荐
码界奇点7 分钟前
基于Spring Boot和Vue.js的视频点播管理系统设计与实现
java·vue.js·spring boot·后端·spring·毕业设计·源代码管理
一棵开花的树,枝芽无限靠近你11 分钟前
【face-api.js】2️⃣ NetInput - 神经网络输入封装类
开发语言·javascript·神经网络
TAEHENGV15 分钟前
关于应用模块 Cordova 与 OpenHarmony 混合开发实战
android·javascript·数据库
资深低代码开发平台专家15 分钟前
MicroQuickJS:为极致资源而生的嵌入式JavaScript革命
开发语言·javascript·ecmascript
czlczl2002092516 分钟前
基于 Spring Boot 权限管理 RBAC 模型
前端·javascript·spring boot
nnsix22 分钟前
【C#】HttpPost请求 - Query参数 - URL编码方法
java·javascript·c#
小北方城市网27 分钟前
第 10 课:Node.js 后端企业级进阶 —— 任务管理系统后端优化与功能增强(续)
大数据·前端·vue.js·ai·性能优化·node.js
华仔啊29 分钟前
JavaScript 有哪些数据类型?它们在内存里是怎么存的?
前端·javascript
zhousenshan34 分钟前
vue3基础知识100问
前端·vue.js
异界蜉蝣35 分钟前
Proxy vs Object.defineProperty:Vue3响应式原理的深度革命
开发语言·前端·javascript