Настраиваем IDE PhpStorm

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


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

open-project

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

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

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

remote

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

remote-1

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

remote-2

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

Вводим IP сервера или имя host, указываем логин и пароль для соединения.

remote-3

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

remote-4

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

remote-5

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

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

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

remote-6

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

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

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

remote-7

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

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

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

remote-8

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

remote-9

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

remote-10

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

remote-11

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

remote-12

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

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



Похожие заметки:

Настраиваем XDebug в PhpStorm

Краткий обзор основной настройки и работы средства профилирования и отладки PHP скриптов для популярной IDE PhpStorm

Открыть здесь

1616

Обзор CodeLobster IDE

CodeLobster IDE это удобная, бесплатная, кросс-платформенная IDE с поддержкой Drupal, Joomla, Twig, JQuery, CodeIgniter, CakePHP, Bootstrap, Laravel, Node.js, AngularJS, Symfony, Magento, Yii, WordPress

Открыть здесь

114


В этой заметке комментарии закрыты.