Phpstorm руководство на русском

Время на прочтение
16 мин

Количество просмотров 177K

Добрый день

Так сложилось, что возникла необходимость подготовить единую рабочую среду (workflow) для всех верстальщиков в группе на ОС Windows. Основная цель — это в минимальные сроки передать минимум необходимых знаний всем участникам группы. Основная проблема была в том, что многие не знакомы с unix-системами и понятия не имеют, как завести тот же SASS на ОС Windows. Поэтому было принято решение составить ознакомительную статью (пошаговую инструкцию) по настройке рабочей среды.

По совету коллег решил выложить ее в открытый доступ. Думаю, начинающим верстальщикам это пригодится, т.к. когда-то я потратил немало времени, чтобы прийти к простым истинам.

Сразу оговорюсь, что выбор инструментов — дело сугубо личное, и все, что ниже описано ниже, делалось осознанно для определенной группы. Использовать данную инструкцию или нет — решать только вам.

Итак начнём!

Данная статья будет содержать в себе 3 этапа:

• Этап 1 — установка и знакомство с IDE Phpstorm
• Этап 2 — установка и настройка компилятора стилей (sass, scss)
• Этап 3 — установка сборщика проектов, пример настройки (gulp)

Этап 1 — установка и знакомство с IDE Phpstorm

Установка IDE Phpstorm

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

или прибегнуть к магии некоторых умельцев

.

По процессу установки думаю и так все понятно, указываем куда нужно установить программу. На одном из этапов установки, вам будет предложено выбрать какие файлы стоит открыть в IDE, а также нужно ли создать ярлык на рабочем столе.

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

Далее будет предложено приобрести лицензию (подписку) или использовать пробный период в 30 дней. Жмём «evaluate for free 30-day».

Далее будет предложено выбрать стиль оформления и предустановленные настройки горячих клавиш (keymap). При необходимости можно посетить сайт Phpstorm themes и выбрать ту тему, которая вам больше по душе.

На этом установка IDE закончена.

Создание нового проекта в IDE Phpstorm

IDE позволяем создавать 2 типа проектов:

• Локальные проекты
• Проекты связанные с удаленным сервером

Рассмотрим оба варианта более детально, а также настроим визуальный интерфейс на примере локального проекта.

Создание нового локального проекта

Создадим локальный проект. Для этого в окне приветствия IDE выберем пункт «Сreate new project». Также новый проект можно создать из меню IDE «File».

Отроется окно, в котром нам будет предложено выбрать:

• Шаблон проекта
• Указать место хранение проекта
• Указать название проекта

В случае выбора проекта с применением шаблона можно будет выбрать версию шаблона. Например, шаблон boostrap автоматически подгрузится с репозитория на github.

В результате у нас откроется окно нашего нового проекта. В котором будет создана папка с названием нашего проекта. Так же тут располагается папка «.idea», ни в коем случае не удаляйте её! В ней хранятся все настройки, связанные с проектом.

Также обращаю Ваше внимание на то, что при создании нового проекта программа попросить вас настроить пространство имён «namespace». В целом можно не заморачиваться и доверить это самой программе.

Для этого нужно во всплывающем окне нажать на ссылку «automatically». В случае, если вы случайно закрыли данное окно или оно «само» закрылось, кликните по строке состояния, и в терминале кликните на ссылку «automatically». Если вы все сделали верно, то увидите соответствующее сообщение: «Detect psr-0 namespace roots: no psr-0 namespace roots was detected». Для скрытия окна нажмите на значок с перпендикулярной стрелочкой.

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

Создание нового проекта связанного с удаленным сервером

Для создания проекта, связанного с удаленным сервером, необходимо в окне приветствия выбрать пункт «Create New Projects from Existing Files» или в меню IDE «File — New Projects from Existing Files».

Далее вам будет предложено выбрать сценарий использования, нам нужен вариант «Web server is on remote host, files are accessible via ftp/sftp/ftps».

Далее нужно ввести название проекта, а также указать, где он будет храниться на вашем ПК. Если вы хотите изменить путь хранения проектов, то нужно выбрать вариант «Сustom» и указать папку куда нужно поместить проект.

Важно! Используйте только латиницу в именовании файлов, папок, путей хранения. Так как часть инструментов могут просто не поддерживать кириллицу.

Например:

• «С://мои документы/project/демо» — плохой вариант: путь и название проекта содержит кириллицу
• «С://project/demo» — тут все хорошо, путь и название проекта содержит только латиницу

Далее будет предложено создать новое удаленное подключение или выбрать из уже существующих. Создадим новое sftp (shh) подключение, укажем параметры подключения к удаленному серверу.

• Name — имя подключения, понятное для вас. Я рекомендую писать полное доменное имя, так как бывает, что на одном ip могут находится несколько тестовых сайтов
• Type — формат подключения ftp или sftp (shh)
• Sftp host — ip адрес сервера или хост (например, mysite.ru или demo.mysite.ru)
• Port — номер порта (по умолчания для ftp (21), sftp (22))
• Root path — путь к родительскому каталогу (по умолчанию оставляем «/»), например если у вас есть 2 папки на сервере (dev, www), и вы хотите, чтобы все подключение показывало сразу папку dev, то можно указать путь (/dev/)
• User name — логин для доступа на сервер
• Password — пароль для доступа на сервер (не забываем ставить галочку «save password», чтобы не вводить пароль каждый раз при подключении к серверу, терминале). так же можно подключаться при помощи ssh ключа.
• «Don’t check http connection to server — ставим галочку, чтобы не проверять подключение каждый раз.»

Кнопка «Test sftp connection…» позволяет проверить, верно ли введены параметры доступа. В случае успеха будет выдано соответствующее сообщение.

