Как я могу получить правильную подсветку синтаксиса в Visual Studio 2015 для JSX с кодом ES2015?
Он отлично работает, если я удалю ключевые слова import и export:
Я просто обновился до Visual Studio 2015 Enterprise Update 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:
После перезагрузки решения красные squigglies исчезли для меня. Однако подсветка синтаксиса для JSX не работает. Начальный сегмент любых элементов, объявляемых в функции render, не имеет правильной раскраски - но это легко игнорировать.
Я должен также упомянуть, что для файлов javascript требуется расширение .js. Если вы дадите им расширение .jsx, вы получите красные squigglies в своем первом заявлении на импорт. Сообщение об ошибке будет JSX Parser: illegal import declaration. (Это можно устранить, используя решение № 2 ниже)
ОБНОВЛЕНИЕ: благодаря @SntsDev для этого обходного пути Существует способ избежать наименования файлов .jsx как .js:
РЕШЕНИЕ 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. Ваши файлы .jsx с кодом ES6 больше не должны иметь красных squiggles на вашем коде ES6.
ПРИМЕЧАНИЯ:
server.js на код, отличный от ES6. Поэтому реализуйте на свой страх и риск.react-tools внутри react-server с помощью Babel CLI. ОБНОВЛЕНИЕ: Благодаря @NickDewitt, похоже, он смог выполнить эту работу: fooobar.com/questions/96381/...В VS2015 Update-3 и NTVS 1.2, просто установив TypeScript Редактор в качестве редактора по умолчанию для расширения файла jsx помогло.
1) Откройте Инструменты > Параметры > Текстовый редактоp > Расширение файла.
2) Введите jsx в Extension, выберите TypeScript Редактор в качестве редактора и нажмите "Применить".
ИЗМЕНИТЬ: 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
РЕШЕНИЕ '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} сервер работает, а также записывает другую информацию.localhost:{port}, который принимает JSX как POST на /transformJsxFromPost и возвращает номер строки и номер столбца первой ошибки, с которой он сталкивается как объект json для визуальной студииМне пришлось отключить javascript intellisense для jsx файлов, как Адам показывает в решении 1 в своем ответе:
В Visual Studio откройте "Инструменты" > "Параметры" > "Текстовый редактор" > "JavaScript" > IntelliSense, затем снимите флажок "Показать синтаксические ошибки" и "ОК".
Если javascript intellisense выключен, как реагирующий сервер, так и упакованный с 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 от Адама Вебера: 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, и все готово.