Podświetlanie składni Visual Studio 2015 JSX/ES2015

W VS2015 Update-3 i ntvs 1.2 zainstalowane, po prostu ustawienie edytora TypeScript jako domyślnego edytora dla rozszerzenia pliku jsx załatwiło mi sprawę.

1) Otwórz Narzędzia > Opcje > Edytor Tekstu > Rozszerzenie Pliku.

2) wpisz jsxW rozszerzeniu, Wybierz edytor maszynopisu jako edytor i kliknij Zastosuj.

EDIT : Visuals studio 15 zmienia nazwę na Visual Studio 2017: możesz pobrać RC tutaj: https://www.visualstudio.com/vs/visual-studio-2017-rc/

Przyszłe Rozwiązanie:

Visual Studio " 15 " Preview 2 Obsługa JSX en React po wyjęciu z pudełka. Możesz włączyć tę samą (Salsa) Javascript Service library jak VS Code.

Tutaj wydanie Przypisy: https://www.visualstudio.com/en-us/news/releasenotes/vs15/vs15-relnotes

Salsa: https://github.com/Microsoft/TypeScript/wiki/Using-the-Salsa-Preview-in-Visual-Studio-15-Preview

Rozwiązanie '3':

Dzięki spostrzeżeniom Adama w jego odpowiedzi, mam to działa z babel {[22] } i to wtyczki / presety. Warto najpierw przeczytać jego odpowiedź, jeśli próbujesz tego.

Zanim przejdziesz dalej, musisz zainstalować nodeJs i npm i wykonać kopię zapasową plików przed ich modyfikacją.

używam react, es2015 wtyczki z stage1 presety tutaj, ale możesz używać dowolnych wtyczek

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

2. Zainstaluj następujące pakiety:

   npm install babel-core --save-dev
   npm install babel-preset-es2015 --save-dev
   npm install babel-preset-react --save-dev
   npm install babel-preset-stage-1 --save-dev
   

3. Dodaj zależności do server.js poniżej childProcess

   var childProcess = require('child_process'); //already there
   var babel = require('babel-core');
   var es2015 = require('babel-preset-es2015');
   var react = require('babel-preset-react');
   var stage1 = require('babel-preset-stage-1');
   

4. Zastąp try{}catch{} sekcję req.on('end' przypisania w funkcji transformJsxFromPost:

   try {
   
       var transformed = 
           babel.transform(
               code, 
               {
                   sourceMaps: true, 
                   presets: [
                       es2015, 
                       react, 
                       stage1
                   ]
               }
           );
   
       result = { 
           elementMappings: []
       }
       //I found it least buggy when returning an empty list of elementMappings
       //but i will leave the code i was using to try and dupe it, or 
       //recreate the elementMappings from react-tools
       //
       // result = { 
           // elementMappings: [{
               // 'start': 1,
               // 'end': transformed.code.length,
               // 'generatedCode': transformed.code
           // }], 
           // map: transformed.map, 
           // code: transformed.code
       // }
   }
   catch (e) {
       //the error that react-tools was returning was slightly different, so
       //map the babel error back to the react-tools error that VS 2015 expects
        result = {
            column: e.loc.column,
            description: e.errorMessage,
            errorMessage: e.message + ".. :-(",
            index: e.pos,
            lineNumber: e.loc.line
        };
   }
   

5. Uruchom ponownie visual studio, zamknij i ponownie otwórz dowolny .pliki jsx i ciesz się podświetleniem składni babel :-)

Uwagi
Daj parserowi szansę na rozpoczęcie po uruchomieniu, visual studio wykona następujące czynności po załadowaniu do .plik jsx pierwszy raz:

1. Utwórz folder w %localappdata%\Temp\ z stderr.txt, gdzie znajdziesz dziennik wszelkich błędów i stdout.txt, który powie ci, na czym działa serwer, a także zapisze inne informacje.
2. uruchom serwer nodeJs, działający na localhost:{port}, który akceptuje JSX jako POST na /transformJsxFromPost i zwraca numer linii i numer kolumny pierwszego błędu, który napotka jako obiekt json do visual studio

W Visual Studio przejdź do Narzędzia > Opcje > edytor tekstu > JavaScript > IntelliSense, a następnie odznacz pole Pokaż błędy składni i ok.

Z wyłączonym javascript intellisense, oba react-server w pakiecie z vs i babel, ponieważ zastępuję go tutaj zwracają tylko pierwszy napotkany błąd, więc nie powinieneś oczekiwać, że wszystkie błędy będą podświetlane w całym pliku, ale pojawią się podczas wpisywania, jeśli zachowasz wolny od błędów kod.

Wydaje mi się, że teraz pozostaje tylko uzyskać elementMappings nad prawidłowo-rozwiązanie 4 może? :-)

Próbując to zbadać, zdałem sobie sprawę z prostego sposobu pracy z plikami jsx we wszystkich wersjach Visual Studio. Nie jest idealny, ale działa na mnie.

Pobierz najnowszy kod Visual Studio [ https://code.visualstudio.com/updates ] następnie kliknij prawym przyciskiem myszy plik jsx w dowolnej wersji Visual Studio i wybierz 'Otwórz za pomocą...'. Wybierz "Dodaj" i przejrzyj ostatnio pobrany kod programu Visual Studio i ustaw go jako domyślny.

Hope that helps people martwiąc się o konieczność aktualizacji.

Jest wymieniony w komentarzach powyżej przez @TheQuickBrownFox, ale domyślnie ukryty( potrzebny do rozszerzenia wszystkich, aby go zobaczyć), więc podsumowując, co zrobiłem, aby rozwiązać problem w najnowszej aktualizacji społeczności Visual Studio 2015 3: {]}

100% z roztwór 1 Adam Weber: https://stackoverflow.com/a/34110461/1633913 (ustawienie poziomu języka JavaScript W ReSharper na ECMAScript 2016 i Zaznaczenie włącz JSX ... w tym samym oknie + wyłączenie Pokaż Błędy składniowe w opcjach IntelliSense vs JavaScript)

Rozwiązanie 2 Adam Weber: https://stackoverflow.com/a/34110461/1633913 , ale nieco zmodyfikowany; plik docelowy, w którym należy zastąpić:

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

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

Rzeczywiście jest tutaj: C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\vs-task-server\react-commands.js

Restart VS i gotowe.