Visual Studio-Bearbeitung von JSX

Question

Ich verwende Visual Studio 2013, um eine Website zu erstellen, die React und JSX für die Benutzeroberfläche verwendet. Dies alles funktioniert gut, sorgt aber für eine langsame Entwicklungsumgebung, da die .jsx-Dateien als reiner Text behandelt werden. Also keine Syntax-Hervorhebung und Sie können keine Breakpoints setzen, um das Debuggen zu erleichtern.

Gibt es eine Möglichkeit, dieses Erlebnis zu verbessern, oder muss ich für die jsx-Dateien zu einem anderen Editor wechseln?

Answer 1

Zwei Tricks, die ich empfehlen kann:

1) Sie können Visual Studio eine .jsx Datei mit Javascript Formatierung machen anzuzeigen. Öffnen Sie in Visual Studio Extras> Optionen> Texteditor> Dateierweiterungen. Setzen Sie die Erweiterung auf "jsx" und wählen Sie den Javascript-Editor und klicken Sie auf "Hinzufügen". Möglicherweise müssen Sie VS schließen und erneut öffnen, um die Änderungen zu sehen. Wenn Sie Ihre render()-Methode am Ende Ihrer .jsx-Datei speichern, funktioniert das ziemlich gut.

2) Haltepunkte: Nein, Sie können sie nicht vorzeitig hinzufügen, aber es gibt eine Problemumgehung. Wenn Sie Ihre Webanwendung in Visual Studio ausführen, wird im Fenster des Projektmappen-Explorers ein neuer Ordner namens "Skriptdokumente" geöffnet. Der Code aus Ihren transformierten .jsx-Dateien wird in dieser "Skriptblock" -Datei zusammengefügt. Sie können hier Haltepunkte hinzufügen nach Starten der Webanwendung in Visual Studio, sobald die Webseite geladen hat.

Zugegeben, diese Haltepunkte gehen verloren, sobald Sie den Debugger stoppen. Wenn Sie das Programm das nächste Mal ausführen, müssen Sie sie erneut einstellen. Aber wenigstens kannst du deinen Fuß in die Tür bekommen.

Wenn Sie in den Code brechen mögen, die bereits vor die Webseite geladen ist voll ausgeführt wird, einen alert("here"); Befehl in der jsx fügt kurz vor der Linie, die Sie in brechen wollen. Führen Sie den Code aus, und drücken Sie nicht auf OK, wenn das Popup angezeigt wird. Wechseln Sie zu dem VS-Debugger, fügen Sie Ihren Haltepunkt in der Skriptblockdatei hinzu, und drücken Sie dann die OK-Taste. Der Code sollte sofort an Ihrem Haltepunkt anhalten.