Visual Studio：在嵌入式 babel 脚本中自动完成 HTML 标记答案

【问题标题】：Visual Studio: Auto complete HTML tags inside an embedded babel scriptVisual Studio：在嵌入式 babel 脚本中自动完成 HTML 标记
【发布时间】：2019-07-30 09:50:56
【问题描述】：

我有一个嵌入了 babel 脚本的 html 文件

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>React tutorial</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.2/browser.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">

    </script>
  </body>
</html>

我希望当我在 babel 脚本中输入时是这样的

    <script type="text/babel">

    </script>

然后我输入类似<div> 的内容，软件会通过在其中输入文本</div> 来自动完成结束标签

Visual Studio 市场的 auto close tag 扩展和 sublime babel extension 都无法做到这一点。

我也听从this post 的建议，创建了一个名为.vscode/settings.json 的文件，其中包含

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},
"emmet.triggerExpansionOnTab": true
"emmet.includeLanguages": {
    "javascript": "html"
}

这也没有效果。

【问题讨论】：

这可能是一个愚蠢的问题，但“为什么？”。如果你只学习 React 教程，你不必使用 babel，因为大多数现代浏览器已经具备 React 所需的功能。因此无需转译。
@MichałKostrzyński 因为我在使用 babel
好吧，从我说的开始——我忘记了在使用内联脚本标记时，如果没有 babel，JSX 就不能正确处理。无论哪种方式 - VSCode 没有得到这种设置的原因可能是因为没有人这样做。如果你想学习 React，使用 create-react-app 可能会更容易也更舒服（因为所有热重载的东西）。
@MichałKostrzyński 为什么 create-react-app 更好？我很确定我在阅读 reacts 介绍教程 reactjs.org/tutorial/tutorial.html 时使用了它，并且似乎在我的标题中包含这三个脚本（包括 babel）更容易。

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

【解决方案1】：

它对我有用。你确定你做对了吗？

{
    "emmet.includeLanguages": {
        "javascript": "html"
     }
}

您可以删除文件并重新添加吗？就是我扔的。

来源：

https://code.visualstudio.com/docs/languages/html

https://docs.emmet.io/cheat-sheet/

【讨论】：

特别是在 babel 脚本中。如在中
请不要包含代码图片，包含格式正确的文本（使用编辑器中的{}按钮。代码图片不能复制和粘贴。

【解决方案2】：

javascript - Support for script type="text/babel" in Visual Studio Code

也许你想看看，这个问题以前讨论过并解决了。至于我的想法，VS Code 使用正则表达式进行智能感知，当我查看这些正则表达式代码时，我已经看到了 babel，但它对我来说也不是毫无意义的。

【讨论】：

所以答案上有一条评论说“这需要更多信息。例如，“脚本”标签行是哪一行？似乎有多个“。你觉得你能回答这个问题吗？