Edycja Visual Studio JSX

Question

Używam Visual Studio 2013 do budowy strony internetowej, która używa React i JSX dla interfejsu użytkownika. Wszystko działa dobrze, ale tworzy wolne środowisko programistyczne, ponieważ pliki .jsx są traktowane jako zwykły tekst. Więc nie podświetlanie składni i nie można ustawić punktów przerwania, aby pomóc w debugowaniu.

Czy istnieje sposób na poprawę tego doświadczenia lub czy muszę przełączyć się do innego edytora plików jsx?

Answer 1

Dwie sztuczki mogę polecić:

1) Można dokonać Visual Studio wyświetla plik .jsx z JavaScript formatowania. W Visual Studio otwórz Narzędzia> Opcje> Edytor tekstu> Rozszerzenia plików. Ustaw rozszerzenie na "jsx" i wybierz edytor javascript i kliknij "Dodaj". Może być konieczne zamknięcie i ponowne otwarcie VS, aby zobaczyć zmiany. Jeśli zachowasz metodę render() na dole pliku .jsx, działa ona całkiem dobrze.

2) Punkty przerwania: nie, nie można dodać ich z wyprzedzeniem, ale istnieje obejście problemu. Po uruchomieniu aplikacji internetowej w Visual Studio nowy folder otwiera się w oknie Eksploratora rozwiązań o nazwie "Dokumenty skryptowe". Kod z przekształconych plików .jsx jest połączony w tym pliku "bloku skryptu". Możesz dodać punkty przerwania tutaj po uruchamianiu aplikacji internetowej w Visual Studio, po załadowaniu strony internetowej.

Trzeba przyznać, że te punkty przerwania są tracone natychmiast po zatrzymaniu debuggera. Następnym razem, gdy uruchomisz program, musisz ustawić je ponownie. Ale przynajmniej możesz postawić stopę w drzwiach.

Jeśli chcesz wejść do kodu, który już uruchomić przed strony internetowej jest pełna załadowany, dodać polecenie alert("here"); w JSX tuż przed linią chcesz włamać. Uruchom kod, a gdy pojawi się wyskakujące okienko, nie naciskaj OK. Przejdź do debugera VS, dodaj punkt przerwania w pliku bloku skryptu, a następnie naciśnij przycisk OK. Kod powinien natychmiast zatrzymać się w punkcie przerwania.