[TOC] #### 1. 插件介紹 --- [點擊安裝 Template String Converter 插件](https://marketplace.visualstudio.com/items?itemName=meganrogge.template-string-converter) Template String Converter 翻譯后：模板字符串轉換器。 插件作用：當 JavaScript 字符串中鍵入 `${` 時自動將引號轉為反引號，當刪除 `${` 時自動將反引號轉為普通引號 功能示例：在字符串中需要引入變量，鍵入 `${` 定界符自動變為了反引號 ```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 | 在嵌套引號的情況下，將最外面的引號轉換為反引號 | | template-string-converter.autoRemoveTemplateString | 刪除 `${` 后自動轉為常規引號 | | template-string-converter.convertWithinTemplateString | 在模板字符串中，當鍵入 `${` 時，將字符串轉換為模板字符串 | | template-string-converter.addBracketsToProps | 轉換為反引號后使用花括號包裹 | 插件默認只支持 5 種語言，如果需要更多語言支持，比如：vue 和 html，打開配置文件添加即可 ``` { "template-string-converter.validLanguages": [ "svelte", "typescript", "javascript", "typescriptreact", "javascriptreact" ] } ```  #### 3. 我的配置 --- 下面是我使用的自定義配置： ```json { // Template String Converter 模板字符串轉換器 "template-string-converter.autoRemoveTemplateString": true, "template-string-converter.convertWithinTemplateString": false, "template-string-converter.validLanguages": [ "vue", "html", "svelte", "typescript", "javascript", "typescriptreact", "javascriptreact" ] } ```