Question

当我在Visual Studio Code中编辑下面的示例HTML页面时（借用了Facebook的React教程并稍加编辑），如果我在脚本块中编写任何Javascript代码，那么不是语法突出显示。但是如果我将脚本块类型更改为“text / javascript”，则语法突出显示有效。但是，任何React-y / JSX代码都不起作用，因为它通过Babel工作。

有没有办法让脚本标记“type”属性设置为“text / babel”，同时在Visual Studio Code中有正确的语法高亮？

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Tutorial</title>
    <script src="https://npmcdn.com/react@15.3.0/dist/react.js"></script>
    <script src="https://npmcdn.com/react-dom@15.3.0/dist/react-dom.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="https://npmcdn.com/jquery@3.1.0/dist/jquery.min.js"></script>
    <script src="https://npmcdn.com/remarkable@1.6.2/dist/remarkable.min.js"></script>
  </head>
  <body>
    <div id="content"></div>
    <script type="text/babel">
      ReactDOM.render(
        <div>Hello world!</div>,
        document.getElementById('content')
      );
    </script>
  </body>
</html>

Answer 1

我现在找到了解决方法。

打开：(VS code home dir)\resources\app\extensions\html\syntaxes\html.json，然后编辑脚本标记的正则表达式。这解决了我的问题。

Answer 2

这是一种解决方法，可能会更好地在后期构建过程中更改此功能，但我发现使用此新功能 TagHelpers 可以轻松实现此功能，这将有助于替换< em> jel 值 babel

添加文件 TagHelpers / ScriptTagHelper.cs

[HtmlTargetElement("script", Attributes = "to_babel")]
public class ScriptTagHelper : TagHelper
{
   public override void Process(TagHelperContext context, TagHelperOutput output)
   {
       output.Attributes.SetAttribute("type", "text/babel");
   }
}

在您的页面 Index.cshtml

中

<script type="text/javascript" to_babel>

不要忘记在 _ViewImports.cshtml 或 Index.cshtml

中导入TagHelpers

@using app1
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, app1

瞧！这就像巴贝尔一样。

在Visual Studio代码中支持脚本类型=“text / babel”

2 个答案: