Visual Studio 2015 JSX/ES2015 подсветка синтаксиса

в VS2015 Update-3 и NTVS 1.2 установлен, просто установка Редактор Машинописного Текста как редактор по умолчанию для расширения файла jsx сделал трюк для меня.

1) Открыть Инструменты>Параметры > Текстовый Редактор > Расширение Файла.

2) типа jsx в расширение, выберите Редактор Машинописного Текста как редактор, и нажмите кнопку Применить.

EDIT: Visuals studio 15 переименована в Visual Studio 2017: вы можете получить RC здесь:https://www.visualstudio.com/vs/visual-studio-2017-rc/

Будущее Решение:

визуальные студии "15" предварительный просмотр поддержка 2 JSX собственной реагировать нестандартно. Вы можете включить ту же самую (Salsa) библиотеку Javascript-сервисов, что и VS Code.

вот релиз записи: https://www.visualstudio.com/en-us/news/releasenotes/vs15/vs15-relnotes

Сальса: https://github.com/Microsoft/TypeScript/wiki/Using-the-Salsa-Preview-in-Visual-Studio-15-Preview

решение '3':

благодаря проницательности Адама в его ответе, я получил эту работу с Бабель и плагины/пресеты. Стоит сначала прочитать его ответ, если вы пытаетесь это сделать.

вам нужно nodeJs и npm установлен, прежде чем идти дальше, и, возможно, резервное копирование любых файлов, прежде чем изменять их.

я использую реагировать, es2015 Плагины stage1 пресеты здесь, но вы можете использовать любые Плагины вам нравится

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

2. установите следующие пакеты:

   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. добавить зависимости к server.js ниже 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. заменить на req.on('end' задание 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. перезапустите visual studio, закройте и снова откройте любой .jsx файлы и наслаждаться подсветкой синтаксиса babel: -)

Примечания
Дайте синтаксическому анализатору возможность начать работу после запуска, visual studio сделает следующее При загрузке в a .jsx файл в первый раз:

1. создать папку в %localappdata%\Temp\ С stderr.txt где вы можете найти журнал любых ошибок и stdout.txt что будет вот что я тебе скажу {port} сервер работает, а также регистрирует другую информацию.
2. запустите сервер nodeJs, работающий на localhost:{port} который принимает JSX как сообщение на /transformJsxFromPost и возвращает номер строки и номер столбца первой ошибки, с которой он сталкивается как объект json в visual studio

мне пришлось отключить javascript intellisense для файлов jsx, как показывает Адам в решении 1 в своем ответе:

в Visual Studio выберите Сервис > Параметры > текст Редактор > JavaScript > IntelliSense, затем снимите флажок Показать синтаксические ошибки и ОК.

при отключенном javascript intellisense оба react-server в комплекте с vs и babel, поскольку я заменяю его здесь, оба возвращают только первую ошибку, с которой они сталкиваются, поэтому вы не должны ожидать выделения всех ошибок во всем файле, но они появляются при вводе, если вы сохраняете свой код без ошибок.

я думаю, теперь все, что осталось сделать, это получить elementMappings за правильно - решение 4 может быть? : -)

пытаясь исследовать это, я понял простой способ работы с файлами jsx во всех версиях Visual Studio. Это не идеально, но работает для меня.

загрузите последнюю версию кода Visual Studio [ https://code.visualstudio.com/updates ] затем щелкните правой кнопкой мыши файл jsx в любой версии Visual Studio у вас есть и выберите " Открыть с помощью...'. Выберите "Добавить" и перейдите к недавно загруженному коду Visual Studio и сделайте это по умолчанию.

Надежда это помогает людям беспокоиться о необходимости обновления.

он упоминается в комментариях выше @TheQuickBrownFox, но скрыт по умолчанию( необходимо развернуть все, чтобы увидеть его), поэтому резюмируя, что я сделал, чтобы исправить проблему в последнем обновлении сообщества Visual Studio 2015 3:

100% с Решение 1 Адама Вебера: https://stackoverflow.com/a/34110461/1633913 (установка Уровень Языка JavaScript в ReSharper to ECMAScript 2016 и чека включить JSX ... in то же самое окно + отключение показать синтаксические ошибки в vs JavaScript IntelliSense options)

решение 2 Адама Вебера: https://stackoverflow.com/a/34110461/1633913, но немного изменен; целевой файл, где вы должны заменить:

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

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

действительно находится здесь: C:\Program Files (x86)\Microsoft Visual Studio 14.0\Web\External\vs-task-server\react-commands.js

перезагрузите VS, и все готово.