«Web server root url» путь по которому будут открываться файлы для просмотра на удаленном сервере. Путь автоматически пропишется, как только будет заполнена строчка «sftp host».

Далее программа предложит указать какие файлы относятся к проекту, для этого указываем папку с проектом на удаленном сервере и жмём кнопку «Project root». В моем случае это все, что лежит на сервере. В результате у Вас появится зеленый фон, что файлы помечены.

Если мы нажмем продолжить, что программа начнет скачивать отмеченные файлы на ПК с сервера. Так как проекты обычно очень большие по объему и кол-ву файлов, мы это делать не будем. Для этого добавим файлы в исключение, нажав на кнопку «Excluded from download». В дальнейшем, мы разберем как загрузить только нужные нам файлы.

Жмём «далее» программа предложим, указать нам свой путь для корневой папки проекта. Тут можно поставить «/» или просто нажать кнопку «Finish».

Готово! Мы связали наш проект с удаленным сервером. Теперь попробуем скачать какой-нибудь файл с сервера, внести в него правку и отправить обратно на сервер. Сначала нам, нужно поправить настройки. Если помните, выше, мы добавили в исключение весь проект, чтобы не скачивать его полностью. Нажимаем сочетание клавиш «Сtrl+Alt+S», переходим в раздел «Build, Execution, Deployment — Deployment», нажимает на вкладку «Excluded path» и удаляем исключения, кликнув на путь, а после нажав кнопку «Remove path», после чего жмём кнопку «OK».

В результате, если все сделано правильно, то во вкладке «Remote host» наши файлы подсветятся зеленым фоном.

Для того, чтобы скачать файл или папку к себе на ПК, нужно кликнуть правой кнопкой мыши и в появившемся всплывающем меню выбрать пункт «Download from here». После чего файлы загрузятся к Вам на ПК.

Как только файлы загрузятся они отобразятся во вкладке «Project» и в окне передачи файлов «File transfer *имя удаленного сервера*» появится соответствующее сообщение.

После чего вносим правку в нужный нам файл и отправляем его обратно на сервер. Для этого нужно кликнуть правой кнопкой мыши по файлу, во вкладке «Project», и во всплывающем меню выбрать пункт «Upload to».

По желанию, можно назначить горячие клавиши (keymap) для быстрого скачивания и отправки файлов.

Данный способ удобен, если нам нужно поправить только один файл, но для полноценной разработки, лучше настроить автоматическую отправку файлов на сервер. Для этого нажимаем сочетание клавиш «Ctrl+Alt+S» или в меню «Tools — Deployment — Options» и вносим правки:

• Create empty direcory — после создания пустой папки так же загрузит ее на сервер.
• Upload changed files automatically to the default server — выбираем пункт «always»
• Upload external change — ставим галочку, позволяем загружать файлы, которые модифицируется другими программами. например карты css, js
• Warn then uploading over newer file — выбираем пункт «compare timestamp & size», проверяем модифицировался ли файл по времени и размеру
• notify about remote changes — предупреждает если мы пытаемся залить не актуальную версию исходного файла. Например если файл одновременно правили 2 человека. Будет предложено, перезатереть, смержить, пропустить.

На этом настройка проекта связанного с удаленным сервером завершена. Далее мы рассмотрим основные настройки и возможности IDE. нужно это, для того, чтобы в команде был минимальный порог одинаковых знаний.

Настройка визуального интерфейса и обзор возможностей IDE

Первым делом включим поддержку «Tool windows», это специальные вкладки которые позволяют визуально переключаться между возможностями IDE. Сделается это просто, нужно нажать на иконку в левом нижнем углу, после чего появятся закладки слева, справа, снизу. Так же это можно сделать из меню IDE «View — Tools buttons».

Удалить не нужные вкладки, можно нажав правой кнопкой мыши по вкладке и выбрать пункт «Remove from sidebar».

Я рекомендую расположить вкладки следующим образом:

• На левой панели расположить вкладки «project», «gulp», «npm»
• На нижней панели расположить вкладки «terminal», «version control», «file transfer» «rest», «todo», «event log»
• На правой панели расположить вкладки «remote host»

В дальнейшем мы рассмотрим все эти инструменты.

Отображение нумерации строк, отступов, цвета в IDE
Перейдем в настройки IDE нажав сочетании клавиш «Сtrl+Alt+S» или из меню программы «File — Settings» и перейти в раздел «Editor — General — Appearance» и проставить галочки:

• «Show line number» — показываем номер строк в документе
• «Show vertical indent guides» — показываем вертикальное выравнивание
• «Show css color preview icon in gutters» — показывает небольшой квадратик, возле номера строки, с текущим цветом
• «Show whitespace» — показывает отступы в табах или пробелах. настройка подойдет начинающим верстальщика, чтобы соблюдать семантику.

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

В результате должно все отобразиться примерно, как показано на изображениях ниже.

Подсказки по коду

По умолчанию редактор подскажет, если в коде есть замечания или ошибки. Справа в текущем документе будут отображаться желтые или красные полоски. Кликнув по полоске Вас сразу перекинет на строчку, где возникла ошибка или замечание. Так же можно просмотреть ошибку\замечание просто наведя курсор на полоску.

Просмотр страницы в браузере

Для просмотра страницы в браузере наведите мышью в правый угол документа, появится окно в котором будет предложено выбрать, в каком браузере вы хотите просмотреть страницу. Так же это можно сделать нажав сочетание клавиш «Alt + F2» (внимание сочетание клавиш может отличаться!).

По умолчанию IDE откроет на localhoste страницу для просмотра. Если Ваш проект связан с удаленным сервером, то будет открыта страница указанная в пути(Web server root url).

