Всякое про среду PhpStorm

PhpStorm.md

Что нравится

• Красивый! Приятно смотреть. Все элементы интерфейса выполнены гладко, есть ненавязчивые подсказки.

  • Прозрачные полосы прокрутки (scroll bars). Не отнимают места от области редактирования. Умно!

• Автозаполнение. Красиво выглядит и удобно работает, снабжено подсказками.

  • Подставляются даже переменные в Sass! Не говоря уже о CSS-свойствах и их значениях.
  • Подставляются классы из HTML (из числа классов в текущем файле)! Удобно, когда нужно сделать вложенный элемент по БЭМ (типа someclass-mod: при наборе someclass подставится, останется добавить только -mod)
  • Подставляются сокращения из Emmet, причем перед подстановкой они отображаются в списке с пометкой "Emmet abbreviation" (при этом показывается результат подстановки), благодаря чему их можно тут же изучать, узнавая новые. Характерные примеры:
    • m0, m:0 -> margin: 0;, m:0:a -> margin: 0 auto;
    • w10 -> width: 10px;, w100p -> width: 100%;

• Мелкие, но приятные вещи при работе с текстом

  • При вставке текста внутрь скобок табуляция автоматически выравнивается!
  • При вводе Enter между фигурными скобками {} (обычно только что вставленными) автоматически добавляется отступ, а закрывающая скобка переносится на следующую строку.
  • Можно двигать вверх-вниз строки и даже целые блоки кода - Ctrl+Shift+Up/Down. Если есть выделенный текст, то он будет двигаться целиком, если нет - то только строка, на которой находится курсор. При этом код автоматически выравнивается по отступам! То есть, если фрагмент после передвижения попадает во вложенный блок (который отодвинут отступами правее), он сразу же оказывается правильно выровнен!

• Удобно работать с цветами в CSS/Sass:

  • рядом с номерами строк, в которых задаются цвета, отображаются небольшие квадратики, покрашенные в эти цвета
  • если по такому квадратику щелкнуть, откроется инструмент для выбора цвета (хроматический круг)
  • самое неожиданно офигенное - если цвет задан в переменной Sass, то при его изменении с помощью инструмента будет исправлено значение переменной в том месте, где она задана!
    Чудеса, да и только!

• Быстрый поиск определения функций

  • посмотреть определение класса/функции/метода и пр. - Ctrl+Shift+I
    Определение появляется во всплывающем окне поверх основого текста в редакторе. Не нужно вручную искать и открывать файл. Работает не только в PHP, но даже для mixin'ов в Sass! Если нужно отредактировать - можно нажать соотв. кнопку на панели инструментов всплывающего окна или клавишу F4. Откроется соотв. файл в отдельной вкладке. Того же можно достичь сразу, нажав Ctrl+Shift+B вместо Ctrl+Shift+I.

• Ctrl+B - поиск определения сущности
  Комбинацию Ctrl+B можно применять для:

  • функций: : если курсор находится в месте использования функции (внутри имени или прямо с краю от него), он будет перемещен в место её определения; если же он находится в месте определения - будет показан список случаев использования с возможностью перейти на любой из них
  • переменных: если курсор находится в месте использования переменной, он будет перемещен в место её определения; если он находится в месте определения - будет показан список случаев использования с возможностью перейти на любой из них
  • ссылок в PHPdoc (@link) - они будут открыты в браузере это полезно, например, при чтении встроенной документации

Что не понравилось

• Высокий порог входа. Нельзя просто запустить программу и открыть в ней какой-нибудь файл. Нужно сразу разбираться, что это за "проекты" и как их заводить.
• Неудобная точечная работа по SFTP.
  • Открыть файл на удалённом сервере можно только из загруженного в среду проекта.
  • Файл сохраняется не сразу напрямую на сервер, а куда-то локально. Загружать на сервер нужно принудительно (Alt+Shift+Q). Её можно использовать вместо Ctrl+S - так файл будет сразу сохранен и локально, и на сервер.
