[TOC] #### 1. 插件介紹 --- [點擊安裝 Template String Converter 插件](https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter) Template String Converter 翻譯后:模板字符串轉(zhuǎn)換器。 插件作用:當 JavaScript 字符串中鍵入 `${` 時自動將引號轉(zhuǎn)為反引號,當刪除 `${` 時自動將反引號轉(zhuǎn)為普通引號 功能示例:在字符串中需要引入變量,鍵入 `${` 定界符自動變?yōu)榱朔匆? ```javascript const desc = "my name is " const desc = `my name is ${}` ``` #### 2. 插件配置 --- | 配置 | 描述 | | ------------ | ------------ | | template-string-converter.enabled | 插件是否啟用 | | template-string-converter.validLanguages | 哪些語言中可以使用該插件 | | template-string-converter.quoteType | 哪種引號生效,single 單引號 double 雙引號 both 單雙引號都支持 | | template-string-converter.convertOutermostQuotes | 在嵌套引號的情況下,將最外面的引號轉(zhuǎn)換為反引號 | | template-string-converter.autoRemoveTemplateString | 刪除 `${` 后自動轉(zhuǎn)為常規(guī)引號 | | template-string-converter.convertWithinTemplateString | 在模板字符串中,當鍵入 `${` 時,將字符串轉(zhuǎn)換為模板字符串 | | template-string-converter.addBracketsToProps | 轉(zhuǎn)換為反引號后使用花括號包裹 | 插件默認只支持 5 種語言,如果需要更多語言支持,比如:vue 和 html,打開配置文件添加即可 ``` { "template-string-converter.validLanguages": [ "svelte", "typescript", "javascript", "typescriptreact", "javascriptreact" ] } ``` ![](https://img.itqaq.com/art/content/ad2582c0b0b9b8df750b1edb5d020533.png) #### 3. 我的配置 --- 下面是我使用的自定義配置: ```json { // Template String Converter 模板字符串轉(zhuǎn)換器 "template-string-converter.autoRemoveTemplateString": true, "template-string-converter.convertWithinTemplateString": false, "template-string-converter.validLanguages": [ "vue", "html", "svelte", "typescript", "javascript", "typescriptreact", "javascriptreact" ] } ```