Около 4 месяцев назад я сменил предпочитаемый редактор разработки с Atom на Webstorm. Хотя мне очень нравилось, что моим базовым редактором был Atom, у меня всегда было ощущение, что он может сделать для меня больше. Это то, что привлекло меня в Webstorm после просмотра всех функций, описанных и обещанных интегрированной средой разработки (IDE).

Это был не первый раз, когда я пробовал Webstorm. Большой редактор со всеми его функциями уже несколько раз заставлял меня убежать через 5 минут. Поэтому мой вам совет: постарайтесь скрыть отвлекающие панели и сосредоточьтесь на повышении производительности, предлагаемом Webstorm.

На веб-сайте Intellij есть отличный пост в блоге, описывающий несколько очень полезных ярлыков для Webstorm. Кроме того, я хотел бы поделиться своей коллекцией фаворитов, которые я использую в своих повседневных проектах.

Совет: чтобы по-настоящему выучить ярлык и добавить его в свою мышечную память, выберите 1 ярлык и используйте его 1 целый день. Вы будете удивлены тем, как часто это будет полезно и насколько естественно вы будете их использовать.

Небольшое примечание: моя раскладка клавиатуры QWERTY, это обеспечивает наилучшие возможности быстрого доступа.

Ярлыки

Свернуть или развернуть текущий блок

Мне нравится сворачивать части кода в текущем файле, чтобы они были скрыты, и я мог сосредоточиться на частях, над которыми буду работать.

Свернуть все блоки верхнего уровня

Сворачивая все блоки верхнего уровня, я могу получить четкий обзор всех функций в текущем модуле. Это дает мне быстрый обзор содержимого файла.

Добавить выбор для следующего вхождения

Webstorm позволяет размещать несколько курсоров. Это возможно с помощью мыши, щелкнув при нажатой клавише `⌥`. Однако я предпочитаю держать руки на клавиатуре. Чтобы поместить несколько курсоров, не касаясь мыши, я создаю выделение и нажимаю `ctrl + g`, чтобы выбрать следующие вхождения. При выборе нескольких вхождений у меня также установлено несколько курсоров.

Добавить выделение для всех вхождений

Это то же самое, что и выбор следующего вхождения, только он выбирает все вхождения в текущем файле одним нажатием клавиши.

Расширить/уменьшить выделение

Часто мне хочется вырезать, скопировать или просто удалить выделение. Webstorm достаточно умен, чтобы помочь мне с выбором блоков кода. Это помогает мне держать руки на клавиатуре, а не тянуться к мыши.

Перемещение (выбор) строк

Что-то, что я делаю очень часто, — это перемещение линий или их выбор. Например, я начинаю с дублирования строки с помощью `⌘ + d`, затем корректирую линию и, наконец, перемещаю ее туда, где она должна быть, с помощью этого сочетания клавиш:

Живые шаблоны

Живые шаблоны в Webstorm позволяют мне быстро вставлять фрагмент кода, который я определил ранее. В iCapps у нас есть прекрасная коллекция фрагментов, представленная здесь: https://github.com/icapps/mill/blob/master/webstorm-live-templates.md.

Как добавить живой шаблон в Webstorm:

  1. открыть настройки
  2. перейти в редактор › живые шаблоны
  3. добавить группу шаблонов для ваших пользовательских шаблонов
  4. добавить шаблоны ниже в новую группу
  5. определить контекст › javascript
  6. напишите свой шаблон

Изучите все ярлыки

Вам может быть интересно, как я понял все эти практические ярлыки?

Ну, это не так сложно. Вы должны просто не торопиться, чтобы просмотреть все доступные сочетания клавиш в Webstorm в разделе Настройки > Раскладка клавиатуры. Вы можете искать ярлык по описанию или по сочетанию клавиш. А для тех, кто любит хорошо структурированный обзор: эта шпаргалка в формате PDF — лучшая!