Abr@X@bra.ru
PhpStorm, правильная настройка для web-разработки
PhpStorm, правильная настройка для web-разработки

PhpStorm, правильная настройка для web-разработки

12.03.2017
1213

Привет, меня зовут Стас. Я разработчик сайтов на 1С-Битрикс. В этом посте хочу поделится своим опытом, как правильно работать с IDE PhpStorm и удаленным web сервером.

Ниже пойдет описание как создать новый проект и подключить его к удаленному web серверу или хостингу. Также покажу как настроить препроцессоры типа - Sass, для автоматической компиляции в CSS, без сторонних компиляторов, IDE умеет делать все сама.

Создаем новый проект

Для примера создадим папку на рабочем столе и назовем ее project. В ней и будем хранить всю структуру нашего сайта. Это очень полезный шаг, все файлы проекта будут храниться как локально так и удаленно. Теперь запустим PhpStorm и выберем пункт - Open.

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

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

Подключение к серверу

Для этого нужно в верхнем меню выбрать пункт Tools > Deployment > Browse Remote Host. Данным действием мы вызовим вкладку Remote Host в которой будет отображаться структура папок удаленного проекта. Она должна появиться справа.


Нажимаем на кнопку добавить новый проект.

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

После того как с названием и типом подключения определились, первое на, что стоит обратить внимание, это возможность установки чекбокса на пункт - Visible only for this project. Если оставить пункт активным, тогда данное соединение будет видно только для этого проекта, если снять то для всех новых проектов. Я всегда выключаю данную опцию.

Вводим IP сервера или имя host, указываем логин и пароль для соединения. Советую поставить чекбокс в поле - Save Password, чтобы при повторном подключение не вводить пароль заново.


Также на этой вкладке стоит уделить внимание еще двум кнопкам. Это - Test SFTP connection, она позволяет протестировать новое соединение с сервером. И Autodetect - эта кнопка если на нее нажать, выберет автоматически путь до нашего проекта, но как правило он не точный, советую его указывать вручную, нажав на три точки рядом с кнопкой.


Далее идем в этом же окне на вкладку Mappings, тут все оставляем как есть, только во втором поле указываем слеш.



Третья вклад - Excluded Paths, позволяет нам добавлять файлы или папки которые мы хотим запретить для обмена с сервером. В данном примере у меня таких нет.

Настройка обмена данными

После того как мы создали новое соединение, советую заглянуть в его настройки -  Tools > Deployment > Options


Тут стоит обратить внимание на опцию - Upload changed files automatically. Она позволяет нам выбрать, как будет происходить сохранение данных на удаленный сервер.

  • Never - никогда не будет.

  • Always - всегда будет.

  • On explicit save action CMD-S - при нажатии на сочетания клавиш, для MAC это - cmd+s, для windows - ctrl+s. Советую всегда выбирать именно этот пункт. То есть пока мы не нажмем нужное сочетание клавиш, изменения которые были внесены, не улетят на сервер.

Еще одна интересная опция это - Upload external changes, она позволяет включить отслеживание изменений во всех файлах проекта. То есть, если у нас есть три файла и во всех трех мы, что-то изменили, после чего нажали cmd-s, на сервер улетят все изменения трех файлов. Если вы на свое проекте собирается использовать Sass, тогда советую ее оставить активной.


Sass, настройка компиляции в PhpStorm

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

Давайте создадим для примера файл с расширением .sass, если вы отдаете предпочтение .less или .scss может создать их.


После его создание, IDE автоматически предложит нам добавить Watcher - это некий наблюдатель за нашим файлом .sass. Давайте его добавим.


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


Давайте теперь внесем какие-то стили в наш файл, чтобы проверить как работает компиляция в css.


Обратите внимание, что у нашего файла автоматически появилось вложенность с скомпилированными файлами main.css и main.css.map, если открыть main.css, то можно увидеть, что компиляция в css отлично работает.


Дальше просто подключаем main.css в head нашего проекта и спокойно пишем стили в sass файле. Хочу напомнить, чтобы PhpStorm отслеживал все измененные файлы автоматически нужно включить опцию Upload external changes, про которую я писал выше.

Вот принципе и все, все довольно просто. Хоть пост и получился довольно объемный, все первичная настройка занимает не более пяти минут. Работайте в PhpStorm, это отличная IDE в которой множество настроек которые облегчат вам жизнь и сэкономит ваше время при web разработке сайтов.





PhpStorm
Читайте также:
«1С-Битрикс» для работы с онлайн-кассами нового образца

«1С-Битрикс» для работы с онлайн-кассами нового образца

Компания «1С-Битрикс» выпустила бесплатное приложение «1С-Битрикс.кассы» для интернет-магазинов для соответствия 54-ФЗ о...
Читать
Ajax подгрузка контента Битрикс

Ajax подгрузка контента Битрикс

Ajax подгрузка контента, бесконечный скроллинг, «вебдванольная постраничка» — этот подход называют по разному, но суть о...
Читать
Вызов горячих функции PhpStorm/WebStorm

Вызов горячих функции PhpStorm/WebStorm

Привет мой юный друг) Это была ирония! Теперь давай перейдем собственно к делу, данный пост будет интересен тем разраб...
Читать