2016-08-29 4 views
3

Wenn ich die folgende Beispiel-HTML-Seite in Visual Studio Code (geliehen von Facebook React Tutorial und leicht bearbeitet) bearbeiten, wenn ich Javascript-Code in die schreiben Skriptblock, es ist nicht Syntax hervorgehoben. Aber wenn ich den Skriptblocktyp auf "text/javascript" ändere, funktioniert die Syntaxhervorhebung. Aber dann funktioniert kein React-y/JSX-Code, da er so verdrahtet ist, dass er über Babel funktioniert.Unterstützung für Skripttyp = "Text/Babel" in Visual Studio-Code

Gibt es eine Möglichkeit, das Attribut "type" für das Skript "text" auf "text/babel" zu setzen und gleichzeitig die korrekte Syntaxhervorhebung in Visual Studio Code zu erhalten?

<!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> 

Antwort

2

Ich habe jetzt eine Lösung gefunden.

Öffnen Sie: (VS code home dir)\resources\app\extensions\html\syntaxes\html.json, und bearbeiten Sie die Regex für das Skript-Tag. Das hat das Problem für mich behoben.

+0

Dies ist die Zeile "end": "(? I: (? = /?> | Type \\ s * = \\ s * ('| \" |) (?! text/(javascript | ecmascript | babel) | application/((x -)? javascript | ecmascript | babel)) \\ b)) ",' – phocks

-1

Nun ist dies ein Problem zu umgehen, wird wahrscheinlich besser sein, diesen Prozess in einem Beitrag Build zu ändern, aber ich fand eine einfache Möglichkeit, es mit dieser neuen Funktion TagHelpers zu tun, die die Javascript ersetzen helfen Wert von babel

So fügen Sie eine Datei 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"); 
    } 
} 

In Ihrer Seite Index.cshtml

<script type="text/javascript" to_babel> 

Und nicht vergessen TagHelpers in _ViewImports.cshtml oder in Ihrem Index.cshtml

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

Und voila zu importieren! dies rendern als babel.

+0

Lesen Sie die Frage erneut. Es geht um Syntaxhervorhebung in Visual Studio Code, nicht um ASP.NET MVC. – arntjw

+0

Ja, was ich sage ist, dass Sie es als 'text/javascript' behalten können, Hervorhebung zu haben, und verarbeiten Sie es später, um zu babel zu ändern, in meinem workaournd benutze ich asp.net, Sie können jedes andere Werkzeug verwenden. –

Verwandte Themen