Изменение автозаполнения кода в WebStorm

У WebStorm есть специальное автозаполнение кода JSX для React.JS. Это звучит так: 

div. + Tab => <div className=""></div>

Но я использую SCSS, поэтому мне нужно изменить автозаполнение с className на styleName: 

div. + Tab => <div styleName=""></div>
1 3
phpstorm webstorm jetbrains

1 ответ:

Вы можете переопределить это поведение по умолчанию, создав то, что Jetbrains называет "живым шаблоном" (эта функция существует и в других продуктах Jetbrains).

Сначала перейдите к настройкам Webstorm. Слева вы увидите древовидную структуру, показывающую предпочтения, перечисленные по категориям. Разверните "редактор", чтобы найти"живые Шаблоны".

Как только вы выберете Live Templates, справа появится древовидная структура, отображающая текущие включенные Live Templates. На Дальнем справа от этой таблицы вы найдете маленькую кнопку+, которая позволяет вам создать свой собственный живой шаблон.

После выбора + - > Live Template вам нужно будет заполнить аббревиатуру, описание и текст шаблона внизу.
Аббревиатура - это символы, которые вы вводите для активации этого шаблона. В этом случае введите div . ПолеDescription может быть любым, каким вы хотите описать этот шаблон, оно не имеет никакого функционального влияния.
То шаблон текстовый раздел-это текст замены. В этом случае я бы использовал

Обратите внимание, что $END$ - это переменная, которая помещает курсор в это место после активации шаблона live.

Наконец, вам нужно указать, с какими типами файлов должен работать живой шаблон. Обратите внимание на фразу "контекстов приложений пока нет. Определите" в нижней части страницы. Нажмите на слово Define , в появившемся всплывающем меню раскройте Javascript, чтобы найти опцию для JSX HTML и проверить ее. Если вы хотите, чтобы живой шаблон работал в других случаях, не стесняйтесь выбирать дополнительные типы файлов.

3