Шпаргалка по работе с IntelliJ IDEA и WebStorm

by Павел Прудников

Так вышло, что в качестве основного рабочего инструмента по написанию кода я для себя выбрал
IDE от JetBrains. IDEA - очень мощная среда разработки, которая поддерживает большое количество языков и дает очень много возможностей. Но хорошо, если кто-то пользуется этими возможностями хотя бы на 50%. В этой статье я попробую для себя собрать полезные плюшки по работе с IDEA. В WebStorm и PhpStorm, думаю, они будут работать аналогично.

Редактирование

Ctrl + Space

Автозаполнение. При наличии вариантов открывается всплывающее окошко с ними. Если вариантов нет, то происходит вставка.

Ctrl + ← / →

Перемещение по словам.

Ctrl + ↑ / ↓

Прокрутка кода. Курсор при этом остается на месте.

Ctrl + Shift + ↑ / ↓

Перемещение строки или выделенного фрагмента вверх / вниз.

Home / End

Перевести курсор в начало / конец строки.

Ctrl + Home / End

Перевести курсор в начало / конец документа.

Shift + Home / End

Выделить от курсора и до начала / конца строки.

Ctrl + Shift + Home / End

Выделить от курсора и до начала / конца документа.

Ctrl + W

Постепенное выделение. Так, при первом нажатии выделяется имя переменной, в которой стоит курсор. При втором добавляется присвоенное значение. Затем - инициализация, тело функции, в которой определяется переменная и т.д., пока не будет выделен весь файл.

Ctrl + Del

Удаляет символы от курсора и до конца слова.

Ctrl + Backspace

Удаляет символы от начала слова и до курсора.

Ctrl + Insert

Скопировать текущую строку.

Ctrl + D

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

Tab / Shift + Tab

Добавляет / удаляет отступ.

Ctrl + /

Однострочный комментарий.

Ctrl + Shift + /

Многострочный комментарий.

Ctrl + - / +

Свернуть / развернуть текущий блок кода (функцию, объект)

Ctrl + Shift + Enter

Перевод курсора в тело функции, метода. С правильным отступом.

Ctrl + Alt + L

Переформатирование кода в соответствии со стилистическими требованиями (отступы, пробелы и т.д.).

Ctrl + Alt + Shift + J

Слово, в котором находится курсор, будет выделено во всем файле. Его редактирование происходит во всех вхождениях.

Ctrl + Shift + V

Специальная вставка. Можно вставить не только последнее скопированное, но и предыдущие.

Навигация

Ctrl + Tab / Ctrl + Shift + Tab

Переключение между последними открытыми вкладками в прямом / обратном направлении.

Ctrl + E

Последние открытые файлы.

Ctrl + Shift + E

Последние отредактированные файлы.

Alt + ← / →

Перемещение по панели с вкладками.

Alt + ↑ / ↓

Переход к предыдущему / следующему методу или функции.

Ctrl + G

Переход к строке по номеру.

Ctrl + F4

Закрыть вкладку.

Ctrl + F12

Показывает структуру файла. Можно быстро переходить по свойствам и методам.

Ctrl + B или Ctrl + Left click

Переход к реализации метода.

Ctrl + Shift + I

Реализация метода открывается в отдельном окне. Курсор при этом остается на месте.

Alt + Q

Показать, где находится курсор (название класса, метода).

Поиск

Ctrl + Shift + A

Поиск по настройкам

Ctrl + N

Поиск класса.

Ctrl + Shift + N

Поиск файла.

Ctrl + Alt + Shift + N

Поиск символа (метода, поля и т.д.).

2*Shift (двойное нажатие)

Поиск везде.

Ctrl + F

Поиск в текущем файле.

Ctrl + Shift + F

Поиск во всех файлах.

Ctrl + R

Найти и заменить в текущем файле.

Ctrl + Shift + R

Найти и заменить во всех файлах.

Ctrl + Alt + F7

Найти все строки, где используется данная функция или переменная.

Контроль версий

Alt + ~

Открыть модальное окно для работы с системами контроля версий.

Ctrl + Alt + A

Добавить файл в контроль версий.

Ctrl + K

Сделать коммит.

Ctrl + Shift + K

Сделать пуш.

Помощь и подсказки

Ctrl + Q

Показать документацию к тому элементу, где стоит курсор.

Ctrl + P

Информация об аргументах функции.

Ctrl + F1

Показать описание ошибки.

Alt + Enter

Раскрыть подсказку-лампочку.

Прочие полезности

Postfix Completion

Используя posfix completion можно немного ускорить написание кода. Например в JavaScript можно написать имя переменной, поставить точку и написать if. После нажатия на Enter эта запись преобразуется в:

if (variable) {

}

и курсор поместится в тело условия.

А, например, variable.log преобразуется в console.log(variable).

Полный список можно посмотреть в настройках Editor > General > Postfix Completion.

Live Templates

Шаблоны. Пишем itar, нажимаем Enter, получаем:

for (var i = 0; i < list.length; i++) {
    var obj = list[i];
    
}

Остается только изменить названия переменных.

Посмотреть на существующие шаблоны можно в настройках Editor > Live Templates. Там же можно создавать свои.

Emmet

Когда пишем html в IDEA, можем написать CSS селектор, например такой:

ul#nav>li.item$*4>a{Item $}

нажать Tab и получить:

<ul id="nav">
    <li class="item1"><a href="">Item 1</a></li>
    <li class="item2"><a href="">Item 2</a></li>
    <li class="item3"><a href="">Item 3</a></li>
    <li class="item4"><a href="">Item 4</a></li>
</ul>

Очень много интересного и полезного. Осталось только это все запомнить и начать использовать.