Около 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:
- открыть настройки
- перейти в редактор › живые шаблоны
- добавить группу шаблонов для ваших пользовательских шаблонов
- добавить шаблоны ниже в новую группу
- определить контекст › javascript
- напишите свой шаблон
Изучите все ярлыки
Вам может быть интересно, как я понял все эти практические ярлыки?
Ну, это не так сложно. Вы должны просто не торопиться, чтобы просмотреть все доступные сочетания клавиш в Webstorm в разделе Настройки > Раскладка клавиатуры. Вы можете искать ярлык по описанию или по сочетанию клавиш. А для тех, кто любит хорошо структурированный обзор: эта шпаргалка в формате PDF — лучшая!