Visual Studio 2015 JSX / ES2015 Syntaxhervorhebung

UPDATE (2017-02)

Node Tools für Visual Studio (NTVS) verwendet die Salsa-Analyse-Engine seit Version 1.2, und NTVS ist wahrscheinlich der Pfad des geringsten Widerstands für JSX-Unterstützung.

Ссылка

Lesen Sie diese Antwort (und Upvote) für weitere Details: Ссылка

ORIGINAL ANTWORT

Ich stieß auf das gleiche Problem und fand zwei Lösungen - eine mit ReSharper und eine mit den externen Web-Tools von Visual Studio.

LÖSUNG 1

In ReSharper 10:

• Öffnen Sie den Dialog Optionen
• unter Code-Bearbeitung & gt; JavaScript & gt; Inspektionen wählen Sie ECMAScript 6 auf der JavaScript-Sprachebene Dropdown
• Stellen Sie sicher, dass die Option JSX-Syntax in .JS-Dateien aktivieren ebenfalls ausgewählt ist (vorausgesetzt, Sie verwenden die JSX-Syntax).
• Sie müssen JavaScript-Syntaxfehler in Visual Studio auch wie folgt deaktivieren:
  • gehen Sie zu Tools & gt; Optionen & gt; Texteditor & gt; JavaScript & gt; IntelliSense
  • Deaktivieren Sie das Kontrollkästchen Syntaxfehler anzeigen und klicken Sie auf OK.
• laden Sie die VS-Lösung
neu

Nach dem Nachladen der Lösung waren die roten Squigglies für mich weg. Die Syntaxhervorhebung für JSX funktioniert jedoch nicht. Das öffnende Segment aller Elemente, die ich in der Funktion render deklariere, hat nicht die richtige Farbe - aber das ist für mich einfach zu ignorieren.

Ich sollte auch erwähnen, dass die JavaScript-Dateien die Erweiterung .js haben müssen. Wenn Sie die Erweiterung .jsx angeben, erhalten Sie bei der ersten Importanweisung rote Squigglies. Die Fehlermeldung lautet JSX Parser: illegal import declaration . (Dies kann mit der folgenden Lösung 2 behoben werden)

UPDATE: Danke an @SntsDev für diese Problemumgehung Es gibt eine Möglichkeit, die .jsx -Dateien nicht als .js zu benennen:

• in Visual Studio, gehen Sie zu Optionen & gt; Text-Editor & gt; Dateierweiterung
• Fügen Sie jsx hinzu und weisen Sie es dem Javascript Editor zu

LÖSUNG 2

Neugier hat mich überwältigt und ich wollte herausfinden, ob es eine Lösung ohne ReSharper gab oder nicht. Visual Studio verwendet ein lokal ausgeführtes Knotenservermodul mit dem Namen react-server , um JSX im laufenden Betrieb zu analysieren. Dieses Modul finden Sie hier:

UPDATE für Visual Studio 2015 Update 3 Danke an @TheQuickBrownFox für den Kommentar / Update. Für Update 3 befindet sich der Speicherort der react-server -Befehle jetzt in dieser Datei:

Wenn Sie die Datei server.js oder react-commands.js aus den oben genannten Ordnern prüfen, gibt es eine Funktion namens transformJsxFromPost oder transformJsx . Diese Methode enthält die folgende Zeile: var transformed = reactTools.transformWithDetails(code, { elementMap: true }); . Dies ist ein Verweis auf das Modul react-tools ( Ссылка ), das mehr Optionen zum Analysieren von ES6 bietet.

Daher:

• Ersetzen Sie diese Zeile:

  var transformed = reactTools.transformWithDetails(code, { elementMap: true });

• mit den folgenden:

  var transformed = reactTools.transformWithDetails(code, { elementMap: true, es6module: "--es6module", harmony: "--harmony" });

  Beachten Sie das Hinzufügen der Flags --es6module und --harmony , die react-tools anweisen, den eingehenden Code als ES6 zu behandeln.

• Deaktivieren Sie JavaScript-Syntaxfehler in Visual Studio wie folgt:

  • in Visual Studio, gehen Sie zu Tools & gt; Optionen & gt; Texteditor & gt; JavaScript & gt; IntelliSense
  • Deaktivieren Sie das Kontrollkästchen Syntaxfehler anzeigen und klicken Sie auf OK

• WICHTIG: Starten Sie Visual Studio neu. Ihre .jsx -Dateien mit ES6-Code sollten auf Ihrem ES6-Code keine roten Schnörkel mehr haben.

