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

Posted 2023-02-21

技术标签:

【中文标题】Visual Studio：在嵌入式 babel 脚本中自动完成 HTML 标记【英文标题】：Visual Studio: Auto complete HTML tags inside an embedded babel script 【发布时间】：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）更容易。 【参考方案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，但它对我来说也不是毫无意义的。

【讨论】：

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

以上是关于Visual Studio：在嵌入式 babel 脚本中自动完成 HTML 标记的主要内容，如果未能解决你的问题，请参考以下文章

如何让 Visual Studio 在调试时使用嵌入式源代码？

如何在Visual Studio中嵌入命令shell

Visual Studio将支持嵌入式RTOSMCU软件开发

visual studio做的辅助怎么开

如何在静态库 (Visual Studio) 中嵌入图标 (.ico)

使用 Visual Studio 进行嵌入式软件开发？