Полезные приемы в WebStorm

Mar 3, 2021

Shortcut

  • ctrl + E - Открывает панель для Переключение между последними открытыми файлами
  • ctrl + shift + E - Открывает панель с Последними отредактированные файлы
  • shift + ctrl + N (shift X 2) - Открывает панель для поиска файла, класс и т.д. по имени
  • ctrl + B - Переход на определение метода
  • shift + ctrl + i - Просмотр метода в текущем контексте
  • ctrl + f12 - структуру кода нашего файла
  • Ctrl + Alt + L - реформат кода в текущем файле
  • alt + enter - вызываем контекстное меню для выделенного поля и, например, можем сделать к нему геттер или сеттер
  • ctrl + alt + o - удаляем все неиспользуемые импорты
  • shift + f6 - переименование во всех файлах
  • ctrl + g - перейти к строке кода по номеру

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

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

Путь к текущему файлу

Просто отметьте галочкой View -> Navigation Bar

Автозаполнение (Emmet) в WebStorm

синтаксис Emmet

script:src
<script src=""></script>

Увеличиваем производительность

Файл с настройками \Users\name\.WebStorm2016.1\webstorm.exe.vmoptions (Help - Edit Custom VM Options..)

Меняем опцию Xmx512m на Xmx1024m

-server
-Xms128m
-Xmx512m

Закладки (bookmarks)

Можно поставить закладку bookmarks (f11), которую также можно проименовать, и далее она появится во вкладке Favorites.

Вкладка TODO

Для всех toDo есть специальная вкладка TODO.

Помощь с ангуляром

Допустим я хочу преврать код ниже в отдельный компонент:

<test>
    {{ article }}
</test>

Выделяем вышеприведенный код и создаем компонент (со свойством входящим article):
Refactor - Extract component

React тесты

React работает с jest. Поэтому переходим в Run - edit configuration - jest - Apply и мы можем запустить тест, находясь в тестовом файле, нажав правой кнопокой мышки и выбрав Run app.test.tsx

Псотавив точку останова можно дебажить тесты непостредственно в ws.

Http-клиент Web Storm

В ws также есть http-клиент в котором мы можем тестировать запросы к серверу:
tools - http client - create http request. То есть мы можем тестировать наше апи не выходя из редактора.

Работаем с git

Добавляем проект по url из гитхаба: set-up-a-git-repository.html

VCS - Get from VCS (копируем нужный репо/url)

show git log показывает изменения графически, включая ветки.

Добавить комментарий