VSCode 中自定义 JSX 组件的选项卡快捷方式

Posted 2023-02-21

【中文标题】VSCode 中自定义 JSX 组件的选项卡快捷方式

【英文标题】：Tab shortcut for custom JSX components in VSCode

【发布时间】：2019-01-08 18:48:12

【问题描述】：

我刚刚从 Atom 切换到 VSCode。

当我使用 Atom 并在 .js 文件中输入 JSX 时，我可以输入任何内容并按下 tab，它会将我标记的内容变成自定义组件。例如，asdf 然后tab 将给出<asdf></asdf>。

现在我有 VSCode 和 Emmet，但这只是在某些时候有效。我已经对 Emmet 进行了试验，除了基本的自定义组件外，一切正常

所有 html 标记都按预期工作。即div.blue & tab 返回<div className="blue"></div>

嵌套工作asdf>jkl & tab 返回

<asdf>
    <jkl></jkl>
</asdf>

由于某种原因，添加冒号会触发它。 as:df & tab 返回 <as:df></as:df> 但 asdf & tab 不返回 <asdf></asdf>。我只是让光标向前移动。

我不确定 Intellisense 或 Snippets 是否以某种方式干扰。 我安装的相关扩展是 javascript 和 TypeScript Intellisense v0.0.7、Javascript Snippet Pack v0.1.5 和简单的 React Snippets 1.2.2。

这是我的设置：

    "editor.formatOnSave": true,
    "editor.tabSize": 2,
    "editor.wordWrap": "on",
    "prettier.singleQuote": true,
    "prettier.jsxBracketSameLine": true,
    "prettier.semi": false,
    "prettier.useTabs": true,
    "html.format.indentInnerHtml": true,
    "workbench.colorTheme": "Base16 Tomorrow Dark",
    "liveServer.settings.donotShowInfoMsg": true,
    "window.zoomLevel": 0.5,
    "editor.fontSize": 11,
    "emmet.includeLanguages": 
        "javascript": "javascriptreact"
    

【参考方案1】：

我找到了答案。在设置中添加"emmet.triggerExpansionOnTab": true，它将按照我想要的方式工作。默认设置为false