Так же можно настроить список браузеров, указать в каком браузере открывать по умолчанию, и отключить всплывающую подсказку в правом верхнем углу документа. Для этого необходимо нажать сочетание клавиш «Ctrl+Alt+S» и перейти в раздел «Tools — Web browsers» или воспользоваться поиском, как это показано на изображении ниже.

Инструмент emmet

Данный инструмент, уже предустановлен, поэтому никаких дополнительных установок делать не нужно, можно сразу пользоваться. Документацию по инструменту emmet можно посмотреть на сайте, примеры, шпаргалка.

Правка файлов только на удаленном сервере

Для правки файлов на удаленном сервере, кликаем на вкладку «remote host», открываем файл, не загружая его на свой пк (кликаем 2 раза на файл, во вкладке remote host). Для того чтобы отправить файл на сервер нажимаем на иконку . Так же есть возможность откатить правки обратно, нажав на иконку , или посмотреть изменения нажав на иконку .

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

Для того, чтобы просмотреть локальную историю изменений файла, нужно кликнуть правой кнопкой мыши по файлу, и выбрать пункт «Local History — Show History».

В результате откроется окно, в котором слево будет отображена вся доступная история изменений файла и 2 колонки. Левая колонка это состояние файла из истории, а в правой — текущее. Обратите внимание, Вы можете вносить правки только в правую колонку. Так же доступны кнопки откатить изменения или сохранить патч. После закрытия окна, все изменения в правой колонке, автоматически сохраняться.

Сравнение содержимого 2-х файлов

Для того чтобы сравни 2 файла на вашем ПК, необходимо кликнуть по файлу правой кнопкой мыши и выбрать пункт «Compare with» в появившемся окне указать, с каким файлом мы хотим сравнить.

Для того чтобы сравнить локальный файл с файлом на удаленном сервере, необходимо кликнуть по файлу правой кнопкой мыши и выбрать пункт «Deploymet — Compare with deployed version on *имя удаленно сервера*».

Смена кодировки

Бывает, что необходимо перекодировать файлы из cp-1251 в utf-8. Для этого необходимо в файле кликнуть правой кнопкой мыши, и выбрать пункт «File Encode». Так же это можно сделать кликнув по выбору кодировки.

Исправление символов переноса

В unix системах символы переноса на новую строку, отличаются от символов в Windows. Из-за этого может получиться так, что при сравнении файлов, весь файл будет подсвечиваться как модифицированный, на деле Вы поменяли всего лишь 1 символ.
Рекомендуется использовать unix переносы. В меню программы «file — file encoding».

Настройка табуляции, конвертация табов\пробелов

В случае если документ содержит несколько вариантов табуляции, редактор Вам подскажет это и предложит выбрать.

Так же это можно сделать в настройках, нажав «Ctrl+Alt+S» и перейдя в раздел «Editor — Code Style», выбрать нужный формат документа и поставить галочку «Use tab charaster».

Для быстрого переформатирования документа нужно в меню программы «Edit — Convert Indents» выбрать какой символ использовать.

Поиск расположения файлов на ПК

Чтобы быстро найти расположение файла на ПК, необходимо кликнуть правой кнопкой мыши по файлу, и выбрать пункт «Show in Explorer», отроется папка с выбранным файлом.

Быстрое отформатировать в семантический код

Иногда попадаются файлы, которые не возможно читать из-за плохого форматирования или минимизации. Тут нам поможет реформатирование кода, в меню программы выбираем пункт «Code — Reformat Code».

Работа с терминалом и ssh session

Вызвать терминал можно средствами меню программы «View — Tools Windows — Terminal», сочетанием клавиш (Alt+ F12), из панели быстрого доступа. По сути это командная строка в Windows.

Для запуска SSH Терминала для подключения к серверу, нужно перейти в меню программы «Tools — Start SHH Session» после чего выбрать уже существующее подключение, или указать параметры подключения для нового.

Заметки и закладки

Для добавления заметки необходимо добавить Html комментарий с текстом todo. Вызвать панель заметом можно из меню программы «View — Tools Windows — TODO» или из панели быстрого доступа. При помощи фильтра можно настроить отображение заметок. По двойному клику на заметку, у Вас автоматически откроется файл и курсов будет расположен на заметке.

<!--todo Моя тестовая заметка-->

Закладки позволяют быстро просматривать или показывать куски кода. Для добавления закладки необходимо установить курсор на начало нужного куска кода и при помощи горячей клавиши (F11) или из меню программы «Navigate — Bookmark — Toggle Bookmark» поставить закладку. Закладка отобразится в виде галочки.

Для быстрого просмотра при помощи горячей клавиши(Shift-F11) или из меню программы «Navigate — Bookmark — Show Bookmark» вызвать окно просмотра.

LiveEdit(LivePreview) просмотр изменений без перезагрузки страницы на ПК

Установим плагин LiveEdit. Для этого необходимо открыть настройки программы(Ctrl+Alt+S), затем перейти в раздел «Plugins» и нажать кнопку «Browse repositories…».

В открывшемся окне, в строке поиска ввести «Live Edit» и нажать кнопку Install. После установки программа попросить перезагрузить ее.

Снова идем в настройки программы (Ctrl+Alt+S), затем в «Build, Execution, Debbug — Live Edit» и ставим галочку на «Auto in (300 ms)».

Теперь необходимо установить дополнение, для браузера, чтобы связать наш редактор и браузер. Обратите внимание, что дополнение работает, только в браузерах Chrome, Yandex. В будущем разработчики обещают дополнение для браузеров Firefox, Safari. Более детально вы можете прочитать на сайте разработчиков.

Запускаем Live Edit, для этого выбираем пункт в меню программы «Run — Debug» или на панеле быстрого доступа нажимаем иконку жука.
Обращаю Ваше внимание, что режим «Live Edit» работает только для локальных проектов, т.е только для тех файлов, которые лежат на вашем ПК и не связаны с удаленным сервером.

