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

【问题标题】：VS Code: how to add all default snippet of HTML files into react js files?VS Code：如何将所有默认的 HTML 文件片段添加到反应 js 文件中？
【发布时间】：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：希望我的回答对您有所帮助。如果它希望您接受并投票支持我的答案...这也将帮助其他开发人员...谢谢:)

标签： javascript html reactjs visual-studio-code jsx

【解决方案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 中一样

【讨论】：