В Sublime Text 3 не работает подсветка Babel скриптов, встроенных в HTML

Question

Код между тегами <script></script> не подсвечивается, когда я ставлю type="text/babel" т. к. использую ReactJS. Редактор — Sublime Text 3. В чём проблема?

score 3 · Answer 1 · edited Apr 13 '17 at 12:53

UPD

Мой feature request, созданный по мотивам данного вопроса, был закрыт, улучшать синтаксис babel-скриптов в HTML разработчики пакета Babel не собираются. Кого ещё можно просить — без понятия.

Таким образом, именно для данного случая придётся или

писать собственный синтаксис (что дело не одного часа),

или

не встраивать инлайновые скрипты Babel в HTML,

или

пользоваться альтернативами Sublime Text.

1. Предупреждение

Лучше не встраивайте инлайновые скрипты, не мучайтесь. На момент написания ответа разработка плагина Babel — по сути, содержащего единственный специальный синтаксис для Babel, приостановлена, поддержка браузерного варианта Babel, встроенного в HTML, плохая, даже очень.

Но можете и почитать данный ответ. Он больше полезен для других во многом аналогичных случаев.

Babel

2. Ограничения

Дефолтный синтаксис HTML.sublime-syntax на момент написания данного ответа не поддерживает babel-скрипты. Неплохо было бы сделать feature request разработчикам Sublime Text, не пакета Babel.
В одном файле нельзя применять 2 или более синтаксисов (или я плохо гуглю). Один файл — один синтаксис.

3. Установка подсветки для babel-скриптов

Скачиваем через Package Control плагин Babel для работы с ReactJS, и Schemr — для простого переключения по цветовым схемам.

Устанавливаем синтаксис JavaScript (Babel) для файлов с расширением html, как расписано здесь.

1. Выбор цветовой схемы

Теперь выбираем цветовую схему с поддержкой Babel-скриптов: можно установить дополнительные схемы, но для примера поставим Monokai Phoenix, встроенную в плагин Babel. Ctrl+Shift+P → Schemr: List All Schemes → выбираем Monokai Phoenix [Dark] → цветовая схема установлена.

4. Проблема 1: не желаю цветовую схему с поддержкой Babel для остальных файлов

Допустим, помимо EcmaScript Вы программируете на Python. Цветовые схемы для Babel плохо подсвечивают Python-скрипты, для Python лучше пользоваться схемой, поддерживающей Python.

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

Не делаем ничего из приведённого в п. 3.1, если сделали — откатитесь. Далее, как расписано в книге «Sublime Text Power User», Preferences → Browse Packages → User → создаём файл HTML.sublime-settings → между {фигурными скобками} вставляем следующий код:

"color_scheme": "Packages/Babel/Monokai Phoenix.tmTheme",

Не путайтесь в JSON-синтаксисе, следите за правильной расстановкой кавычек, скобок и запятых. Например, мой файл HTML.sublime-settings выглядит так:

{
    "color_scheme": "Packages/Babel/Monokai Phoenix.tmTheme",
    "enable_table_editor": true,
    "extensions":
    [
    ]
}

Сохраняем файл → для файлов с расширением html будет применяться цветовая схема Monokai Phoenix, для остальных — Ваша по умолчанию.

5. Как определить путь к файлу цветовой схемы

Процесс во многом аналогичен определению пути к файлу синтаксиса — см. раздел 3 данного ответа.

1. Через встроенную консоль

Открываем файл, для которого применяется схема Monokai Phoenix → Ctrl+' (машинописный обратный апостроф, символ расположен на той же клавише, где кириллическая «ё») → вставляем в открывшуюся консоль следующий код:

print(view.settings().get("color_scheme"))

На выходе должны получить

'Packages/Babel/Monokai Phoenix.tmTheme'.

Результат (без 'кавычек') вставляем как значение параметра color_scheme из предыдущего раздела.