Этап 2 — установка и настройка компилятора стилей (sass,scss)

Для установки компилятора на понадобится установить:

• nodejs
• ruby
• gem sass, gem scss

Важно! Установка должна производится от имени администратора.

Установка nodejs

Скачиваем установщик для Windows c официального сайта. Стандартная установка, но на этапе выбора компонентов убедитесь, что выбраны пункты «Add to path». Должно быть как на изображении ниже.

Установка ruby

Скачиваем установщик для Windows c официального сайта. Стандартная установка, но на этапе выбора компонентов убедитесь, что стоит галочка «Add Ruby Executables to PATH».

Перезапускаем Phpstorm закрыв его или воспользоваться из меню программы «File — Invalidate Chache / Restart — Just Restart». Проверяем версию nodejs и ruby. Для этого нужно набрать в терминале

node -v

и

gem -v

В результате:

Иногда требуется перезапустить компьютер чтобы терминал заработал. Все зависит от версии Phpstorm.

Установка gem sass, scss

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

gem install sass 

и

gem install scss 

При первой установке вплывет стандартное окно Windows с вопросом, можно ли выполнить приложение ruby. Жмём «ОК».

Установка закончена, теперь произведем настройку, чтобы наши файлы автоматически компилировались из sass в css.
Если мы создадим новый файл .sass или .scss, то при открытии его программа, автоматически предложит нам назначить «File Watcher».

Нажав на ссылку «Add watcher», автоматически откроется окно с настройкой наблюдателя. Если у нас всё установилось корректно, то в поле programm у нас будет путь к sass.bat файлу.

Нажимаем «ОК» и на этом быстрая настройка завершена. Проверяем работу компилятора, для этого напишем любой кусок кода в sass файле. В результате после нажатия «Ctrl+S» будет выполнена компиляция стилей.

В случае если в файле допущена ошибка, программа выдаст нас ошибку и файл не будет скомпилирован.

Но часто бывает, что файлы .sass(препроцессоров) лежат в одной папке, а результат .css нужно помещать в другую папку. Для этого нам нужно, лишь поправить пути. Нажав сочетание клавиш (Ctrl+Alt+S) и переходим в раздел «Tools — File Watchers».

Далее кликаем 2 раза по строчке Sass.

Поле «Arguments» после символа «:» нужно указать путь к папке css. Жмём на кнопку «Inset macros» и вставляем переменную «$FileDir». В данном случае «$FileDir» это переменная программы, которая автоматически будет подставлять путь до нашего проекта.

В результате должно получиться $FileDir$\css\$FileNameWithoutExtension$.css , где первая переменная это путь к проекту, затем имя папки, где нужно хранить .css файлы, и имя переменной файла. Этот кусок $FileDir$\css\$FileNameWithoutExtension$.css нужно вставить и в поле «Output path to elements». Обращаю Ваше внимание, что в указании пути стоять обратные слеши «\».

В результате получим, как на изображении, и жмём кнопку «ОК».

Проверяем, для этого нужно просто внести любое изменение в .sass файл и нажать «Ctrl+S». Программа автоматически создаст папку с названием «css» и поместить в нее скомпилированные файлы.

Старые файлы можно удалить.

Для .scss файлов принцип тот же. Только «File Watchers» будет SCSS и программа подставит в поле programm путь к scss.bat файлу.

Настройку дополнительных компиляторов можно посмотреть на официальном сайте

Этап 3 — установка сборщика проектов, пример настройки (gulp)

Пример установки и настройки с нуля

Для создания конфигурационного файла необходимо в терминале набрать команду npm init, после чего будут заданы ряд вопрос, где можно жать кнопку «Enter». Только в поле «entry points» укажите название вашего файла, в данном случае это будет «gulpfile.js»

Если вы что-то нажали не так, или решили исправить, то можно это сделать зайдя в сам файл package.json, который создался и располагается в корне проекта.

Более детально о настройке вы можете прочитать на официальном сайте.

Теперь нам нужно установить сам gulp, и какой-то полезный плагин, пускай это будет autoprefixer. О проекте PostCss и Autoprefixer Вы можете прочитать на официальном сайте.

Для установки Gulp, нужно набрать команду в терминале npm install gulp --save-dev и дождаться окончания установки. Если все прошло успешно, в корне у нас будет создана папка node_modules, в которой будет установлен менеджер пакетов Gulp. Ключ —save-dev, нужен чтобы установить пакеты локально, и в дальнейшем использовать на других проектах.

Теперь установим autoprefixer, для этого наберем команду npm install gulp-autoprefixer --save-dev и дождёмся окончания установки.

Обратите внимание, что установка autoprefixer на официальном сайте, отличается от установки на сайте npm. Это связано с тем, что на официальном сайте, autoprefixer работает через PostCss(постпроцессор). В дальнейшем, лучше использовать данный плагин через PostCSS.

Теперь если мы откроем файл package.json, то увидим, что наши дополнения автоматически прописались в блок «devDependencies».
Установка плагинов завершена, теперь их нужно настроить.

Для этого создадим в корне файл «gulpfile.js», и вставляем туда код который указан на сайте npm в блоке usage и сохраняем его (Ctrl+S).

Я внес небольшие изменения, чтобы было более понятно.

var gulp = require('gulp'),
      autoprefixer = require('gulp-autoprefixer');

      gulp.task('autoprefix - плагин', function () {
         return gulp.src('css/sass-style.css')
            .pipe(autoprefixer({
               browsers: ['last 2 versions'],
               cascade: false
             }))
           .pipe(gulp.dest('css/'));
      });

Проверяем работу плагина. Добавим в .sass файл свойство display:flex и сохраним его. По умолчанию он скомпилирует результат в .css файл.

