Ide storm: Download PhpStorm: Lightning-Smart PHP IDE

Секреты быстрого кодинга в WebStorm / Блог компании JetBrains / Хабр

Сегодня — немного практических советов по работе с WebStorm.

Вначале пишем совсем простой HTML, после color: нажимаем <Ctrl-пробел> и получаем список цветов.

КО подсказывает: во всех IDE от JetBrains <Ctrl-пробел> — это контекстная подсказка.

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

А теперь представим себе проект посложнее, небольшое приложение под node.js.

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

Начинаю вводить в конце строки тэг

<br>

Нажимаю клавишу <, WebStorm сам догадывается, что мне нужен

<br>

и предлагает список вариантов с уже выбранным тэгом, который мне нужен. Я просто нажимаю Enter, и — готово!

Добавляю новую функцию в файл .js. Пишу fun<Ctrl-пробел>, срабатывает автодополнение, получаю function, дальше можно продолжать: имя и тело функции. В WebStorm есть два способа автодополнения:

<Ctrl-пробел>, <Enter>

— это дополнить с вставкой текста, а

<Ctrl-пробел>, <Tab>

— с заменой текста справа от курсора до разделителя (убирает неверно написанные ключевые слова и имена).

Когда ставишь открывающую фигурную скобку, тут же ставится закрывающая — и захочешь, а не забудешь ее в конце тела функции. Нажимаешь Enter — и она любезно отъезжает не на следующую строку, а на две строки вниз, открывая место для тела функции.

Надо размножить строку, скажем, однотипное поле формы? <Ctrl-D> (от слова Duplicate).

Надо перейти к определению чего-то (переменной, функции, класса?) <Ctrl-B> (от слова Base). А теперь надо бы обратно? <Ctrl-Alt-стрелка влево>.

Внимание! Можно вляпаться!— на некоторых ноутбуках переворачивает экран на 90^o. Чтобы отменить эту полезную функцию и пользоваться этой комбинацией клавиш в WebStorm, надо в правой части системной панели вызвать программу HD-графика Intel, и там выбрать Комбинация клавиш | Выключить.

Еще немного хитростей для тех, кто, как я, недавно пишет под node.js:

1) Если в node.js при запуске приложения из WebStorm возникает ошибка

throw arguments[1]; // Unhandled 'error' event 
Error: listen EADDRINUSE

это, скорее всего, значит, что вы пытаетесь запустить еще одну копию сервера node.js (а на одном TCP-порте может жить только одна копия). Чтобы этого избежать, надо в Run | Edit Configurations в ветке node.js для вашего приложения (например, index.js) поставить галочку check no other instances are running.

2) Если в приложении есть require(‘модуль’), а определения (например, функций) из этого модуля в IDE не видны, и по Ctrl-B недоступны, похоже, вы цинично нарушаете рекомендации разработчиков node.js: если вы используете модуль в проекте, надо его устанавливать локально.

Это значит (спасибо Сергею Симончику за разъяснение!), что в папке проекта должна быть папка node_modules, и в ней должны быть папки соответствующих модулей. Если папки нет, и по команде npm install модуль она не создается, ее надо создать руками, а в корневой папке проекта в командной строке дать команду npm install модуль.

Программа npm туповата (или чересчур умна): если у вас в корне проекта нет node_modules, а выше корня проекта есть папка node_modules, локальная установка модуля произойдет в нее.

Если же модули установлены правильно, а WebStorm продолжает подчеркивать функции из модулей серой волнистой линией («не определены»), то надо отметить, какие библиотеки node.js вы подключаете:

3) Проверку кода «на лету» в WebStorm можно делать аж тремя разными способами, все три — весьма гибкие: JSLint, JSHint и внутренний инспектор кода. По умолчанию включен только внутренний инспектор, который можно нечеловечески гибко настраивать в меню Settings->Inspections.

Если же надо включить JSHint или JSLint, то это делается в меню Javascript | Code Quality Tools. Оба этих инструмента — внешние, но они идут в комплекте с WebStorm и прозрачно интегрированы в IDE.

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

Не всем постоянно нужна проверка правописания встроенным инспектора кода. Я не хочу называть переменные в своем коде словами английского языка, а всякие там qry_1 и qry_2 подчеркиваются зеленой волнистой линией (не говоря уже о названиях полей в БД, которые тоже в коде попадаются). Отключить проверку правописания можно в Settings | Inspections | Spelling.

Конечно, это далеко не все секреты удобного кодирования в WebStorm, и если хабрасообщество одобрит текст, то в следующих выпусках мы будем говорить о поддержке TypeScript, SourceMaps и некоторых полезных горячих клавишах.

UPD: Специально для тех, кто молча ставит минус: как всегда, автор будет благодарен не только тем, кто доволен, но и тем, кто расскажет, что разочаровало, и что хотелось бы видеть. Вместе мы сделаем мир лучше.

WebStorm: это что и зачем?

WebStorm — это редак­тор кода для раз­ра­бот­чи­ков, кото­рые пишут на Java Script. Этим инстру­мен­том поль­зу­ет­ся Давид Рога­нов — наш зна­ко­мый из Яндекс.Практикума. Если еще не чита­ли интер­вью с ним — про­чи­тай­те, там исто­рия успе­ха через кон­курс Яндек­са, вдох­нов­ля­ет!