2. При помощи PackageResourceViewer

Устанавливаем плагин PackageResourceViewer → PackageResourceViewer: Open Resource →

ColorSheme - Default, если пользуетесь одной из цветовых тем по умолчанию,
$Название Вашего плагина — если пользуетесь цветовой схемой, установленной в каком-либо из плагинов,

В нашем случае набираем Babel → ищем в выпадающем меню файл с расширением tmTheme → в рассматриваемом случае это Monokai Phoenix.tmTheme. Packages/$Название плагина/$имя файла цветовой схемы.tmTheme и нужно вставлять напротив параметра color_scheme в файле HTML.sublime-settings.

6. Проблема 2: Желательно, чтобы синтаксис `Javascript (Babel)` был только в html-файлах с Babel-скриптами

Применять синтаксис JavaScript (Babel) для HTML-файлов, не содержащих Babel-скрипты нежелательно, поскольку:

В нём не так детально расписаны правила для HTML, CSS и JavaScript, как в дефолтном синтаксисе HTML.
Цветовые схемы для Babel недостаточно поддерживают HTML, CSS и JavaScript, как схемы, специализирующиеся на HTML, CSS и JavaScript.

1. Настройка

В данном подразделе расписано, как настроить следующее:

Когда в html-файлах отсутствуют babel-скрипты, применяется синтаксис для HTML по умолчанию.
Присутствуют — автоматически определяется JavaScript (Babel) синтаксис.

Если проделывали действия из пп. 3.1 и 4, откатите их.

Проделайте действия из пункта 3.1 с одним исключением — файл будет называться не HTML.sublime-settings, а JavaScript (Babel).sublime-settings, где JavaScript (Babel) — имя файла синтаксиса (как узнать имя, см. здесь в разделе 3).

Устанавливаем через Package Control плагин ApplySyntax → Preferences → Package Settings → ApplySyntax → Settings - User → увидите правило "syntaxes": []. В нём между [квадратными скобками] добавляем следующий код и сохраняем файл:

{
    "match": "all",
    "rules":
    [
        {
            "file_path": ".*\\.html$"
        },
        {
            "contains": "<script [^>]*type=\"text\\/babel\"[^>]*>"
        }
    ],
    "syntax": "Babel/JavaScript (Babel)"
}

После сохранения синтаксис файла, содержащего атрибут type="text/babel" в теге script должен измениться на Babel/JavaScript (Babel). Если удалите type="text/babel" из файла и сохраните его → смены синтаксиса обратно не произойдёт, но после того, как Вы закроете его и откроете снова, вернётся подсветка от синтаксиса HTML.

2. Параметры

syntax — путь к файлу синтаксиса. Как его получить, читаем здесь в разделе 3.
file_path — что должно содержаться в имени файла, дабы к нему применялся синтаксис из параметра syntax. Обратите внимание:
- Значением параметра является не расширение, а регулярное выражение; .*\\.html$ означает, что синтаксис будет применяться к любым файлам, содержащим .html на конце.
- Необходимо экранировать экранирующие слэши, поэтому идут 2 слэша подряд.
contains — какая строка должна содержаться в файле, чтобы к нему применялся синтаксис. В значении регулярное выражение, в нашем случае означающее, что тег <script> должен содержать атрибут type="text/babel".
"match": "all", — параметр, указывающий, что будет применён параметр rules и проигнорирован параметр extensions — см. пункт 2. Не рекомендуется его опускать: если в файле с синтаксисом для ReactJS Вы убрали строку, содержащуюся в contains и захотели вновь установить дефолтный синтаксис HTML, при отсутствии параметра match Sublime Text не даст Вам этого сделать, возвращая синтаксис JavaScript (Babel).

Если ограничения строкой недостаточно, существуют другие варианты, описанные в документации:

first_line — автоопределение синтаксиса, исходя из первой строки файла.
interpreter — упрощение first_line для языков программирования, в которых используется шебанг. Если в первой строке файла есть шебанг и слово python, то вместо {"first_line": "^#\\!(?:.+)python"} достаточно написать {"interpreter": "python"}. Пример. Допустим, хочу, чтобы выражение, содержащее в начале #!/usr/bin/env python -c, подсвечивалось бы заранее установленным синтаксисом PythonImproved, а не дефолтным Python. Часть моего файла ApplySyntax.sublime-settings:

    {
        "match": "all",
        "rules": [{
            "interpreter": "python",
        }, ],
        "syntax": "Python Improved/PythonImproved"
    }

Шебанг

function_rule — в более сложных случаях можно определить синтаксис для файла, если в нём содержится определённая функция. Когда будете использовать данный параметр, обратите внимание на настройку reraise_exeptions.

7. Правка файла синтаксиса

Можно включить подсветку синтаксиса для Babel-скриптов в файле HTML.sublime-syntax или каком-либо другом самостоятельно по образцу, расписанному в данном ответе для Gulp. Но есть проблемы:

Нужно выделить свободное время и иметь также навыки и опыт работы с синтаксисами Sublime Text,
Если Вы правите дефолтные файлы синтаксисов Sublime Text или файлы синтаксисов из плагинов, будьте готовы к тому, что после обновлений Ваши изменения пропадут. Поэтому позаботьтесь о сохранении копий файлов, чтобы потом мержить из них в обновлённые файлы.
Можно обойти проблему обновлений, скопировав содержимое файла синтаксиса в свой файл, путь к которому и будет значением параметра syntax в файле User/ApplySyntax.sublime-settings. Но тогда Вашего файла не коснутся обновления от разработчиков Sublime Text/плагинов для него.

8. Дополнительные ссылки

score 0 · Answer 2 · edited Nov 02 '16 at 16:57

0

Поставить плагин для подсветки jsx кода.
Внизу справа в саблайме выбрать тип кода javascript(babel) или просто babel.

edited Nov 02 '16 at 16:57

Arhadthedev

11,528

answered Nov 02 '16 at 15:56

Alex Slobodyansky

135

@Arhad все равно не весь код подсвечивает. – Nick Nov 02 '16 at 18:38
@Nick, автор сообщения – Alex Slobodyansky. Я всего лишь внёс стилистическую правку. – Arhadthedev Nov 03 '16 at 13:54

В Sublime Text 3 не работает подсветка Babel скриптов, встроенных в HTML

2 Answers2

1. Предупреждение

2. Ограничения

3. Установка подсветки для babel-скриптов

1. Выбор цветовой схемы

4. Проблема 1: не желаю цветовую схему с поддержкой Babel для остальных файлов

5. Как определить путь к файлу цветовой схемы

1. Через встроенную консоль

2. При помощи PackageResourceViewer

6. Проблема 2: Желательно, чтобы синтаксис `Javascript (Babel)` был только в html-файлах с Babel-скриптами

1. Настройка

2. Параметры

7. Правка файла синтаксиса

8. Дополнительные ссылки

Linked

В Sublime Text 3 не работает подсветка Babel скриптов, встроенных в HTML

2 Answers2

1. Предупреждение

2. Ограничения

3. Установка подсветки для babel-скриптов

1. Выбор цветовой схемы

4. Проблема 1: не желаю цветовую схему с поддержкой Babel для остальных файлов

5. Как определить путь к файлу цветовой схемы

1. Через встроенную консоль

2. При помощи PackageResourceViewer

6. Проблема 2: Желательно, чтобы синтаксис Javascript (Babel) был только в html-файлах с Babel-скриптами

1. Настройка

2. Параметры

7. Правка файла синтаксиса

8. Дополнительные ссылки

Linked

6. Проблема 2: Желательно, чтобы синтаксис `Javascript (Babel)` был только в html-файлах с Babel-скриптами