Выделение синтаксиса Visual Studio 2015 JSX/ES2015

Ответ 1

ОБНОВЛЕНИЕ (2017-02)

Node Инструменты для Visual Studio (NTVS) используют механизм анализа Salsa с версии v1.2, а использование NTVS, скорее всего, является наименьшим сопротивлением для поддержки JSX.

https://github.com/Microsoft/nodejstools

Прочтите (и подтвердите) этот ответ для более подробной информации: fooobar.com/questions/96381/...

ОРИГИНАЛЬНЫЙ ОТВЕТ

Я столкнулся с той же проблемой и нашел два решения: один с использованием ReSharper и один модифицирующий внешние веб-инструменты Visual Studio.

РЕШЕНИЕ 1

В ReSharper 10:

• откройте диалоговое окно Параметры
• Редактирование кодa > JavaScript > Инспекции выберите ECMAScript 6 на уровне на уровне JavaScript.
• убедитесь, что выбран синтаксис Включить JSX в .JS файлах (при условии, что вы используете синтаксис JSX).
• вам также необходимо отключить синтаксические ошибки javascript в Visual Studio следующим образом:
  • перейти к Инструменты > Параметры > Текстовый редактоp > JavaScript > IntelliSense
  • снимите флажок Показать синтаксические ошибки и нажмите ОК.
• перезагрузить решение VS

После перезагрузки решения красные squigglies исчезли для меня. Однако подсветка синтаксиса для JSX не работает. Начальный сегмент любых элементов, объявляемых в функции render, не имеет правильной раскраски - но это легко игнорировать.

Я должен также упомянуть, что для файлов javascript требуется расширение .js. Если вы дадите им расширение .jsx, вы получите красные squigglies в своем первом заявлении на импорт. Сообщение об ошибке будет JSX Parser: illegal import declaration. (Это можно устранить, используя решение № 2 ниже)

ОБНОВЛЕНИЕ: благодаря @SntsDev для этого обходного пути Существует способ избежать наименования файлов .jsx как .js:

• в Visual Studio перейдите к Функции > Текстовый редактоp > Расширение файла
• добавьте jsx и назначьте его Редактору JavaScript

РЕШЕНИЕ 2

Любопытство стало лучше меня, и я хотел исследовать, было ли решение без решения ReSharper. Visual Studio использует локально управляемый сервер node с именем react-server для синтаксического разбора JSX. Этот модуль можно найти здесь:

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

ОБНОВЛЕНИЕ для обновления Visual Studio 2015 3 Благодаря @TheQuickBrownFox для комментария/обновления. Для обновления 3 расположение команд react-server теперь находится в этом файле:

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

Дальнейшая проверка файла server.js или react-commands.js из вышеупомянутых папок (ов), есть функция с именем transformJsxFromPost или transformJsx. Этот метод содержит следующую строку: var transformed = reactTools.transformWithDetails(code, { elementMap: true });. Это ссылка на модуль react-tools (https://www.npmjs.com/package/react-tools), который имеет больше возможностей для разбора ES6.

Таким образом:

• замените эту строку:

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

• со следующим:

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

  Обратите внимание на добавление флагов --es6module и --harmony, которые инструктируют react-tools обрабатывать входящий код как ES6.

• отключить синтаксические ошибки javascript в Visual Studio следующим образом:

  • в Visual Studio перейдите к Инструменты > Параметры > Текстовый редактоp > JavaScript > IntelliSense
  • снимите флажок Показать синтаксические ошибки и нажмите ОК

• ВАЖНО: перезапустите Visual Studio. Ваши файлы .jsx с кодом ES6 больше не должны иметь красных squiggles на вашем коде ES6.

ПРИМЕЧАНИЯ:

• Я не знаю, повлияет ли изменение, указанное в РЕШЕНИИ 2, на файл server.js на код, отличный от ES6. Поэтому реализуйте на свой страх и риск.
• Кроме того, это вполне возможно/вероятно, ваши изменения могут быть перезаписаны с последующим обновлением в Visual Studio.
• Было бы здорово/забавно заменить использование react-tools внутри react-server с помощью Babel CLI. ОБНОВЛЕНИЕ: Благодаря @NickDewitt, похоже, он смог выполнить эту работу: fooobar.com/questions/96381/...

Ответ 2

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

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

2) Введите jsx в Extension, выберите TypeScript Редактор в качестве редактора и нажмите "Применить".

Ответ 3

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

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

Visual Studio "15" Preview 2 поддерживает JSX en React из коробки. Вы можете включить ту же самую (Salsa) Javascript Service, такую ​​как 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

Ответ 4

РЕШЕНИЕ '3':

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

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

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

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

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

  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
  

• Добавьте зависимости < <22 > ниже 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');
  

• Замените раздел try{}catch{} назначения 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
       };
  }
  

• Перезапустите визуальную студию, закройте и заново откройте любые .jsx файлы и получите подсветку синтаксиса babel: -)

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

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

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

В Visual Studio откройте "Инструменты" > "Параметры" > "Текстовый редактор" > "JavaScript" > IntelliSense, затем снимите флажок "Показать синтаксические ошибки" и "ОК".

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

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

Ответ 5

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

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

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

Ответ 6

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

100% от Решение 1 от Адама Вебера: fooobar.com/info/96381/... (установка Уровень языка JavaScript) в ReSharper до ECMAScript 2016 и установите флажок Включить JSX... в том же окне + отключить Показать синтаксис ошибки в опциях VS JavaScript IntelliSense)

Решение 2 от Адама Вебера: fooobar.com/info/96381/..., но слегка изменено; целевой файл, в который вы должны заменить:

это: 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, и все готово.