Всё в коробке

Вы ска­чи­ва­е­те WebStorm и через секун­ду може­те рабо­тать — все нуж­ные инстру­мен­ты для фронтенд-разработки на JavaScript добав­ле­ны по умол­ча­нию. Вам доступ­ны попу­ляр­ные пла­ги­ны и фрейм­вор­ки, мощ­ный ана­ли­за­тор, удоб­ный дви­жок для тести­ро­ва­ния кода, совре­мен­ный отлад­чик при­ло­же­ний и дру­гие функ­ции, кото­рые мож­но посмот­реть на офи­ци­аль­ном сай­те в раз­де­ле «Функ­ци­о­наль­ность». При этом WebStorm крос­сплат­фор­мен­ный, поэто­му вы смо­же­те писать код в любой опе­ра­ци­он­ной систе­ме и про­ве­рять резуль­тат с помо­щью любо­го бра­у­зе­ра.

Пред­ставь­те: вы выпол­ни­ли про­ект, полу­чи­ли гоно­рар и мах­ну­ли в отпуск. Толь­ко вы при­хо­ди­те на пляж — и вне­зап­но зво­нит заказ­чик с прось­бой сроч­но что-то там изме­нить. Вы нахо­ди­те любой ноут­бук, захо­ди­те в бли­жай­шую кафеш­ку, ска­чи­ва­е­те WebStorm, загру­жа­е­те рабо­чий файл и за часик допи­ли­ва­е­те код. Заказ­чик счаст­лив и выпи­сы­ва­ет вам пре­мию. Все доволь­ны.

А вот если бы вме­сто WebStorm вы ска­ча­ли любой бес­плат­ный редак­тор, то полу­чи­ли бы сре­ду раз­ра­бот­ки без пла­ги­нов и нуж­ных инстру­мен­тов — это тер­пи­мо для одно­го неболь­шо­го про­ек­та, но не для серьёз­ных задач. Поэто­му если под рукой не будет ваше­го основ­но­го ПК, то это гро­зит пре­рван­ным отпус­ком ради пра­вок в про­ек­те.

Вы уста­нав­ли­ва­е­те WebStorm, выби­ра­е­те или созда­ё­те новый файл и сра­зу може­те рабо­тать

Настраиваемый интерфейс

Если стан­дарт­ные настрой­ки вас не устра­и­ва­ют — сде­лай­те так, как удоб­но. В WebStorm мож­но пере­на­стро­ить интер­фейс рабо­че­го про­стран­ства, доба­вить или отклю­чить пла­ги­ны и рас­по­ло­жить любые инстру­мен­ты в про­из­воль­ном поряд­ке. При этом настрой­ки мож­но задать под один про­ект или сра­зу под все новые фай­лы.

Для тех, кто не любит гра­фи­че­ские интер­фей­сы, в WebStorm есть zen-режим — это когда вы пол­но­стью уби­ра­е­те все эле­мен­ты меню, погру­жа­е­тесь в раз­ра­бот­ку и вызы­ва­е­те нуж­ные функ­ции через горя­чие кла­ви­ши. Есть толь­ко вы и код.

Или дру­гая ситу­а­ция: у вас мно­го парал­лель­ных задач, кото­рые жела­тель­но дер­жать перед гла­за­ми. В этом слу­чае вы може­те раз­ме­тить рабо­чее про­стран­ство на боль­шое коли­че­ство отдель­ных зон и в каж­дой делать отдель­ные запи­си. Не хва­тит одно­го экра­на — под­клю­чи­те вто­рой мони­тор и ни в чём себе не отка­зы­вай­те.

WebStorm в стан­дарт­ном режи­ме

Акти­ви­ру­ем zen-режим: вклад­ка View → Appearance → Enter Zen Mode. Ниче­го лиш­не­го в интер­фей­се, посколь­ку нет само­го интер­фей­са

Сообщество

Реше­ния боль­шин­ства про­блем мож­но под­смот­реть на фору­ме про­ек­та.

Если под­хо­дя­ще­го отве­та нет, то вы може­те его доба­вить в баг-трекер — чек-лист, в кото­рый коман­да WebStorm зано­сит поль­зо­ва­тель­ские жало­бы. Все уни­каль­ные про­бле­мы попа­да­ют в общий спи­сок и выстав­ля­ют­ся на голо­со­ва­ние раз­ра­бот­чи­ков — когда какой-то баг наби­ра­ет мно­го голо­сов, коман­да WebStorm ста­ра­ет­ся его устра­нить. Если же про­бле­ма не уни­каль­на, то вам под­ска­жут тему на вет­ке фору­ма или дадут ссыл­ку на ста­тью в бло­ге. В любом слу­чае без помо­щи вы не оста­не­тесь.

