Webstorm файл горит красным

Обновлено: 03.07.2024

Если вы еще не работаете с Git в PhpStorm, но хотите начать, то вот статья, которая может быть полезной: Работа с Git в PhpStorm (JetBrains). Если уже начали, то вы знаете, что по умолчанию PhpStorm показывает только изменённые или добавленные файлы, не подсвечивая при этом, родительскую папку. Вот несколько способов улучшить процесс.

Просмотр измененных файлов в зоне Version Control

PhpStorm показывает дерево измененных/добавленных файлов в окне Version Control. Там же можно увидеть изменения внутри конкретного файла. Окно можно найти на нижней панели, предварительно включив: View->Tool buttons. Кнопка будет отображаться при условии, что вы используете какую-либо систему контроля версий.

В этом окне можно выполнять другие действия, относящиеся к Git:

создавать change-листы (Что такое changelist? англ. );
разносить файлы по change-листам drag&drop'ом;
видеть файлы, которые не были добавлены в гит или удалены;
делать commit; изменений;
создавать патчи из измененных файлов;
и другое.

Подсветка дерева

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

Следующий способ - подсветка в дереве: ползём в Setting->Version control. Находим параметр "Show directories with changed descendants" и активируем его.

Иногда после активации этого параметра и сохранения настроек ничего не происходит. По ощущениям это выглядит как будто не сработал триггер "Эй, а ну-ка перезагрузи дерево". Для исправления нужно перезагрузить программу.

Разделение по скопам

Третий способ чуть хитрее. Он заключается в использовании, так называемых, скопов (Scopes) или областей. При использовании системы контроля версий, PhpStorm любезно создает для нас скоп "Changed files". Его можно найти в селекте над деревом файлов.

Также вы можете создавать свои скопы.

Постскриптум

Для повышения навыка работы с PhpStorm посмотрите как делать Rebase в PhpStorm.

Ранее на мы уже рассматривали как в PhpStorm включить отображение скрытых файлов, сегодня мы настроем в PhpStorm Watchers вочеры для pug и less.

Настройка pug / Jade Watchers.

Для начала нам нужно установить поддержку pug.

PhpStorm -> Preference -> Plugins

Дальше ищем плагин Pug (ex- Jade) и устанавливаем его.

Чтобы правильно настроить в PhpStorm вочер pug делаем простые манипуляции в настройках:

PhpStorm -> Preference -> Tools -> File Watchers

Добавляем вочер Pug и заполняем настройками как на скриншоте:

Важно в аргументах поставить галочку на против Track only root files

Также нужно заполнить аргументы (Arguments):

Настройка less Watchers.

Чтобы правильно настроить less вочер идем по тому же пути что и pug.

PhpStorm -> Preference -> Tools -> File Watchers

Вводим настройки что на скриншоте:

Опять же важно поставить галочку на против Track only root files чтобы не создавать мусора, и следить только за основным файлом, и не учитывать подключенные файлы.

Чтобы выбрать папку где будет копмилироваться css файл, настраиваем параметр Output path to refresh:

Эта настройка скажет что нужно выйти на папку выше создать там папку css и сохранить там сгенерированный файл.

Также есть версия этого вочера где генерируется map. В таком случае оставляем все как есть кроме поля Arguments:

Если нам надо сжать css файл в одну строчку нам необходимо дополнение к less. Его можно установить этой командой в командной строке:

Многие приходят ко мне на сайт в поисках информации о phpstorm. И этим постом я хочу начать новый цикл статей о phpstorm, который будет раскрывать наиболее полезные фичи этого наикрутейшего инструмента. В этой статье поговорим об интеграции с git.

Дисклеймер

Еще я пишу все это на Maс, поэтому может возникнуть путаница с расположением пунктов меню и хоткеями. Но я постараюсь отдельно прописать это и для Windows, главное не забыть.

Для кого эта статья.

для начинающих разработчиков, которые сели за phpstorm и не знают с какой стороны к нему подступиться
для прожжёных старпёров, которые пользуются Notepad++/Sublime Text/Atom/Coda и иже с ними, а также используют git через cli на постоянной основе
для любителей Tortoise Git или SourceTree, или каких-то иных GUI; материал позволит вам сравнить ваш инструментарий с возможностями, предлагаемыми PhpStorm
для всех тех, кто хочет перейти на PhpStorm и кому еще недостаточно поводов это сделать
для меня, чтобы систематизировать и упорядочить, а также приумножить знания об этой замечательной IDE

