VS Code：如何将所有默认的 HTML 文件片段添加到反应 js 文件中？

Posted 2023-02-21

【中文标题】VS Code：如何将所有默认的 HTML 文件片段添加到反应 js 文件中？

【英文标题】：VS Code: how to add all default snippet of HTML files into react js files?

【发布时间】：2021-04-08 09:04:11

【问题描述】：

我学过 html、js 和 css。现在我想学习 React。 现在我非常习惯于使用诸如div.className 之类的 HTML 文件的 sn-ps 并且按 Enter 可以得到<div class="className"></div>。 使用 React 时，HTML 部分返回到一个 js 文件中。 如何将 HTML 文件的 VS Code 中的所有默认 sn-p 添加到 react js 文件中？

【问题讨论】：

您可能必须首先从“JS 上下文”移动到“XML 上下文”——div.className 是完全有效的 javascript，不应扩展为任何内容。尝试输入<>div.className 或类似的内容

@mistertl：希望我的回答对您有所帮助。如果它希望您接受并投票支持我的答案...这也将帮助其他开发人员...谢谢:)

【参考方案1】：

如果找不到 Emmet 插件

根据official page 无需添加扩展名。检查版本 1.51

在 Visual Studio Code 中内置了对 Emmet sn-ps 和扩展的支持，无需扩展。 Emmet 2.0 支持大部分 Emmet Actions，包括扩展 Emmet 缩写和 sn-ps。

只需按 cmd+P（macOS）或 ctrl+P（其他） 并输入 settings.json，打开此文件并如上所述 @Imran Rafiq 相反 添加此行 "emmet.includeLanguages": "javascript": "javascriptreact" ,

就是这样！

【参考方案2】：

首先在 vscode 中安装 emmet 扩展 第二个到preferences/setting.json 安放这个

 "emmet.includeLanguages": 
        "javascript": "javascriptreact"
      ,

会有用的

【参考方案3】：

您需要在VSCode 中安装Emmet 扩展。

然后你需要在你的 VSCode 设置的 settings.json 中添加这行代码，你将拥有 JSX 的所有 emmet 格式。

  "emmet.includeLanguages": 
    "javascript": "javascriptreact"
  ,

如果还没有设置，你也需要这两个设置。

  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,

Emmet 将开始格式化您的 JSX，就像在普通 HTML 中一样