Вот вам при­мер силы актив­но­го сооб­ще­ства. В баг-трекере несколь­ко лет висел запрос на функ­цию сов­мест­но­го редак­ти­ро­ва­ния кода — коман­да WebStorm его игно­ри­ро­ва­ла, посколь­ку боль­шая часть сооб­ще­ства голо­со­ва­ла за дру­гие фичи. В 2020 году мир столк­нул­ся с пан­де­ми­ей, и мно­гие раз­ра­бот­чи­ки пере­клю­чи­лись на уда­лён­ную рабо­ту — в таких усло­ви­ях воз­мож­ность сов­мест­но­го редак­ти­ро­ва­ния кода быст­ро набра­ла попу­ляр­ность и сра­зу же попа­ла в раз­ра­бот­ку. В сере­дине года дол­жен вый­ти спе­ци­аль­ный пла­гин, кото­рый пол­но­стью закро­ет про­бле­му. С вялым сооб­ще­ством добить­ся тако­го мощ­но­го откли­ка не полу­чит­ся.

Здоровый перфекционизм

Уста­но­ви­те в любой тек­сто­вый редак­тор бес­плат­ный шрифт JetBrains Mono, кото­рый созда­вал­ся для раз­ра­бот­чи­ков. Он помо­га­ет гла­зам не уста­вать, когда вы целый день пише­те код. Этот шрифт раз­ра­ба­ты­вал­ся на про­тя­же­нии года, вышел в пер­вой вер­сии обнов­ле­ний 2020 года и выпу­щен толь­ко пото­му, что во всех ранее суще­ство­вав­ших подоб­ных шриф­тах не учи­ты­ва­лась раз­ни­ца меж­ду бук­ва­ми тек­ста и сим­во­ла­ми кода. У ново­го шриф­та оваль­ные бук­вы пере­де­ла­ны под фор­му пря­мо­уголь­ни­ка, и это помо­га­ет взгля­ду луч­ше сколь­зить по вер­ти­ка­ли и счи­ты­вать код. Вот в таких мело­чах про­яв­ля­ет­ся забо­та.

Шрифт JetBrains Mono: за счёт про­стых обте­ка­е­мых форм не напря­га­ет зре­ние, помо­га­ет подол­гу кодить и исполь­зу­ет­ся в WebStorm по умол­ча­нию

Для срав­не­ния посмот­ри­те на шрифт Inconsolata — авто­ры доба­ви­ли мико­за­сеч­ки, и гла­зам тяже­ло сколь­зить по длин­но­му коду

Или оце­ни­те шрифт Fira Code, в кото­ром неко­то­рые бук­вы деко­ра­тив­но заветв­ле­ны. При дли­тель­ном чте­нии это застав­ля­ет всмат­ри­вать­ся в строч­ки кода и созда­ёт допол­ни­тель­ную зри­тель­ную нагруз­ку.

Подключать или нет

WebStorm — это плат­ный инстру­мент для про­фес­си­о­наль­ной фронтенд-разработки, кото­рый удоб­но исполь­зо­вать в объ­ём­ных ком­мер­че­ских про­ек­тах. Для нович­ков и мел­ких задач он не нужен, посколь­ку вы запла­ти­те за функ­ци­о­наль­ность, кото­рой не буде­те поль­зо­вать­ся.

Если хоти­те попро­бо­вать, у систе­мы 30-дневный проб­ный пери­од. Инте­рес­но ваше мне­ние: сто­ит ли WebStorm сво­их денег? Ведь все­гда есть Sublime Text…

Установка и настройка PHPStorm

Всем привет. В этом уроке мы рассмотрим крутейшую IDE для PHP-разработчика под названием PHPStorm. Эта IDE имеет отличную подсветку кода, кучу встроенных инструментов для рефакторинга, полезные подсказки, темы оформления на любой вкус и ещё гору всего. Стоит это добро для личного использования $89 в год. Однако, есть вариант использовать её совершенно бесплатно. Нет, речь не идёт о кряке/кейгене, сами авторы предлагают эту возможность. И именно с этого момента мы и начнём знакомство с этим ПО.

Варианты использования

Триал-версия

Всем желающим софт доступен в виде триал-версии на 30 дней — тыц. За это время Вы успеете определиться, нужно ли Вам приобретать данный софт или нет.

Покупка

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

Early Access Programm (EAP)

Именно этот вариант я и выбрал. Если кратко – это бета-версия программы, в которой возможны баги, о которых будут извещаться разработчики ПО. Но в то же время, пользоваться ей можно абсолютно бесплатно. Скачать можно тут — тыц

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

Речь идёт о студентах, преподавателях и разработчиках свободного ПО. Подробности в статье «Бесплатная лицензия на PhpStorm».

Установка

Итак, скачиваем программу по ссылке и запускаем установщик. Установка проходит стандартно и как правило не требует никаких дополнительных телодвижений.
После установки запускаем программу и открываем созданный нами в прошлом уроке проект. Жмём File->Open и выбираем папку с проектом (C:\OpenServer\domains\myproject.loc). Первым делом нужно задать правильную кодировку для всех файлов в проекте. Для этого идём в File->Settings.
Слева в меню разворачиваем пункт Editor, и выбираем вложенный пункт File Encodings. Задаём следующие настройки:

 Global Encoding: UTF-8
 Project Encoding: UTF-8
 Default encoding for properties files: UTF-8

И сохраняем изменения.

Теперь давайте удалим ранее созданные нами файлы, которые сейчас находятся в кодировке Windows-1251. Да, кодировку всегда можно сменить в правом нижнем углу программы, смена производится для текущего открытого файла.

Теперь давайте создадим новый файл в нашем проекте с названием index.php. Для этого слева в структуре проекта щёлкаем правой кнопкой мыши по папке www, выбираем New->PHP File
Вводим имя и нажимаем Create.

Некоторые фишки PHPStorm`а, такие как автоматическое написание кода и быстрое форматирование с помощью сочетания CTRL+ALT+L я спалил в видео к этому уроку. Текстом это уж больно утомительно описывать =)

По ходу курса мы с Вами произведём ещё несколько настроек этой программы.
А на сегодня пока всё. Спасибо за прочтение. И не забудь подписаться на канал на YouTube.

Полная настройка PHPStorm для работы с Laravel

Laravel — это замечательный фреймворк, который имеет широкий функционал, и много реализаций, облегчающих жизнь программисту. Однако, обратной стороной этого удобства является сложность в чтении кода для IDE. В результате чего, IDE не может проанализировать код должным образом, и построить полное автодополнение кода. Потому, для того, чтобы было удобно работать с Laravel в PHPStorm-е, его необходимо дополнительно настроить.

В этой статье будет рассмотрено:

1. Указание пути к интерпретатору PHP, и выбор текущей версии PHP.
2. Указание путь к composer-а
3. Указание пути к NodeJS
4. Предварительная настройка JavaScript на новый синтаксис
5. Установка IDE-плагина плагина
6. Настройка VueJs
7. Установка IDE-helper. Автокомплит методов
8. Автодополнение команд artisan
9. Резюме

Предварительная настройка IDE

В каждом новом проекте, который я начинаю в PHPStorm-е, начальные шаги одинаковые: выбор интерпретатора PHP, указание пути к composer-у, NodeJs и JavaScript

Выбор версии PHP и настройка пути к интерпретатору

Настройка версии PHP и интерпретатора находится на вкладке File | Settings | Languages & Frameworks | PHP

В открывшемся окне, будет доступно 2 изменяемые графы:
PHP Language Level — это версия PHP, по которой IDE будет проверять синтаксис вами написанного кода. И в случае несоответствия синтаксису выбранной версии, прямо в IDE вам будет подсвечена ошибка.
CLI interpriter — это путь к интерпретатору PHP.
Если вы ранее не добавляли интерпретаторы, то вам ничего не будет доступно, потому, сейчас его нужно добавить, нажав, справа от выбора интерпретатора, кнопку поиска (2)

После нажатия по (2) кнопке, то появится меню:

Нажав на (1) кнопку, будет предложено на выбор 2 варианта:
From Docker, Vagrant, VM, Remote — в случае, если вы хотите указать удалённый интерпретатор (Docker, Vagrant)
Local Path to Interpreter — чтобы указать локальную версию (как в моём случае)

А в PHP executable нужно прописать путь к php.
Я пользуюсь Laragon, потому мой путь выглядит PATH_TO_LARAGON\bin\php...\php.exe,

В случае OpenServer, путь будет выглядеть примерно: PATH_TO_OS\modules\php\...\php.exe

В случае Unix-систем, так: /usr/bin/php

Указание путь к composer

Путь к composer-у указывается на вкладке File | Settings | Languages & Frameworks | PHP | Composer

В этом меню нужно переключить опцию в composer.phar, и в этой графе (1) указать путь к исполняемому файлу composer.

И выберите итерпретатор, созданный шагом ранее

У меня, путь к composer-у выглядит так: E:\laragon\bin\composer\composer.phar

NodeJs

NodeJs, его пакетный менеджер, NPM, будет хорошим помощником в подключении всех фронтенд-библиотек. Потому, во-первых, нужно указать путь к самому NodeJs, а во вторых, нужно настроить всё так, чтобы синтаксис Vue-шаблонов был понятен для самой IDE.

В меню File | Settings | Languages & Frameworks | Node.js and NPM, аналогично предыдущим пунктам, нужно указать путь к nodeJs (после его указания, автоматически должен подключиться NPM)

JavaScript

Ввиду того, что Vue использует новые ES6 синтаксис для написания шаблонов, то необходимо в самой IDE переключить на поддержку этого синтаксиса на вкладке File | Settings | Languages & Frameworks | JavaScript, выбрав ECMSScript 6

Настройка Laravel

Теперь, осталось провести некоторые настройки, относящиеся к Laravel.

Установка Laravel плагина

Теперь нужно установить Laravel-плагин в PHPStorm. Плагины устанавливаются на вкладке File | Settings | Plugins.
Для поиска плагина, в строку поиска нужно вписать laravel

И выбрать интересующий нас Laravel Plugin, который добавляет автодополнение в маршрутах, видах, конфигах.

Когда он будет установлен, появится новая вкладка File | Settings | Languages & Frameworks | PHP | Laravel

На которой, нужно поставить галочку на Enable plugin for this project

Настройка VueJs

Для VueJs, аналогично Laravel, так же существует свой отдельный плагин. Чтобы его установить, нужной на вкладке File | Settings | Plugins найти Vue и установить

Подключение нужных библиотек, последние шаги настройки

Сейчас мы уже имеем проект, с которым можно работать. Однако, по-прежнему, нету автокомплита методов в маршрутах, миграциях, Eloquent, ввиду особенной структуры фреймворка. Для решения этой проблемы, нужно скачать библиотеку laravel ide-helper, которая сгенерирует дополнительные мета-файлы для IDE.

Установка IDE-helper

Для установки IDE-helper-а, воспользуемся composer-ом (Tools > Composer > Manage Dependencies)
И в строку поиска, введём: barryvdh/laravel-ide-helper

Установив эту библиотеку, нужно добавить в файл config/app.php, в массив providers: Barryvdh\LaravelIdeHelper\IdeHelperServiceProvider::class

'providers' => [
    ...,
    Barryvdh\LaravelIdeHelper\IdeHelperServiceProvider::class,
],

На этом этапе, уже можно запустить ide-helper, и получить желаемый эффект автокомплита. Но, сделав так в данный момент, эта библиотека возьмёт дефолтные настройки, в которых отключена генерация Fluent-методов. Потому, прежде, скопируем конфиг ide-helper.php с папки vendor/barryvdh/laravel-ide-helper/config, в локальную папку config.
И уже в локальном файле, нужно изменить значение include_fluent на true.

'include_fluent' => true

Теперь достаточно выполнить команду artisan ide-helper:generate
После чего, появится новый файл _ide_helper.php, который PHPStorm успешно проанализирует, и мы получим желаемое автодополнение:

Автодополнение команд artisan

Сложно заполнить все команды artisan, а постоянно отвлекаться на поиск команд не продуктивно. Благо, в PHPStorm предусмотрена возможность созданий автодополнения команд (File | Settings | Tools | Command Line Tool Support).
Artisan — это команда, основана на консоле symfony, зная это, добавим команду:

Откроется меню, в котором нужно указать:
alias — с какого имени начинаются команды (можно указать a, и вызывать a make:controller ...
Path to PHP executable — наш ранее добавленный интерпретатору
Path To Script — путь к artisan-файлу проекта

В результате, должны получить информацию о том, что команды добавлены:

И сейчас, если открыть консоль: Tools > Run Commands

И все команды, которые начинаем с artisan будут подсвечены возможным дополнением

Резюме

Итого, в этой статье была рассмотрена настройка laravel в phpstorm, установка плагинов, так же было показано, как работать с Laravel IDE-helper, настраивать composer и включать автодополнение phpstorm artisan команд

А ещё, рекомендую просмотреть статью, в которой я показываю процесс установки и настройки крутой темы оформления Monokai для PHPStorm, которая тебе точно придётся по вкусе, дорогой разработчик.

Осваиваем инструмент для курса — WebStorm

WebStorm – среда для разработки на JavaScript, которая подходит для client-side-разработки, создания приложений на Node.js и мобильных приложений на React Native.

Главное достоинство WebStorm – это удобный и умный редактор для JavaSсript, HTML и CSS, который также поддерживает TypeScript, CoffeeScript, Dart, Less, Sass и Stylus и фреймворки, например, Angular, React и Vue.js.

WebStorm, как и другие IDE на платформе IntelliJ IDEA, делает разработку проще и удобней. WebStorm обеспечивая подсветку и автодополнение кода, проверяет его на ошибки, помогает быстро навигироваться по проекту и безопасно вносить изменения с помощью рефакторингов. В WebStorm есть инструменты для отладки кода и интеграция с системами управления версиями.

WebStorm по-настоящему понимает структуру вашего проекта и код, обнаруживает возможные проблемы еще до того, как вы открыли проект в браузере, и предлагает их решение.

Встроенные в IDE инструменты для тестирования помогут в разработке и сделают ее удобней и продуктивней.

WebStorm — 001 — Введение

WebStorm — 002 — PhpStorm vs WebStorm

WebStorm — 003 — Загрузка и выбор лицензии

WebStorm — 004 — Установка JDK 64

WebStorm — 005 — Установка WebStorm и настройка 64 битной версии

WebStorm — 006 — Первый запуск WebStorm

WebStorm — 007 — Первоначальная настройка IDE WebStorm

WebStorm — 008 — Настройка интерфейса

WebStorm — 009 — Настройка редактора

WebStorm — 010 — Настройка редактора и сочетаний клавиш

WebStorm — 011 — Быстрый вызов

WebStorm — 012 — Шаблоны файлов

WebStorm — 013 — Live templates (сниппеты)

WebStorm — 014 — Настройка панели инструментов

WebStorm — 015 — Live Edit

Live Edit для PhpStorm — полезный инструмент верстальщика

04.05.201812:0904.05.2018 12:09:30

В этой статье мы рассмотрим подключение плагина Live Edit — автоматическое обновление страницы при ее изменении в PhpStorm.
Нам понадобятся плагины JetBrains IDE Support для Google Chrome и Live Edit для PhpStorm

Начнем с установки плагина для Google Chrome — JetBrains IDE Support, переходим по ссылке, нажимаем + установить

После установки плагина открываем PhpStorm, переходим в настройки (File -> Settings), выбираем раздел Plugins и нажимаем кнопку Install JetBrains plugin…

В следующем окне в поиске набираем LiveEdit и нажимаем на зеленную кнопку Install

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

Чтобы LiveEdit начал работать нам необходимо включить отладчик, нажимаем правой кнопкой мыши по файлу с которым хотим работать и выбираем в меню Debug

Также у меня не работал LiveEdit пока я не нажал Enale live Edit в Event Log

Вот и все.

Небольшое дополнение:

Если вас раздражает надпись «JetBrains IDE Support отлаживает этот браузер» то ее можно отключить.
1. Открыть вкладку chrome://flags (в строке поиска).
2. Найти пункт Silent Debugging.
3. Нажать кнопку Enable.
4. Перезагрузить Chrome.

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

Быстрый старт с Docker в PhpStorm

Последнее обновление: 09.02.2019 г.

Публикация: 09.02.2019 г.

Информация

Это руководство является вольным переводом поста
из блога PhpStorm со значительными дополнениями и описывает детали начала использования
ПО Docker в связке с PhpStorm.

Итак, сегодня ты решил попробовать что-то новое и начать проект с нуля.
Твоим первым шагом будет настройка среды разработки: как минимум,
ты захочешь запустить веб-сервер и интерпретатор PHP (желательно — с установленным движком отладки).

С помощью Docker ты можешь начать разработку, запуск и отладку кода за считанные минуты!

Вероятно, самый простой способ интеграции Docker с PhpStorm — это использование
данной страницы публичного реестра Docker Hub. Она представляет собой набор предварительно настроенных образов Docker,
курируемых командой PhpStorm, которые охватывают наиболее распространённые потребности разработки на PHP.

Прежде чем продолжить, убедись, что у тебя на компьютере установлен Docker.
Если у тебя его нет, то прочитай, как его установить на
Windows или macOS.

Далее руководство описывает работу с Docker с помощью приложения
Docker Desktop под Windows c использованием Linux контейнеров. Чтобы двигаться дальше, тебе следует использовать такое же окружение.

Заметка

Docker Desktop — это новое приложение,
которое пришло на смену устаревшему приложению Docker Toolbox. Docker Desktop для работы использует систему виртуализации Hyper-V от Windows, а Docker Toolbox использует VirtualBox от Oracle.
Нативная виртуализация Hyper-V для Windows работает быстрее и надежнее, чем VirtualBox.

Стоит отметить, что после включения службы Hyper-V пропадёт возможность запускать
и создавать x64 виртуальные машины на VirtualBox.
Другими словами, ты можешь использовать либо Docker Desktop, либо Docker Toolbox.
В последнем используется виртуальная машина на VirtualBox с минималистичным Linux окружением.
Хотя Docker Toolbox и признан устаревшим, работа с ним слабо отличается от Docker Desktop.

1. Необходимые условия

Во-первых, тебе следует добавить нового локального пользователя в систему,
эта новая учётная запись в будущем будет использоваться ПО Docker.
Для этого нажми горячие клавиши Win + R и введи следующую команду в открывшемся окне:

lusrmgr.msc

Нажми Enter. Затем в левой части открывшегося окна выбери группу
Пользователи. Теперь в списке пользователей (средняя часть окна),
используя контекстное меню, выбери Новый пользователь…, как на скриншоте ниже.

Задай для нового пользователя, например, следующие параметры:

Чтобы назначить группу для нового пользователя,
кликни правой кнопкой мыши на его имени и выбери пункт Свойства.
Затем, на вкладке Членство в группах нажми кнопку Добавить,
набери docker-users и нажми Ок.
Готово, теперь этот пользователь будет иметь только те права, которые необходимы для работы ПО Docker.

Если с созданием нового пользователя возникли трудности, то тебе также может помочь следующая справка Windows:
Создание учётной записи локального пользователя или администратора в Windows 10.

Во-вторых, убедись, что Docker доступен для связи через порт 2375.
Для этого в разделе General настроек приложения Docker Desktop включи опцию
Expose daemon on tcp://localhost:2375 without TLS option, как на скриншоте ниже.

В-третьих, с помощью пункта главного меню PhpStorm
[File → Settings → Build, Execution, Deployment → Docker] установи параметры доступа к
Docker API.
Главное здесь это указать способ подключения к демону Docker.
Выбери переключатель TCP socket,
а в поле Engine API URL укажи следующее значение (если его ещё там нет):

tcp://localhost:2375

Заметка

Параметры подключения зависят от используемой версии Docker и операционной системы.
Дополнительные сведения по этому вопросу ты можешь узнать из следующей справки PhpStorm: Настройки соединения с Docker.

IDE автоматически проверит твои настройки и покажет сообщение
Connection successful в случае успешного подключения к Docker API.
Оно должно появиться в нижней части диалогового окна, под окном сопоставления путей, как на скриншоте ниже.

Также в подразделе [Build, Execution, Deployment → Docker → Tools] настроек PhpStorm обязательно укажи или проверь актуальность указанных путей исполняемых файлов:

• docker-machine.exe (поле Docker Machine executable)
• docker-compose.exe (поле Docker Compose executable)

Если возникли сложности в этом вопросе, то изучи справку PhpStorm:
Инструменты Docker.

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

2. Определение окружения

Для начала создай новый проект в PhpStorm.
Затем добавь в его корень новый файл с именем docker-compose.yml.
Он позволяет описать конфигурацию сервисов твоего приложения для утилиты
Docker Compose с помощью
YAML формата.

Заметка

Docker Compose — это CLI инструмент
для автоматизации процесса создания и выполнения приложений, скомпонованных из нескольких Docker-контейнеров.

В данном случае будет задействован один сервис — веб-сервер:

version: '2'
services:
  webserver:
    image: phpstorm/php-71-apache-xdebug-26
    ports:
      - "80:80"
    volumes:
      - ./:/var/www/html
    environment:
      XDEBUG_CONFIG: remote_host=host.docker.internal

Как ты мог заметить, в этом конфиге используется предварительно настроенный образ Docker, содержащий веб-сервер
Apache и
PHP 7.1 с расширением
Xdebug.

Обрати внимание, что для настройки Xdebug в директиве remote_host
используется значение host.docker.internal для ссылки на удалённый адрес хоста.
В Docker для Windows и
macOS он автоматически преобразуется во внутренний адрес хоста, позволяя легко подключиться к нему из контейнера.

Внимание

Значение host.docker.internal на Linux
в настоящее время не поддерживается. Вместо этого ты можешь использовать имя хоста своей локальной машины
(чтобы его узнать, введи в терминале команду hostname).

Соответствующий раздел конфигурации окружения для Linux будет выглядеть следующим образом:

    environment:
      XDEBUG_CONFIG: remote_host=<hostname>

Для получения более подробной информации по этому вопросу, смотри
сюда.

Конфигурация окружения полностью готова.

Теперь ты можешь использовать её с помощью Docker Compose,
создав специальную конфигурацию запуска или отладки в PhpStorm.

3. Создание конфигурации запуска или отладки

Сделай клик правой кнопкой мыши на файле docker-compose.yml
и выбери пункт Create… из контекстного меню:

В открывшемся диалоговом окне задай имя конфигурации, например, Start application.
Затем сделай необходимые правки и сохрани конфигурацию запуска с параметрами, как на скриншоте ниже:

Теперь у тебя появилась возможность запускать данную конфигурацию с помощью панели инструментов,
расположенной в верхней части IDE:

Первый запуск данной конфигурации, скорее всего, будет довольно длительным, тебе придётся немного подождать.
Дело в том, что образ, указанный в docker-compose.yml наверняка отсутствует в твоей системе,
следовательно, он будет скачен из Docker Hub, на это и требуется дополнительное время. Позже он всегда будет использоваться для того, чтобы развернуть необходимый контейнер.

Если ранее, в разделе Shared Drives настроек приложения Docker Desktop,
ты не настроил диски, которые должны быть доступны для контейнеров, то получишь следующее уведомление:

Нажми в нём кнопку Share it.
Затем должно появиться окно File Sharing.
В нём тебе следует ввести имя и пароль ранее созданного пользователя,
затем нажми OK.

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

В итоге PhpStorm должен автоматически загрузить нужный образ,
развернуть на его основе необходимый контейнер и запустить веб-сервер:

Заметка

На самом деле, в итоге будут загружены 2 образа:
docker4w/nsenter-dockerd
и phpstorm/php-71-apache-xdebug-26, смотри скриншот выше.
Первый не указан в конфигурации окружения для Docker Compose, cчитай его служебным,
он используется для настройки монтирования файловой системы в Docker Desktop.

Теперь всё готово для запуска и отладки кода.

4. Запуск или отладка кода

Убедись, что всё работает как надо. Для этого создай самый простой PHP файл и попробуй отладить его, следуя подходу
PhpStorm Zero-Configuration Debugging.

<?php
/**
 * Created by PhpStorm.
 * User: pupkin
 */
echo 'Hello World!';

Поскольку Xdebug уже установлен и настроен, тебе нужно лишь сделать следующее:

• Установить и включить
  расширение отладки для браузера:
• Установить точку останова в коде:
• Включить прослушивание входящих отладочных соединений в PhpStorm:

Теперь, просто открой страницу в браузере, и сеанс отладки будет запущен автоматически:

В данном руководстве был рассмотрен очень простой случай, но ты можешь использовать описанный метод,
чтобы предоставить своей среде, например, базу данных или сервер SFTP.
Далее, дополнительно, попробуй изучить
страницу PhpStorm реестра Docker Hub.
Использование образов Docker от команды PhpStorm сэкономит тебе много усилий
и позволит начать кодирование в считанные минуты.

Заметка

Чтобы узнать больше о Docker и о том, как его использовать в PhpStorm, обязательно ознакомься с отличной обучающей серией уроков от Pascal Landau и документацией PhpStorm.

Контрольные вопросы

Источники и дополнительные материалы

Купить PhpStorm: цены и лицензирование, скидки

PhpStorm

Ранний доступ

Что нового

особенности

Учиться

Блог и социальные сети

купить

Скачать

.

Установить WebStorm — Справка | WebStorm

WebStorm — это кроссплатформенная среда IDE, которая обеспечивает единообразную работу в операционных системах Windows, macOS и Linux.

Системные требования

Вам не нужно устанавливать Java для запуска WebStorm, поскольку среда выполнения JetBrains входит в состав IDE (на основе JRE 11).

Приложение JetBrains Toolbox — это рекомендуемый инструмент для установки продуктов JetBrains.Используйте его для установки и обслуживания различных продуктов или нескольких версий одного и того же продукта, включая выпуски программы раннего доступа (EAP), обновления и отката при необходимости, а также простого удаления любого инструмента. Приложение Toolbox поддерживает список всех ваших проектов, чтобы быстро открыть любой проект в нужной среде IDE и версии.

Установите приложение Toolbox

1. Загрузите установочный файл .exe с веб-страницы приложения Toolbox.

2. Запустите программу установки и следуйте инструкциям мастера.

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

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

Установите приложение Toolbox

1. Загрузите образ диска .dmg с веб-страницы приложения Toolbox.

2. Подключите образ и перетащите приложение JetBrains Toolbox в папку Applications.

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

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

Установите приложение Toolbox

1. Загрузите архив .tar.gz с веб-страницы приложения Toolbox.

2. Распакуйте архив в каталог, который поддерживает выполнение файла.

   Например, если загруженная версия — 1.17.7391, вы можете извлечь ее в рекомендуемый каталог / opt, используя следующую команду:

   sudo tar -xzf jetbrains-toolbox-1.17.7391.tar.gz -C / opt

Запустите двоичный файл jetbrains-toolbox из извлеченного каталога, чтобы запустить приложение Toolbox и выбрать продукт и версию, которые вы хотите установить.После того, как вы запустите приложение Toolbox в первый раз, оно автоматически добавит значок приложения Toolbox в главное меню.

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

Вы можете использовать этот сценарий оболочки, который автоматически загружает архив с последней версией приложения Toolbox, извлекает его в рекомендуемый каталог / opt и создает символическую ссылку в каталоге / usr / local / bin.

Автономная установка

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

1. Загрузите файл installer.exe.

2. Запустите программу установки и следуйте инструкциям мастера.

1. Загрузите образ диска.dmg.

2. Подключите образ и перетащите приложение WebStorm в папку «Приложения».

1. Загрузите tarball.tar.gz.

2. Распакуйте архив в каталог, который поддерживает выполнение файла.

   Например, чтобы распаковать его в рекомендованный каталог / opt, выполните следующую команду:

   sudo tar xzf WebStorm- *.tar.gz -C / opt /

Не распаковывайте tarball поверх существующей установки, чтобы избежать конфликтов. Всегда извлекайте его в чистый каталог.

Выполните сценарий WebStorm.sh из извлеченного каталога, чтобы запустить WebStorm.

Чтобы создать запись на рабочем столе, выполните одно из следующих действий:

• На экране приветствия щелкните Настроить | Создать запись на рабочем столе

• В главном меню выберите Инструменты | Create Desktop Entry

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

Для получения дополнительной информации см. Запуск WebStorm в первый раз.

Тихая установка в Windows

Тихая установка выполняется без какого-либо пользовательского интерфейса. Сетевые администраторы могут использовать его для установки WebStorm на нескольких машинах, чтобы не отвлекать других пользователей.

Чтобы выполнить установку без вывода сообщений, запустите программу установки со следующими параметрами:

• / S : включить установку без вывода сообщений

• / CONFIG : укажите путь к файлу конфигурации без вывода сообщений

• / D : укажите путь к каталогу установки

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

Например:

WebStorm.exe / S /CONFIG=d:\temp\silent.config / D = d: \ IDE \ WebStorm

Чтобы проверить наличие проблем в процессе установки, добавьте переключатель / LOG , указав путь и имя файла журнала между параметрами / S и / D . Программа установки сгенерирует указанный файл журнала. Например:

WebStorm — *. Exe / S / CONFIG = d: \ temp \ silent.config /LOG=d:\JetBrains\WebStorm\install.log / D = d: \ IDE \ WebStorm

Тихий файл конфигурации

Вы можете загрузить файл тихой конфигурации по умолчанию для WebStorm по адресу https://download.jetbrains.com /webstorm/silent.config

Файл конфигурации без вывода сообщений определяет параметры для установки WebStorm. При использовании параметров по умолчанию тихая установка выполняется только для текущего пользователя: mode = user .Если вы хотите установить WebStorm для всех пользователей, измените значение параметра режима установки на mode = admin и запустите установщик от имени администратора.

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

Установить как пакет snap в Linux

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

Чтобы использовать снимки, установите и запустите службу snapd, как описано в руководстве по установке.

В Ubuntu 16.04 LTS и новее эта служба предустановлена.

WebStorm распространяется по двум каналам:

• Стабильный канал включает только стабильные версии.Чтобы установить последний стабильный выпуск WebStorm, выполните следующую команду:

  sudo snap install webstorm —classic

  Параметр --classic требуется, поскольку для оснастки WebStorm требуется полный доступ к системе, как для традиционно упакованного приложения.

• Граничный канал включает сборки EAP.Чтобы установить последнюю сборку EAP WebStorm, выполните следующую команду:

  sudo snap install webstorm —classic —edge

После установки оснастки вы можете запустить ее, выполнив команду webstorm .

Чтобы вывести список всех установленных снимков, вы можете запустить sudo snap list . Для получения информации о других командах привязки см. Документацию Snapcraft.

Последнее изменение: 18 сентября 2020 г.

.