• Установка плагинов требует перезапуска.
• Нельзя работать с gist.github.com («из коробки» не умеет, а плагины заброшены; подробнее см. ниже)
• При включенной русской раскладке клавиатуры не работают некоторые горячие клавиши (например, Ctrl+., приходится смотреть, какой язык. Похоже, это баг, т.к. на другие горячие клавиши, составленные с участием латинских букв, это не распространяется.
• Во встроенной консоли не действуют стандартные горячие клавиши для работы с оболочкой bash (Alt+F, Alt+H и др.), которые действуют в обычной cmd, что делает работу с bash под Windows невозможной

Горячие клавиши «из коробки»

• заменить - Ctrl+R (заменить всё - Alt+A); заменить во всех файлах проекта - Ctrl+Shift+R (откроется диалог, где можно будет выбрать область замены)
• многострочный комментарий - Ctrl+Shift+/ (однострочный - Ctrl+/)
• Ctrl+Shift+N - аналог обычного открытия файла, где его поиск осуществляется по фрагменту имени по всей глубине дерева проекта; по мере ввода имени подходящие варианты показываются вместе с полным путём; избавляет от необходимости отыскивать и вручную открывать все уровни дерева каталогов, этой возможностью, видимо, объясняется отсутствие для обычной команды Открыть
• показать/скрыть дерево каталога проекта (нужно для открытия файлов) - Alt+1;
  когда панель дерева активна, с помощью Alt+Left/Right там можно переключаться между "вкладками" (**Project, Project Files, Tests и т.п.) вызвать другие опции работы с деревом - Alt+F1
• Alt+Home - путешествовать по "хлебным крошкам" пути, расположенного в верхней части окна под главным меню; клавиша Вниз откроет содержимое каталога; если начать ввод, содержимое отфильтруется, причем необязательно по начальным символам имён - например, если набрать оы, будут показаны только *.js-файлы
• удалить файл - Alt+Home и затем Delete; файл будет удалён и в git, если находится под его контролем
• свернуть/развернуть участок кода - Ctrl+-/Ctrl++;
  свернуть/развернуть рекурсивно - Ctrl+Alt+-/+ (свернуть, оставив видимым только первый уровень вложенности - Ctrl+Alt+-; Ctrl++)
  свернуть/развернуть весь файл целиком - Ctrl+Shift+-/+
• дублировать строку - как таковой горячей клавиши нет, нужно идти в меню Edit -> Duplicate Line - Alt+E D D Enter (не очень-то удобно :/); есть также команда Duplicate Line or Selection, но горячих клавиш для неё по умолчанию нет
• посмотреть на файл в дереве проекта - Alt+F1 Enter; полезно, чтобы посмотреть на содержимое каталога, в котором находится файл (в обычном редакторе для этого использовался диалог открытия файла - как правило, Ctrl+O), но не так удобно, т.к. перед глазами всё дерево (зачастую раскрытое), а не только текущий каталог. Можно повесить и на горячую клавишу (поиск по имени команды select in project view)
  Можно использовать и для точечно открытого с удаленного сервера файла, только там откроется вкладка Remote Host (3) , а не Project view (1).

Какие настройки по умолчанию поменял под себя

• удалить строку По умолчанию забито на Ctrl+Y (еще надо выбрать межд у этим и Redo), меняем в ярлыках (Ctrl+Alt+S или File | Settings | Keymap) по названию "Delete line".

• перенос по словам - начало перенесённой части по уровню левого отступа текста, а не с самого начала строки.
  Right click по Gutter (область с номерами строк) | Configure Soft Wraps | Use original line's indent for wrapped parts

  • Мягкий перенос повесил на Ctrl+Alt+W (было незанято)
    Right click по Gutter (область с номерами строк) | Soft Wrap Current Editor

• PHP: слэши в однострочном комментарии - рядом с кодом
  File -> Settings -> Editor -> Code Style -> PHP -> Code Generation -> Line comment at first column, Add space ...

Полезные приёмы

• Поделить окно

  • вызвать меню вкладки (щелкнуть правой кнопкой мыши по ярлычку вкладки или Window | Editor Tabs в главном меню)
  • выбрать Split Right/Down
  • для переключения между разделенными областями окна служат пункты Goto Next/Previous Splitter, их можно привязать к комбинации клавиш (например, Alt+PgUp/PgDown)

  При работе со списком файлов (Ctrl+E - недавно открытые файлы или Ctrl+Shirt+N - все файлы проекта) открыть файл в правой панели можно, нажав Shift+Enter вместо простого Enter - очень приятно

• Посмотреть картинку
  Навести мышь на адрес изображения в <img src="..."> и зажать Shift. Через секунду появится всплывающее окошко с картинкой и полезной информацией о ней: размерах, глубине цвета, занимаемому на диске месту.
  Поставив курсор на адрес изображения и нажав Ctri+Shift+I, можно посмотреть картинку во встроенном редакторе (там, в частности, можно отключить клетчатый фон, оставив его полностью прозрачным, а также получить цвет пикселей с помощью color picker'а).

• Быстрее всего создать проект из файлов на локальном компьютере можно, воспользовавшись подпунктом Source files are in a local directory, no web server is yet configured (идет в списке последним) из диалога Create project from existing files.

• Привести JSON в удобочитаемый вид - выделить JSON-строку и нажать Ctrl+Alt+L (или Code -> Reformat Code)

• Перенести/переименовать каталог локально расположенного проекта: https://stackoverflow.com/a/57775558/589600

• Посмотреть описание элемента на основе PHPdoc: Ctrl+Q или просто навести мышь

• Проверка регулярных выражений

Работает для языков, где регулярные выражения представляют собой отдельный тип данных (например, Javascript).
Не работает в PHP, т.к. там это просто строка.

To verify that your regular expression is correct, place the caret within the expression you want to check, press Alt+Enter, and select Edit RegExp. In the popup, type a sample string that should match your regular expression. The icon shows that the match occurred. The icon shows that there is no match or your expression contains a mistake.

Live Templates (они же - Code snippets) - разворачиваемые сокращения при наборе кода

Позволяют превратить, например, @m$d Tab/Enter в @media #{$desktop} { }.

Setting | Editor | Live Templates | + (справа с краю)

Добавляем группу шаблонов - Template Group..., если хотим создать новую (ей нужно лишь дать имя).

Затем добавляем собственно шаблон - Live Template. Вводим само сокращение, описание и собственно код, который будет вставлен. В коде можно указать место, куда будет помещен курсор после вставки (например, между скобок). Это делается с помощью переменной $END:

@media #{$desktop} {
   $END$
}

Также выбираем ситуации, в которых сокращение будет работать (читай: типы файлов и их определённые места) - надпись Define рядом с текстом No applicable contexts. Например, в данном случае для файлов *.scss это будет declaration block и ruleset list (последнее отвечает за работу на самом верхнем уровне документа вне контекста деклараций правил для селекторов).

Подробнее см. статьи на blog.jetbrains.com (простая, посложнее - с использованием переменных).

Live templates хорошо бы иметь per project (т.к. определённые шаблоны кода бывают актуальны только в конкретном проекте). Однако такую возможность пока не реализовали (см. issue IDEABKL-5033).

А вообще такие вещи бывают на уровне операционной системы (например, в Mac). Позволяют быстро составлять тексты на основе шаблонов (например, письма); это можно также привязать к горячим клавишам.

prettier - автоматическое форматирование кода

Позволяет писать код, не расставляя вручную пробелы, отступы и пр. Форматирование проводится по описанном в одном общем месте правилам.

Требует установки в проект (на сервер) и последующей настройки. См. также gist 1234ru/linux.md. Похоже, это не позволит разворачивать проекты на локальном компьютере под Windows, т.к. для Windows его нет.

В продуктах JetBrains реализован в качестве плагина собственного производства, который легко устанавливается (File | Settings | Plugins) и не требует дальнейшей конфигурации. Обработка кода запускается сочетанием Alt+Shift+Ctrl+P.

Автозаполнение сразу прожевало конфигурационный файл .prettierrc.json - уже подставляет имена настроек (типа useTabs)!

Ссылки:

• prettier.io - сайт проекта
• настройки плагина для PHP
• собственный плагин prettier от JetBrains

Работа с gist.github.com... не задалась

Если коротко: оказалось, что единственный плагин, в котором можно было загружать существующие gist'ы (а не только создавать новые), перестали поддерживать и он не работает.

Нижеследующую инструкцию оставлю здесь на будущее.

Получаем Github token

Не путать с SSH- и GPG-ключами! Их для работы с gist'ами не хватит. Нужен Github token или ключ персонального доступа.

Такой ключ - это гораздо более мощное средство, чем обычные ключи, которое позволяет не только отправлять изменения в репозитории, но и менять различные настройки аккаунта и доступных из под него проектов (набор участников и их права). Этот ключ может использоваться вместо пароля для записи через HTTPS. Вот как его получать:

• Идём на специальную страницу Settings / Developer Tools / Personal access tokens / Generate new token
• Тут отмечаем разделы, к которым будет предоставлен доступ. Обязательно нужно отметить gist и repo (иначе IDE не сможет соединяться)
• Сразу после генерации ключа сохраняем его куда-нибудь! Потом просмотреть его будет нельзя!

Далее в IDE открываем раздел Settings | Version Control | Gitub и добавляем аккаунт.

Отправка HTTP-запросов

• Ctrl+Shift+Alt+Insert, выбираем "HTTP Request"
• Используем аббревиатуру ptr или ptrp (для отправки в формате json), дальше составляем запрос (тут всё довольно понятно)
• Помещаем курсор на первую строку запроса (POST http...), нажимаем Alt+Enter и затем ещё раз Enter. После этого откроется панель с ответом - что и требовалось получить!
  Слева в этой панели есть кнопки настройки внешнего вида ответа ("View as HTML", "View as XML" и т.п.)
• Повторно отправить запрос, находясь в панели редактирования запроса или в панели ответа, можно нажатием Ctrl+F5.
  Находясь в другой вкладке - Shift+F10.

Ответы сохраняются в каталоге .idea/httpRequests, каждый - в отдельном файле. По окончании процедуры этот каталог желательно почистить.

Более полное руководство - на jetbrains.com/help.