HINWEISE:

• Ich weiß nicht, ob die in LÖSUNG 2 umrissene Änderung der Datei server.js Auswirkungen auf Nicht-ES6-Code hat. Nehmen Sie dies auf eigenes Risiko vor.
• Außerdem ist es sehr wahrscheinlich / wahrscheinlich, dass Ihre Änderung bei einem späteren Update auf Visual Studio überschrieben wird.
• Es wäre cool / lustig, die Verwendung von react-tools in react-server durch Babel CLI zu ersetzen. UPDATE: Dank @NickDewitt scheint es ihm gelungen zu sein: Ссылка

In VS2015 Update-3 und NTVS 1.2 wurde einfach der TypeScript Editor als Standardeditor für die Dateierweiterung jsx gesetzt.

1) Öffnen Sie Extras & gt; Optionen & gt; Texteditor & gt; Dateierweiterung .

2) Geben Sie jsx in Extension ein, wählen Sie TypeScript Editor als Editor und klicken Sie auf Anwenden.

LÖSUNG '3':

Dank den Einsichten von Adam in seiner Antwort, habe ich diese Arbeit mit babel und es sind Plugins / Presets. Es lohnt sich, seine Antwort zuerst zu lesen, wenn Sie das versuchen.

Sie brauchen nodeJs und npm installiert, bevor Sie weiter gehen, und vielleicht alle Dateien sichern, bevor Sie sie ändern.

Ich verwende reagiere , es2015 Plugins mit stage1 Presets hier , aber Sie können die Plugins verwenden, die Sie mögen

1. Powershell zu C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\react-server

2. Installieren Sie die folgenden Pakete:

   %Vor%

3. Fügen Sie die Abhängigkeiten zu server.js unter childProcess

   hinzu %Vor%

4. Ersetzen Sie den try{}catch{} -Abschnitt der req.on('end' -Zuordnung in der transformJsxFromPost -Funktion:

   %Vor%

5. Starten Sie Visual Studio neu, schließen und öffnen Sie alle .jsx-Dateien und genießen Sie die Syntax-Hervorhebung von babel: -)

Hinweise
Geben Sie dem Parser nach dem Start eine Chance, sich einzuloggen, Visual Studio wird Folgendes tun, wenn Sie das erste Mal in eine .jsx-Datei laden:

1. Erstellen Sie einen Ordner in %localappdata%\Temp\ mit stderr.txt , wo Sie ein Protokoll aller Fehler finden und stdout.txt , welches Ihnen sagen wird, auf welchem {port} der Server läuft und auch andere Informationen protokolliert.
2. Startet einen nodeJs-Server, der auf localhost:{port} läuft, der JSX als POST auf /transformJsxFromPost annimmt und die Zeilen- und Spaltennummer des ersten Fehlers, der als json-Objekt an visual studio
auftritt, zurückgibt

Ich musste JavaScript intellisense für jsx-Dateien deaktivieren, wie Adam in Lösung 1 in seiner Antwort zeigt:

  

Wechseln Sie in Visual Studio zu Extras & gt; Optionen & gt; Texteditor & gt; JavaScript & gt;   IntelliSense, deaktivieren Sie dann das Kontrollkästchen Syntaxfehler anzeigen und OK aus.

Wenn JavaScript intellisense aus ist, reagieren sowohl der Server als auch das Paket mit vs und babel, da ich es hier ersetze, beide geben nur den ersten Fehler zurück, so dass Sie keine Hervorhebung aller Fehler in Ihrer Datei erwarten sollten Sie werden bei der Eingabe angezeigt, wenn Sie Ihren Code-Fehler freihalten.

Ich denke, jetzt ist es nur noch nötig, die elementMappings richtig zu bekommen - Lösung 4 vielleicht? : -)

Beim Versuch, dies zu recherchieren, habe ich eine einfache Möglichkeit gefunden, mit jsx-Dateien in allen Versionen von Visual Studio zu arbeiten. Es ist nicht perfekt, aber funktioniert für mich.

Laden Sie den neuesten Visual Studio-Code [ Ссылка ] herunter, klicken Sie dann mit der rechten Maustaste auf eine jsx-Datei innerhalb Ihrer Version von Visual Studio, und wählen Sie 'Öffnen mit...'. Wählen Sie "Hinzufügen" und navigieren Sie zu Ihrem zuletzt heruntergeladenen Visual Studio-Code und legen Sie diesen als Standard fest.

Hoffe, dass die Leute sich Sorgen machen müssen, dass sie upgraden müssen.