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

你的名字 2023-02-23 16:20 13阅读 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

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 react antd的tab标签切换时调用方法

源码： //defaultActiveKey:默认选择的版面 //activeKey：切换后的版面 <Tabs defaultActiveKey="0" active

今天药忘吃喽~/ 2023年05月30日 04:59/ 0 赞/ 17 阅读

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

Intro [emmet][]是前端标签代码块形式代码书写的利器。而在VSCode中，默认有emmet的扩展。 JSX是React语法中，用

你的名字/ 2023年02月23日 16:20/ 0 赞/ 14 阅读

相关 React学习 -- JSX

React为了方便组件化，需要构建HTML结构化页面。那么React是如何操作的呢？答案是，React通过创建与更新虚拟元素来管理整个虚拟DOM。虚拟DOM是什么：由于DO

秒速五厘米/ 2022年06月17日 11:49/ 0 赞/ 248 阅读

相关 React之JSX

React JSX React 使用 JSX 来替代常规的 JavaScript。 JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。我们不需

心已赠人/ 2022年04月16日 03:46/ 0 赞/ 294 阅读

相关 vscode编写react代码 jsx中html标签tab键自动补全(2018 12 24亲测有效)

> ctrl+shift+p 然后在搜索栏中搜索setting > 点击进入setting界面 > > ![watermark_type_ZmFuZ3poZW5

Myth丶恋晨/ 2022年04月10日 03:39/ 0 赞/ 215 阅读

相关 layui tab标签右键关闭菜单

layui tab标签右键关闭菜单，包括：关闭当前（closethis）、关闭所有（closeall）、关闭其它（closeothers）、关闭左侧所有（closelef

秒速五厘米/ 2022年02月27日 01:24/ 0 赞/ 1123 阅读

相关 vscode 快速生成React代码块

1、安装插件 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0

悠悠/ 2021年08月29日 18:41/ 0 赞/ 647 阅读

相关 vscode 如何格式化react代码(jsx)？

当你用vscode写完react的jsx语法，会是下面这个鸟样 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

曾经终败给现在/ 2021年08月27日 20:45/ 0 赞/ 798 阅读

相关 vscode tab键快捷生成元素html标签

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

╰半夏微凉°/ 2021年07月24日 16:25/ 0 赞/ 1135 阅读

相关 react jsx语法

jsx语法 (1)遇到{}按照js语法解析,无<>时也按照js语法解析 (2)遇到<>按照html语法解析 (3)遍历时,每一个

ゝ一世哀愁。/ 2021年07月24日 15:17/ 0 赞/ 509 阅读