Начало

Подключение репозитория к проекту

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

По-дефолту, PhpStorm ассоциирует корень репозитория с корнем проекта. Если ваш проект еще не содержит репозитория, то нужно зайти в меню VCS | Enable Version Control Integration, из него вывалится всплывашка, предлагающая выбрать систему контроля версий. Выбираем git и жмем Ok.

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

Если у вас уже есть репозиторий, то нужно его подключить к проекту. Для этого нужно проследовать в настройки проекта PhpStorm | Preferences | Version Control. При входе в это меню можно будет увидеть окно, которое показывает список соответствий между директориями проекта и репозиториями. PhpStorm использует модель версионирования на основе директорий, поэтому каждый репозиторий должен быть связан с какой-то директорией.

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

Тут есть киллер фича, можно привязать несколько репозиториев к одному проекту, в том числе и с разными системами контроля версий. О нескольких репозиториях я расскажу позже.

Есть и другие способы прилепить репозиторий к проекту. Например, вы можете создать новый проект сразу же из репозитория, который у вас уже хранится где-нибудь на гитхабе. Для этого идем в VCS | Checkout from Version Control | Git (или Github). На стартовом экране PhpStorm тоже есть кнопка, которая вызывает аналогичное диалоговое окно.

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

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

Инструменты работы с Git.

Чем чаще всего пользуются разработчики? git status/add/rm/commit/checkout/branch/merge/rebase/log/fetch/pull/push и т.д. Для всех этих консольных команд в PhpStorm есть отдельные инструменты, которые делают их работу более наглядной, а значит, и более эффективной.

Основная панель инструментов. Состояние файлов, git status

Local changes

Если вспоминать теорию по git, то каждый файл может находиться в одном из нескольких состояний: untracked, unstaged, staged или commited. Узнать о том, в каком состоянии какой файл находится в данный момент, можно с помощью команды git status. Она покажет все те файлы, которые не являются commited. Для примера я взял три файла из тестового репозитория и ввел каждый из них в разное состояние, а на скрине ниже показал разницу между выводом cli и gui интерфейсов:

Слева в cli мы видим следующую картину:

файл app/basic.html находится в состоянии staged и если выполнить git commit, то он попадет в коммит
файл app/index.html находится в состоянии unstaged, на нем нужно сделать git add, чтобы перевести в состояние staged
файл inner.html находится в состоянии untracked, и нужно использовать команду git add, чтобы перевести его в состояние staged

Так вот PhpStorm старается по-умолчанию разделять файлы на те, которые есть в репозитории и те, которых нет в репозитории. А те файлы, которые есть в репозитории он делит только на измененные и не измененные. Если вы изменили какой-то файл, находящийся под контролем версий, он просто показывается в чейнжлисте Default (или в том чейнжлисте, с которым вы этот файл ассоциировали) и он же автоматически будет готов к коммиту. На уровне git все файлы, которые вы меняете с помощью phpstorm, будут находиться в состоянии unstaged. Этого достаточно, чтобы понять, что файл изменен. А уже когда вы фиксируете правки, phpstorm сам добавляет их в индекс (git add).

Основные возможности вкладки Local Changes

Помимо просмотра статуса репозитория и работы с change-листами, панель имеет ряд дополнительных возможностей. Стоит обратить внимание на панельку инструментов с иконками слева от списка измененных файлов.

Фиксация правок, git commit

По-дефолту, в коммит попадают только те правки, которые находятся в листе Default. Когда вы запускаете операцию коммита, PhpStorm показывает вам большущее диалоговое окно, в котором можно очень много всего сделать.

Просмотр истории репозитория, git log

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

После сохранения этих настроек в логе коммитов гита (а на самом деле не только там, а много где) все подходящие под регулярку строки будут преобразованы в ссылки.

Просмотр изменений, git diff

В phpstorm ну очень много функциональности по части интеграции с гитом. Наверно самой удобной и нужной его частью является diff-viewer, который встроен в текстовый редактор phpstorm. Кстати, если у вас на примете уже есть какой-то другой diff-viewer, и вы им давно успешно пользуетесь, phpstorm дает возможность использовать его прямо в IDE (правда эта тема выходит за рамки статьи).

