VSCode React JSX Tab键快速生成标签对 配置方法

Intro

• emmet是前端 标签代码块 形式代码书写的利器。
  而在VSCode中，默认有emmet的扩展。

• JSX是React语法中，用于快速组装标签代码块的一种写法。
  但是一般情况下需要配置才可以使用(不属于HTML原生的标签)。
  主要配置就是两项：

"emmet.triggerExpansionOnTab": true,
"emmet.includeLanguages": {
   "javascript": "javascriptreact"
},

配置

在默认的配置文件中查找到了两项配置：

// Enable Emmet abbreviations in languages that are not supported by default. 
// Add a mapping here between the language and emmet supported language.
//  E.g.: `{"vue-html": "html", "javascript": "javascriptreact"}`
"emmet.includeLanguages": {},

// When enabled, Emmet abbreviations are expanded when pressing TAB.
"emmet.triggerExpansionOnTab": false,

修改自己的配置文件即可(注意JSON文档的层级、逗号等)。

我的配置文件：
从：

{    
    "remote.SSH.remotePlatform": {
        "wuyujin.com": "linux"
    }
}

修改为：

{    
    "emmet.triggerExpansionOnTab": true,   
    "emmet.includeLanguages": {
        "javascript": "javascriptreact"
    },
    "remote.SSH.remotePlatform": {
        "wuyujin.com": "linux"
    }
}

重启VSCode即可。

关于 VSCode 的默认配置和用户自定义配置相关，见：
VSCode中的用户自定义配置文件settings.json和默认配置defaultSettings.json