WebStorm, горячие клавиши (shortcut)

• Переключение между последними (recent files) открытыми файлами: ctrl + E
• Последние отредактированные файлы: ctrl + shift + E
• Переключение между цветовыми схемами и т.д.: ctrl + ~
• Выделяем слово и меняем всюду в файле на необходимое: ctrl + alt + shift + j

/*
   Web storm:

   shift + ctrl + N        - К ФАЙЛУ
   ctrl + B                - Переход на определение метода
   shift + ctrl + i        - просмотр метода в текущем контексте
   ctrl + alt + shift + N  - поиск по всему проекту
   shift X 2               - переход к ... (селектору, переменной, методу и т.д.)

   ctrl + f12              - структуру кода нашего файла
*/

Навигация по коду:

• go to class css: ctrl + N
• go to file: shift + ctrl + N
• переход к символу (селектор, переменная, имена методов и т.д.): shift + ctrl + alt + N
• общий способ: shift X 2
• Открывает структуру кода нашего файла: ctrl + f12
• Переход на определение метода: ctrl + B
• Просмотре метода в текущем контексте: shift + ctrl + I

Работа с version control, vcs (система управления версиями)

• Открываем popup vcs: alt + ~
• Статус строки в vsc: отображается слева (после № строки, зеленым (синим) цветом; в зависимости от состояния)
• Открыть окно для коммита: ctrl + K
• push: ctrl + shift + K

Клонируем проект с гитхаба:

Копируем путь (например,https://github.com/puzzle/ng-user-auth.git) в:
shift X 2 прописываем action clone,
выбираем корневую папку для проекта,
и нажимаем clone.

Продвинутое редактирование

• Множественные курсоры (выделение): alt + (ставим клики, где надо) и заполняем
• Контекстное выжеление: Выделяем корректный кусок кода, при каждом ctrl + W код расширяется на логический кусок.
  Обратный shortcut: ctrl + shift + W
• Автодополнение наступает при начале печати.
  При нажатии ctrl + Q можно просмотреть документацию.
• Вставить из истории (все что мы на "копипастили"): ctrl + shift + v
• Локальная история: alt + ~, далее show history
• Генерируем болванку для своей документаии: начинаем набирать в коде /** + enter
• Сниппеты (по примеру в sublime text) идем в Editor - Live Templates. Также можно создавать свои сниппеты. Не забудьте вырать контекст, в котором будет работать сниппет.
• emmet (http://docs.emmet.io/abbreviations/syntax/)
• Форматируем код: ctrl + alt + L

Плагины

Плагины можно установить, например, для angular или nodejs: Settings - Plugins

Автоматизация

Любую задачу, анпример, в grunt or gulp, можно открыть и запустить непосредственно в редакторе: ctrl + E, выбираем, например, grunt-файл и запускаем требуемые команды.

Создать свою задачу можно перейдя на: Edit Configuration (shift + alt + F10). Достаточно выбрать нужный config, далее webstorm сам подскажет какие пути проставить в нужных полях. Назовите задачу в поле name и запускайте ее, вызвав shift + ctrl + A и прописав там же имя задачи.

Вызов внешнего инструмента

action External Tools

Вызов action или option name, например, External Tool: shift + ctrl + A

На примере ESLINT (ставится в node modules):

Тесты

Заходим в Edit Configuration (shift + alt + F10).

Достаточно выбрать нужный config, далее webstorm сам подскажет какие пути проставить в нужных полях.

Debug

Правой кнопкой мышки и Debug. В js-файлк можно поставить breakpoint.

Правой кнопкой мышки по breakpoint и можно поставить условие (condition), при котором сработает breakpoint.