Сам по себе diff-viewer не является частью интеграции git в phpstorm. Это вполне обособленный инструмент, который можно использовать и в других сценариях. Например, можно сравнить содержимое двух файлов между собой (выделяем в дереве оба файла и жмем Ctrl+D или Command + D).

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

Нажав на эту кнопку вы увидите те правки, которые были сделаны в рамках этого коммита.

Ветки и состояние, git branch и снова git status

Откроется уже знакомый нам diff-viewer, который позволит просмотреть всю разницу между коммитами.

Слияние веток, git merge

Как известно, слияние может производиться с помощью разных стратегий и в разных ситуациях оно будет работать по разному. В случае слияния с fast-forward phpstorm ничего не предложит (вполне ожидаемо). А вот если назревает какой-то конфликт, то phpstorm любезно покажет вам диалоговое окно со всеми конфликтующими файлами:

С помощью стрелок между окнами можно перемещать код из разных вариантов кода в результирующий вариант.

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

Перебазирование, git rebase

Выбираем репозиторий, ветку для перебазирования, новую базу и жмем Rebase. Если был выбран интерактивный режим, то откроется окошко со списком всех перебазируемых коммитов и всеми опциями изменения истории. В общем все так же, как в cli, только в одном месте

Если же был выбран не интерактивный rebase, то он будет произведен точно так же, как и в cli.

Работа с удаленными репозиториями, git fetch, pull, push & clone

Прочее

Конечно же, это не все. Причем далеко не все. Я описал тут только те функции, которые наиболее часто востребованы, и немного коснулся менее используемых вещей. В phpstorm продуманы очень многие мелочи, которые в повседневной жизни упрощают работу с репозиторием многократно. Конечно же тут есть и cherry pick, и revert, и разные стратегии слияния веток, и много чего еще. Статья и без них уже получилась огромной, а если вы разберетесь с материалом этой статьи, то использовать все остальные фишки шторма не составит никакого труда.

Мы рады представить WebStorm 2021.2 — второе крупное обновление в этом году. В нем реализовано множество новых функций, в том числе перезагрузка страниц в браузере при сохранении изменений, автоматический импорт с оператором require() , рефакторинг Rename для React useState hooks и многое другое.

Если у вас есть всего пара минут, чтобы узнать о возможностях WebStorm 2021.2, смотрите видео, в котором наш девелопер-адвокат Пол Эверитт рассказывает о самых важных нововведениях. А если вам интересны подробности, читайте этот пост.

Вот основные улучшения в разных частях IDE:

возможность перезагружать страницы в браузере при сохранении изменений, действия при сохранении кода, улучшения скретч-файлов и синхронизация автодополнения кода в Code With Me. автоматический импорт с оператором require() , поддержка типов TypeScript в JSDoc, новая стрелочная функция в Live Template и возможность использовать вкладку предпросмотра при отладке. улучшения для React, автодополнение кода для частных npm-пакетов в package.json, улучшенное автодополнение для URL-адресов конечных точек и расширенная поддержка web-types. поддержка цифровой подписи GPG, улучшение предкоммитных проверок и не только. быстрый способ упорядочивания окон, автоматическая очистка кэша и журналов и многое другое.

Редактирование кода

Перезагрузка страниц в браузере при сохранении изменений

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

Чтобы использовать эту функцию, откройте в редакторе HTML-файл, наведите на него курсор и нажмите на значок нужного браузера (поддерживаются любые браузеры). Кроме того, чтобы сделать превью файла в браузере, выберите View | Open in Browser в главном меню.

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

Обновленный предпросмотр HTML-файлов

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

Действия при сохранении кода

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

Чтобы задать в WebStorm действия при сохранении, выберите Preferences / Settings | Tools | Actions on Save. Там будет список действий, выполнение которых можно запустить, нажав ⌘S / Ctrl+S.

Чтобы активировать действие, поставьте галочку рядом с его названием. Большинство действий будет выполняться при любом сохранении: как автоматическом, так и принудительном. Для File Watchers и действия Upload to default server можно выбрать любой из двух вариантов их активации.

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

