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

你的名字 2023-02-23 16:20 79阅读 0赞

## 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][VSCode_settings.json_defaultSettings.json]

[emmet]: https://www.emmet.io/
[VSCode_settings.json_defaultSettings.json]: https://wuyujin.blog.csdn.net/article/details/89318361