Для того, чтобы выполнить наше задание, откроем панель gulp, сделать это можно кликнув правой кнопкой мыши по файлу «gulpfile.js» и выбрать пункт «Show Gulp Tasks» или из меню программы «View — Tools WIndows — Gulp». В результате чего отроется панель со списком задач.

Внимание! После любых правок в файле «gulpfile.js», необходимо обновить задачи.

Кликаем 2 раза по заданию, и ждём окончание его выполнения. Если все прошло успешно, терминал оповестить Вас об этом. Как видите, у нас добавились префиксы в файле .css.

Для примера добавим ещё один плагин, который позволит минифицировать код.
Выполним следующую команду в терминале npm install gulp-cssnano --save-dev и дождёмся окончания установки.
Теперь необходимо обновить «gulpfile.js», согласно документации указанной на сайте и не забываем обновить задачи в gulp вкладке.

   var gulp = require('gulp'),
         autoprefixer = require('gulp-autoprefixer'),
         cssnano = require('gulp-cssnano');

         gulp.task('autoprefix - плагин', function () {
              return gulp.src('css/sass-style.css')
                 .pipe(autoprefixer({
                        browsers: ['last 2 versions'],
                        cascade: false
                  }))
                  .pipe(gulp.dest('css/'));
                });

                gulp.task('nano ', function() {
                    return gulp.src('css/sass-style.css')
                    .pipe(cssnano())
                    .pipe(gulp.dest('css/'));
                });

В результате у нас должно появиться ещё одно задание.

Кликаем 2 раза по заданию «nano» и получаем минифицированый файл, без лишних пробелов, отступов, переносов и.т.д.

Как видите ничего сложного нет. Больше полезных плагинов Вы можете найти тут, так же рекомендую подписаться на группу вконтакте, в который Вы сможете следить за развитием проекта

и замучать вопросами автора PostCss

.

Дальше у Вас скорей всего возникнет логичный вопрос: «Мне каждый раз придется, каждый раз так устанавливать все плагины для других проектов?»

Чтобы каждый раз не ставить все плагины и настройки в ручную, я рекомендую сохранить, свои файлы «package.json» и «gulpfile.js». В дальнейшем, нужно будет только, скопировать эти два файла, в новый проект и выполнить команду npm install и все дополнения(autoprefixer, nano …) автоматически установятся. Очень важно всегда придерживаться единой структуры хранения файлов. Тогда не придется править пути к файлам. Как правильно организовать структуру файлов, Вы можете поискать в интернете.

На этом настройка закончена. В целом время на прочтение и настройку займет не больше одного часа. Надеюсь статья будет Вам полезна.

В планах добавить обзор систем контроля версии(git, mercurial).

Получил определенный фидбек на свое обращение к компании о создании блога. И некоторые коллеги просили в первую очередь рассказать именно про настройку phpStorm. Некоторые пока не совсем понимают, зачем им этот тормознутый зверь (на самом деле я так не думаю), который изменит их привычный уклад работы с проектом. Да и в самом то деле — зачем?

Редактор vs IDE

Каждый пользуется своим любимым редактором, у кого-то есть автокомплит по встроенным функциям языка, у кого-то даже по функциям в открытых файлах. Есть хорошие (напр. Sublime Text), есть похуже (напр. Notepad++), но поверьте — этого всего недостаточно. Этими инструментами можно пользоваться в тех случаях и проектах, когда количество постоянно редактируемых файлов не превышает 10-15, а процесс работы с кодом является созидательным (именно разработка) и требует много меньше отладки. Но мне, как и большинству сотрудников компании, в которой я работаю, по роду деятельности приходится в большей степени заниматься не созиданием, а изучением уже наработанного, и доработкой существующего функционала. Поэтому нам важно уметь экономить время на мелочах, уметь быстро и точно искать информацию по огромному количеству файлов. Минимум!

Тут то на сцену и выходит IDE. IDE — это полноценная среда для разработки. В IDE должно быть максимум инструментов, для того чтобы никакие вопросы не отвлекали от выстраивания в голове многочисленных, вложенных друг в друга абстракций.

Но, пока не буду вдаваться в подробности, о возможностях phpStorm’a у меня будет еще не один пост. А в этом посте я попробую преодолеть барьер, через который не могут перескочить очень многие разработчики, а именно — создание проекта.

Для того, чтобы использовать максимум возможностей phpStorm, необходимо использовать его в контексте проекта. Проект представляет из себя набор файлов (в нашем случае — файлов сайта), с которыми ведется постоянная работа, а в директории проекта phpStorm хранит свою системную директорию с настройками /.idea. Проект хранится целиком и полностью на той машине, на которой работает разработчик. Это один из ключевых моментов, который поначалу обескураживает разработчиков, которые привыкли работать с сайтом на удаленной машине через ssh или ftp. Только локальное хранение проекта позволит использовать IDE на полную катушку.

Создать проект крайне просто, для этого нужно воспользоваться мастером создания проекта (ваш КО). Для запуска мастера есть несколько способов:

1. При старте phpStorm появляется окно, где можно выбрать действия для быстрого старта.
2. Из основного окна phpStorm в меню File …

Описывать создание пустого проекта не буду — это достаточно тривиально. А вот на создании проекта из существующих файлов я остановлюсь подробнее.

У каждого разработчика в нашей компании есть индивидуальный хост разработки под каждый проект, который расположен по адресу <username>.<project_name>.develop.тратата.тата. У каждого разработчика есть полноценный ssh доступ к своему хосту. Этим и воспользуемся. Запустим мастер создания проектов из существующих файлов (File -> Create new project from existing files или аналогичная кнопка на стартовом окне). Вам будет предложен способ создания проекта.

Перечислю их все:

1. Web server installed locally, source files are located under its document root. Самый простой вариант, когда вы разрабатываете локально на своем ПК все файлы проекта хранятся там же в DOCUMENT_ROOT виртуального хоста. Отметаем этот вариант, т.к. в нашем случае он не нужен
2. Web server installed locally, source files are located elsewhere locally. Данный вариант аналогичен предыдущему, за исключением того, что файлы проекты лежат не в DOCUMENT_ROOT
3. Web server is on remote host, files are accessible via network share on mounted drive. Данный вариант подойдет тем, у кого файлы проекта доступны через локальную сеть на другой машине. В принципе, в нашем случае можно использовать этот вариант. Наш develop сервер находится в локальной сети с разработчиками. Правда тут есть одно но — ПК разработчиков под управлением Windows, а сервер на Debian. Сеть между ними работает с помощью Samba, протокол обмена между ними несколько медленнее, чем в случае локальной сети с однородными ОС, поэтому этот вариант мы тоже для себя отметаем.
4. Web server is on remote host, files are accessible via FTP/SFTP/FTPS. Данный вариант для тех, кто имеет доступ к своему проекту через указанные протоколы и веб-сервер установлен там же.
5. Source files are in a local directory, no Web server yet configured. В этом случае можно создать «просто проект» без деплоя и синхронизации с веб-сервером, а настроить их позднее.

На самом деле не так важно, какой тип будет выбран. Любой проект может быть приведен к любому состоянию с помощью настроек. Но мы остановимся на 4м варианте — выбираем его.

Далее phpStorm предложит дать имя проекту и указать директорию, где будут храниться все файлы проекта. Если у вас есть локальный веб-сервер, то я рекомендую складировать все проекты в директорию, откуда вы подключаете хосты для веб-сервера, с именами типа <project_name>.loc, чтобы в случае, например, недоступности сети, или девелоп сервера, можно было легко переключиться на локальную разработку.

Также здесь можно выбрать, какие настройки Deployment’а установить, выбираем Default, об этом я расскажу чуть ниже.

На следующем шаге нам предлагается использовать существующий или создать новый «сервер» для подключения к файлам проекта. Что такое сервер в данном случае? Это перечень настроек, которые позволяют подключиться к файлам проекта с помощью какого-то протокола. Для каждого проекта рекомендую создавать свой сервер, несмотря на то, что проекты могут физически находиться на одном develop сервер и иметь одинаковые данные для входа.

Выбираем Add new remote server, ставим галку «Don’t check HTTP Connection» и переходим к следующему шагу, где нам нужно собственно указать настройки сервера. Делаем по аналогии с тем, что показано на скриншоте, тут все очевидно (закрасил тут список существующих у меня серверов)
В качестве пароля можете использовать либо SSH ключ, либо обычный пароль, у вас должно быть и то и другое. Рекомендуется использовать ключ, особенно для подключения к серверу вне офиса. Если для шифрования ключа используется пароль, то его тоже нужно будет ввести тут. (закрасил адрес своего ключа)

На следующем шаге нам будет предложено настроить директорию проекта. Поскольку мы указали в настройках сервера в качестве корневого пути директорию расположения файлов проекта, в этом окне будут показаны директории проекта. Соответственно отмечаем корневую директорию как Project Root с помощью соответствующей кнопки. Все директории проекта (кроме .git и .idea и некоторых других глобально исключенных, если они есть) будут помечены зеленым цветом.

Это означает, что они будут выкачаны при создании проекта. Но (внимание, ключевой момент) — мы не будем сейчас качать файлы. В случае с битриксом это долго и мучительно по ssh, т.к. в нем ну очень много файлов небольшого размера. Я пробовал выкачивать, даже по локалке проект целиком (включая ядро), качается непозволительно долго. И причем, если сейчас нажать на Next — phpStorm начнет выкачивать проект, без возможности приостановить процесс — либо ждать придется до конца (очень долго), либо отменять и начинать заново.

Для того чтобы обойти данную ситуацию, мы отмечаем корневую директорию как Excluded from download. Все директории перестанут быть зелеными. Пометив корневую директорию таким образом, мы запретили phpStorm’у загружать проект целиком в данный момент. Смело жмем Next.

На последнем шаге phpStorm предложит указать web адрес проекта. Если вы все сделали так, как я предлагал ранее, в этом поле вам ничего указывать не потребуется. Жмем Finish, и радуемся созданному проекту! Ура!

Но это еще не все 🙂

Во-первых, нам нужно снять ограничение на загрузку файлов, которое мы выставили на предпоследнем шагу. Сделать это можно через меню Tools > Deployment > Configuration. Вам отобразится уже знакомое окошко с настройками сервера, только там будет еще 2 вкладки: Mappings и Excluded Paths. Идем на последнюю и видим там список из 2х директорий — локальной директории проекта и remote директории проекта. Удаляем эти пути из исключений — выделяем их вдвоем с помощью ctrl и жмем Remove path. После этого сохраняем настройки сервера.

Но как нам теперь работать с проектом? Ведь файлов то нет … Тут опять есть несколько вариантов. Если проект находится под версионным контролем, то идем в директорию своего свежесозданного проекта через консоль и выполняем следующие команды:

Тут важно понимать, что проект на локальном ПК и проект на develop сервере должны быть синхронизированы. Если вы делаете клон репозитория, то убедитесь, что ваш проект на develop сервере находится на какой-то стабильной ветке и без изменений. Соответственно, после клонирования, нужно свой локальный проект переключить на ту же ветку. После клонирования нужда в репозитории на develop сервере отпадает, и использовать его больше не имеет смысла.

Пара слов о git на windows. Как установить — есть множество информации в интернетах. После установки не забудьте проставить имя разработчика и email адрес:

Есть небольшая тонкость. Поскольку git отслеживает права файлов, а на windows права на файлы кардинально отличаются от юниксовых, то нужно отключить проверку прав для репозитория, или глобально. Для этого выполните команду (с ключом —global или без)

Если же проект без версионного контроля, то первое что надо сделать — это настроить версионный контроль 🙂 Но в принципе, можно и без него обойтись. Можно для начала скачать все файлы проекта, которые не относятся к ядру. Для этого нужно включить панель с отображением файлов сервера (View > Tool Windows > Remote Host или Tools > Deployment > (Browse) Remote Host). Справа появится панелька с файлами на сервере.

Отмечаем нужные директории и файлы (все кроме ядра и upload), жмем ПКМ > Download from here, и ждем пока загрузится. Как правило — ждать долго не приходится, зависит от объема проекта. Пока качается, можно исключить из синхронизации все те директории, которые нам не нужны — всяческие кэши, upload директорию и тп. И с этим уже можно работать 🙂 А уже потом вечером поставить загрузку оставшихся модулей и компонентов на ночь, и тогда у вас будет целиком выкачанный проект к утру.

Помимо этого есть еще способ скачать проект — можно сжать папку сайта на сервере разработки в архив, скачать этот архив и распаковать уже у себя в папке проекта — тоже рабочий вариант, но в случае с большими проектами нужно умудриться не подвесить сервер, поэтому это наименее приоритетный вариант

После того как скачается, остается настроить лишь синхронизацию между локальными файлами и хостом разработки. Помните мы вначале выбрали настройку для Deployament’а как Default? Пришло время это изменить. Для этого заходим в Tools > Deployment > Options и настраиваем так, как показано на картинке.

Небольшие пояснения о том, что заслуживает внимания. Опция Upload changed files automatically to the default server стоит в значении Always для того, чтобы все изменения мгновенно уходили на сервер разработки. PhpStorm имеет особенность сохранять файлы без нажатия на ctrl+S, и в случае установки этой опции изменения попадут на сервер сразу как только вы перестанете работать с кодом. Скорости передачи в локальной сети должно хватить на то, чтобы пока вы переключаетесь из окна phpStorm’а в браузер с помощью alt+tab (или может ты крут и переключается с win+tab?), phpStorm смог отправить редактируемый вами файл на сервер разработки. И, как раз, когда вы нажмете f5 для проверки своих изменений, вы их увидите тут же.
Опция Upload external changes отвечает за то, чтоб синхронизировать файлы даже после того, как они изменились вне IDE. Самая частая ситуация — версионный контроль. Сделали checkout через консоль, файлы в проекте изменились. Как только вы зайдете в окно phpStorm’a он сразу поймет, какие файлы были изменены и отправит их на сервер.
И последнее — Warn when uploading over newer file — предлагаю ставить в No в случае с проектами под версионным контролем, и напротив, если версионного контроля нет, то ставить Compare content. Если включить эту опцию, то перед отправкой файла на сервер IDE будет сверять отправляемый контент с контентом на сервере. В случае обнаружения расхождения вам будет предложено либо слить изменения, либо выбрать серверный или локальный вариант. В случае с версионным контролем я оставляю эту опцию выключенной, т.к. за синхронизацию в этом случае отвечает система контроля версий, а не IDE.

Как в итоге работает схема разработки с IDE?
Весь проект хранится у вас на ПК (без базы данных). Репозиторий системы контроля версий также хранится у вас локально. При любом изменении в локальном проекте у нас настроена синхронизация на сервер разработки. Сохранили файл — он улетел на сервер. Переключились с ветки на ветку — все измененные файлы улетели на сервер. Такая безусловная. односторонняя синхронизация получается.

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

И что же мы в итоге получаем по сравнению с работой в редакторе:

1. Автокомплит по всем классам, функциям, константам ядра фреймворка
2. Автокомплит по всем вашим классам, функциям, константам
3. Возможность работать с кодом не вылезая из IDE, и не затрачивая время на поиск документации по функциям, ведь документация доступна при нажатии на ctrl+Q на функции или методе (если для нее определен phpDoc)
4. Возможность использования стандартизованного стиля кодирования
5. Возможность поиска любой сущности по всему проекту. Представьте что вам нужно заменить использование какой-то функции на другую, или найти все вызовы определенного компонента, или найти, где используется определенный css класс
6. При ctrl+ЛКМ мгновенно переходить к определению функции, класс, переменной или константы
7. Можно перечислять ооочень долго и это тема отдельных статей …

Статья последний раз была обновлена 15.05.2023

Хочу рассказать, как быстро и эффективно начать работать в интегрированной среде разработки (IDE) — PhpStorm. Полный цикл создания проекта и его базовой настройки — далее в этой статье.

Работать будем с новейшей версией 2023.1.1 под Windows, сборка 231.8770.68 от 1 мая 2023 г. Скачать триальную версию программы можно по ссылке >>

Перед тем как начать, я бы хотел сказать, что статья предназначена для людей, только начинающих работу в данной IDE и призвана помочь сориентироваться в программе человеку, впервые открывшему ее. Поэтому большая просьба отнестись с пониманием.

Создание проекта

При первом запуске программы мы увидим такое окно:

Выбираем триальную версию или активируем программу вот по этой статье, а точнее по ее второй части. Делаем это, естественно, исключительно в ознакомительных целях, ведь не всем хватает 30-ти дневного триала для принятия решения о покупке программы.

PhpStorm работает только с локальной копией проекта, подключиться к серверу и редактировать файл напрямую тут не получится.

В наиболее частых случаях сценарий таков: у вас лежат файлы на удаленном сервере, вам нужно их править. Файлов, которые понадобятся в работе максимум несколько десятков, при этом файлов на сервере несколько тысяч и совершенно нет нужды скачивать их все в локальную копию.