Ускоренное создание скретч-файлов

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

Во-первых, теперь, если выделить фрагмент кода, нажать ⌥⏎ / Alt+Enter, а затем выбрать Create new scratch file from selection, можно быстро создать новый набросок с этим фрагментом кода.

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

Синхронизация автодополнения кода в Code With Me

Теперь в режиме Following во время сеанса работы в Code With Me можно отслеживать предложения функции автодополнения кода, которые использует разработчик, за чьей работой вы следите.

Недавно Code With Me запустил два новых сервера ретрансляции: один на западном побережье США, второй — в ЮАР. Это позволило почти втрое сократить время отклика.

JavaScript и TypeScript

Автоматический импорт require()

Следующее улучшение в этом релизе порадует разработчиков Node.js. Как известно, WebStorm добавляет отсутствующие операторы импорта при вводе символов в модулях ES6. Теперь то же самое доступно для модулей CommonJS: при автодополнении кода будет вставлен оператор require.

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

Поддержка типов TypeScript в комментариях JSDoc

В версии 2021.2 реализовано одно из самых ожидаемых улучшений: теперь WebStorm корректно поддерживает синтаксис TypeScript в комментариях JSDoc в файлах .js. В этой версии мы переработали и расширили существующую поддержку, и теперь WebStorm распознает больше синтаксических конструкций. Кроме того, мы устранили целый ряд известных проблем. Например, теперь поддерживаются варианты свойств в объявлениях @typedef.

Новое действие для добавления стрелочных функций

Мы добавили новый шаблон Live Template, чтобы ускорить процесс добавления стрелочных функций. С его помощью можно заключить фрагмент кода в стрелочную функцию, нажав ⌥⌘J / Ctrl+Alt+J. Кроме того, чтобы развернуть шаблон и добавить пустую стрелочную функцию, достаточно набрать arf и нажать ⇥ / Tab, как показано ниже.

Предпросмотр файлов при отладке

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

Если вы включите предварительный просмотр, все эти файлы появятся друг за другом в одной вкладке. Чтобы активировать эту функцию, выберите Preferences / Settings | Editor | General | Editor Tabs.

Фреймворки и технологии

Code completion для частных пакетов npm

Добавлять новые зависимости проекта в package.json теперь еще проще благодаря автодополнению кода для частных npm-пакетов. IDE позволяет посмотреть информацию о свежих версиях пакета точно так же, как для публичных пакетов.

Рефакторинг Rename для React useState hooks

Вам больше не нужно тратить кучу времени на рефакторинг отдельных значений и функций useState в React hooks — теперь WebStorm переименует их самостоятельно! Чтобы использовать эту функцию, установите курсор на значение состояния и вызовите рефакторинг Rename, нажав ⇧F6 / Shift+F6 или выбрав Refactor | Rename в контекстном меню (которое открывается по щелчку правой кнопкой мыши).

Поддержка библиотек classnames и clsx

В этом релизе есть улучшения, которые оценят пользователи React. Теперь WebStorm поддерживает популярные библиотеки classnames и clsx, благодаря чему можно эффективнее использовать имена классов CSS. IDE покажет предложения автодополнения для классов CSS и преобразует все символы в строковые литералы и свойства с именами литералов.

IDE предложит автодополнения для строк, по мере того как вы набираете текст. Чтобы просмотреть предложения автодополнения для объектов, используемых в функциях classNames, нажмите Ctrl+Space.

Улучшенное автодополнение для URL-адресов конечных точек

Работая с Express.js, в окне Endpoints теперь можно получить информацию об обработчиках маршрутов. Это окно недоступно в WebStorm по умолчанию, но его можно добавить, установив соответствующий плагин в Preferences / Settings | Plugins. Оно также может пригодиться для работы с API.

Кроме того, появилась возможность поиска объявлений маршрутов Express. Для этого в главном меню надо выбрать Navigate | URL Mapping…

Предложения автодополнения для маршрутов Express в клиентском коде стали более информативными — теперь WebStorm показывает сведения о типе запроса.

Вот еще парочка примечательных улучшений для клиентского кода:

Общая поддержка web-types

Мы расширили поддержку web-types — открытого стандарта документирования веб-фреймворков. Прежде он поддерживал только Vue, а теперь его можно использовать для расширения помощи при написании кода для пользовательских компонентов в HTML-файлах. Подробнее — в нашем вебинаре.

