Visual Studioコードのスクリプトタイプ= "text/babel"のサポート

Visual Studioコードの下のサンプルHTMLページを編集しています（FacebookのReactチュートリアルから借用して、わずかに編集しました）。スクリプトブロックでは、ではなく、の構文が強調表示されます。しかし、スクリプトブロックタイプを "text/javascript"に変更すると、構文の強調表示が機能します。しかし、React-y/JSXコードは、Babelを介して動作するように配線されているため、動作しません。Visual Studioコードのスクリプトタイプ= "text/babel"のサポート

スクリプトタグの "type"属性を "text/babel"に設定する方法はありますか？また、Visual Studioコードで正しい構文が強調されていますか？

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>React Tutorial</title> 
    <script src="https://npmcdn.com/[email protected]/dist/react.js"></script> 
    <script src="https://npmcdn.com/[email protected]/dist/react-dom.js"></script> 
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script> 
    <script src="https://npmcdn.com/[email protected]/dist/jquery.min.js"></script> 
    <script src="https://npmcdn.com/[email protected]/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>

出典

2016-08-29 arntjw

私は今これに対する解決策を見つけました。

オープン：(VS code home dir)\resources\app\extensions\html\syntaxes\html.jsonを開き、scriptタグの正規表現を編集します。それは私の問題を解決しました。

出典

2016-10-19 14:21:28 arntjw

-1

まあ、これはおそらく、ポストビルドプロセスでこれを変更した方がよいでしょう、回避策ですが、私はこの新しい機能でJavaScriptを交換するのに役立ちますTagHelpersそれを行う簡単な方法を見つけましたバベル

によって値はそうTagHelpers/ScriptTagHelper.cs

ファイルを追加しますあなたのページで

Index.cshtml

<script type="text/javascript" to_babel>

そして_ViewImports.cshtmlにしたり、Index.cshtml

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

出来上がりにTagHelpersをインポートすることを忘れてはいけません！これはバベルとしてレンダリングされます。

出典

2016-10-06 03:34:32

質問をもう一度読んでください。これは、ASP.NET MVCではなくVisual Studioのコードでの構文の強調表示です。 – arntjw

はい、私が言っていることは、ハイライトを付けるために 'text/javascript'として保存し、後でバーベルに変更することです。私はworkaourndでasp.netを使用しています。 –

Visual Studioコードのスクリプトタイプ= "text/babel"のサポート

答えて

関連する問題