Создаем новый проект — нажимаем New Project from Existing Files:

Выбираем пункт Web server is on remote host, files are accessible via FTP/SFTP/FTPS/WebDAV:

Даем имя новому проекту и обязательно выбираем радио-кнопку Custom, для того чтоб задать первоначальные настройки проекту. Не забываем и в этом случае нажать Next.

Появится такой экран:

На этом экране нам нужно указать несколько важных настроек:

1. Upload changed files automaticaly to the default server ставим On explict save action (Ctrl+S). Эта настройка довольно коварная штука, нужно всегда держать в голове тот факт, что даже случайно удаленные файлы или папки при автоматической синхронизации с сервером — удаляются и там. Конечно будет предупреждение и поэтому я выставил как на скрине, у вас могут быть другие предпочтения.
2. Wharn when uploading over newer file ставим Compare timestamp & size, а также выбираем галочку внизу Notify of remote changes. Эта настройка будет предупреждать вас при попытке перезаписать более новую версию файла, который был залит, например, вашим коллегой. В таком случае нужно мержить вашу локальную копию с копией на сервере.

В очередной раз нажимаем Next, и переходим к настройке доступа к серверу, с которым будем работать.

Настройка доступа к серверу

Видим настройки нового сервера. Тут вводим нужные пароли, название для серевера, как он будет отбражаться в списке в IDE, и не забываем нажать галочку Save password, если не хотите вводить пароль каждый раз при деплое. Подразумевается, что у вас простое FTP-соединение с сервером, если же вы используете SFTP (что правильнее), то вам нужно будет заполнить параметры SSH в отдельном окне, там уже указать либо пароль, либо путь до файла ключа.

Я не буду на всем этом заострять внимание, ибо я не блогер KtoNaNovenkogo.ru, и не пишу роман параллельно постигая сам материал. Все эти технологии, способы подключения к серверу, использование системы контроля версий и прочее, нужно осваивать вне контекста самой IDE, они потребуются любому разработчику.

Важные параметры я выделил на скрине, но у вас могут быть и свои предпочтения, например, отображать или нет скрытые файлы (под них попадает .htaccess). Обратите внимание, что я уже указал папку на сайте, которая мне нужна для работы. Это мой лендинг. Все настройки — ненастоящие, я сделал их специально для статьи в локальном сервере Open Server. Повторюсь, применять обычный FTP на боевом сервере крайне опасно!

Вообще, во всех примерах есть что убавить, есть что добавить к моим настройкам. У каждого проекта своя структура, способы подключения, вариантов слишком много, чтобы описывать каждую галочку.

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

Нажимаем Next.

Видим список каталогов сервера, в моем случае директория с файлами уже была указана уровнем выше, но тем не менее нам нужно указать корень проекта (Project Root) в этом окне.

Мы выбрали нужный нам каталог, и теперь обозначаем его корнем с помощью кнопки на верхней панели. Не торопимся нажимать на Next.

Папки приобретут зеленую подсветку. Это значит, что все они буду скачаны в локальную копию, а этого нам совсем не нужно (или нужно).

Как видно, у нас активировались дополнительные кнопки на панели сверху: Excluded from Download, Resource Root, Exluded from Indexing.

1. Исключает каталог, все его подкаталоги и файлы из загрузки.
2. Помечает каталог, как корень ресурса для подсказок, например, в css-файлах, когда прописываешь пути к картинкам.
3. Исключает файлы выбранного каталога и все файлы подкаталогов из индексации после загрузки.

Как мы уже заверились выше, мы не будем скачивать весь сайт, поэтому нажимаем на кнопку Excluded from Download, затем Next и Create.

Красота, проект создан!

C этого момента надо нажимать на картинку, чтобы ее увеличить

Внимание! Проект может создаться, но не открыться окно с ним. В этом случае после перезапуска приложения нужно нажать на кнопку выбора уже имеющегося проекта и указать папку с проектом, по дефолту у меня это C:\Users\kupereal\PhpstormProjects\lp.

Но у нас по-прежнему нет файлов. Теперь нам доступна вкладка Remote Host справа на панельке:

Закачка нужных файлов и каталогов

Тут все просто — перетаскиваем нужные файлы или каталоги в локальный проект и редактируем их. По идее все сохраненки должны автоматически деплоиться на сервер, но у меня этого не произошло. Может потому, что это был кастрированный Open Server со своими закидонами, которому до своего собрата в macOS — MAMP PRO, как до луны пешком. Разбираться дальше нет никакого желания, подобные системы должны решать проблемы, а не создавать их.

Вместо счастливого финала

Честно говоря, я немного выдохся от статьи об этой IDE, которая и раньше казалась мне не интуитивно понятной и тормозной, в те времена я кодил на Codelobster или NetBeance… Есть похожая по идеологии на PhpStorm IDE под macOS — CodeKit.

Я считаю, что подобные IDE пытаются заменить собой сборщики проектов, утилиты и бибилиотеки разработчика (они почти все консольные и работают вместе с пакетными менеджерами) — это про CodeKit, или стать громоздкой надстройкой над всеми установленными в системе инструментами разработчика типо Composer — это про PhpStorm. Обслуживать разные конфигурации проектов они планируют через настраиваемые профили, а не конфиги. Многие предпочитают все это комбинировать, кому как удобнее.

Что же выбрать новичку? Установите Visual Studio Code и живите счастливо — мой вам совет. Или решайте все через консоль и конфигураторы (системы управления конфигурациями), а вместо IDE используйте обычный текстовый редактор вроде Vim или Sublime, и расширяйте его по надобности плагинами.

Вот такой неоднозначный конец.