Другие важные улучшения

Управление версиями

Поддержка цифровой подписи GPG

Теперь безопасность коммитов можно обеспечить, подписав их ключом GPG. Включить эту функцию можно в меню Preferences / Settings | Version Control | Git. Если вы используете ключ GPG впервые, его нужно настроить. Если вы хотите использовать настроенный ранее ключ GPG, его можно выбрать из выпадающего списка.

Улучшение предкоммитных проверок

В WebStorm предусмотрено множество действий, которые можно выполнять перед коммитом. В версии 2021.2 мы расширили перечень этих действий, добавив возможность запускать тесты. Чтобы попробовать эту функцию, нажмите на значок шестеренки в окне Commit, выберите Run Tests, а затем задайте нужные параметры запуска. IDE проверит ваш файл и даст знать, если что-то пойдет не так.

Кроме того, теперь можно настроить параметр Cleanup, нажав рядом с ним на Choose profile (так же, как и параметр Analyze code).

Ход выполнения и результаты предкоммитных проверок теперь отображаются в поле Commit без появления дополнительных модальных окон.

Текстовый поиск по версиям Local History

Мы добавили поле поиска в диалоговом окне Local History, чтобы вам было легче перейти к нужному тексту в своих версиях. Для выполнения поиска в истории файла щелкните правой кнопкой мыши на измененном файле, выберите Local History | Show History в контекстном меню и введите ключевые слова в поле поиска.

Единообразное поведение для действия Show Diff

Начиная с версии 2021.2, WebStorm будет показывать различия между исходными и измененными файлами в редакторе. Независимо от того, как вы вызываете действие Show Diff (через сочетание клавиш, нажатием на значок, из контекстного меню, из Log или File History, или же при нажатии на файл в окне Commit), IDEA по умолчанию откроет diff в редакторе.

Если вам удобнее отслеживать изменения в отдельном окне, можно перетащить нужный файл из редактора. WebStorm это запомнит и в дальнейшем будет открывать diff в отдельном окне.

Чтобы вернуться к стандартному виду, нажмите на значок шестеренки и выберите Show Diff in Editor Tab.

Удобство использования

Ускоренное упорядочивание окон

Теперь упорядочить окна стало проще. Наведите курсор на заголовок окна, которое нужно переместить, и перетащите его в нужное место. Более того, точно так же можно вытащить окно за пределы основного окна IDE WebStorm.

Упрощенная настройка значков проектов

Автоматическая очистка кэша и журналов

О том, какие директории использует IDE и где они находятся, можно узнать в этой статье.

Улучшения в диалоговом окне Preferences / Settings

В диалоговом окне Preferences / Settings появился узел с расширенными настройками. Мы добавили несколько новых параметров, включая возможность установки левого поля в режиме Distraction-free.

Кроме того, теперь можно свободно переходить между различными открытыми разделами диалогового окна Preferences / Settings, используя стрелки в правом верхнем углу окна.

Новые возможности встроенного терминала

Мы добавили в наш встроенный терминал три новые функции. Во-первых, теперь можно выбирать форму курсора. Абсолютно любую, какую захотите!

Во-вторых, в WebStorm появилась поддержка функции Use Option as Meta key, которая аналогична одноименной функции в эмуляторе терминала macOS. Она позволяет использовать клавишу ⌥ в качестве мета-модификатора в сочетании с другими клавишами, а не только как клавишу Escape. Например, можно использовать следующие сочетания:

⌥F — переход к следующему слову;
⌥B — переход к предыдущему слову;
⌥D — удаление следующего слова.

Новые настройки находятся в разделе Preferences / Settings | Tools | Terminal.

Уведомления об обновлениях из Toolbox App

Вы больше не пропустите критически важные обновления продуктов в Toolbox App. WebStorm сообщит, что можно скачать новую версию, и предложит ее установить. Эта функция будет работать с Toolbox App 1.20.8804 или более поздних версий.

Это только основные улучшения. Полный список новых возможностей WebStorm 2021.2 вы найдете в примечаниях к релизу. Сообщайте нам об обнаруженных ошибках через баг-трекер — мы очень ценим вашу помощь.

Читайте также: