Atom как подключиться к github

Как пользоваться редактором Atom

Atom – это многофункциональный текстовый редактор от разработчиков GitHub. Он поддерживает огромное количество различных расширений, благодаря которым его можно сравнить с настоящей средой разработки. Другая особенность – платформа Electron, на которой держится Atom. Она включает в себя Node.js и движок от Chrome – такой инструментарий позволяет разрабатывать приложения для рабочего стола на основе веб-технологий.

О том, чем еще хорош Atom и как им пользоваться, поговорим в сегодняшней статье.

Установка Atom

Скачать текстовый редактор для ОС Windows мы можем напрямую из GitHub. Переходим по этой ссылке, пролистываем вниз страницы и находим там файл AtomSetup-x64.exe.

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

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

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

Установка выполняется с помощью следующей команды:

sudo dpkg -i atom-amd64.deb

Для Ubuntu мы также можем воспользоваться менеджером пакетов snap:

snap install atom

Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей

Как пользоваться Atom

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

Устанавливаем пакеты

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

Выглядит это следующим образом:

1. Запускаем программу, если он еще не открыта, и на главном экране выбираем «Install a Package».
2. В раскрывшемся окне выбираем «Open Installer».
3. Перед нами открывается дополнительная вкладка в левой части окна. Это поисковая форма, через которую можно находить и устанавливать всевозможные пакеты Atom.
4. Для примера давайте установим пакет, позволяющий изменять язык программы. Он называется atom-i18n – вводим его в строку поиска и в первой карточке нажимаем на «Install».

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

Русифицируем Atom

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

Для русификации у нас уже все установлено, достаточно нажать пару кнопок:

1. В верхнем меню кликаем по «File» и выбираем «Settings…».
2. Следующим шагом переходим в подраздел «Install» и вводим название установленного ранее расширения. Затем жмем на «Settings».
3. Пролистываем немного ниже и кликаем по кнопке «English (en)». В отобразившемся окне выбираем нужный нам язык.
4. После этого в правой части отобразится новое окно с кнопкой «Reload». Кликаем по ней – таким образом мы перезагрузим программу и сделаем ее русифицированной.
5. В результате мы получаем переведенный на русский язык текстовый редактор Atom.

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

Изменяем тему оформления

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

1. Открываем в меню «Файл» и выбираем «Настройки…».
2. Переходим во вкладку «Темы» и в правой части находим блок «Внешний вид». Именно через него мы и можем изменять оформление редактора. Для примера давайте выберем «Atom Dark» и посмотрим, как преобразится окно программы.
3. В результате получаем:
4. Здесь же мы можем отдельно поменять тему редактора кода.

Подсветка синтаксиса и ошибок

Изначально в Atom подсветка синтаксиса доступна для всех популярных языков: PHP, HTML, Json, SQL, XML, CSS, CoffeeScript, JavaScript, Java, C/C++, Go. При необходимости мы можем добавить подсветку и для других языков.

Если вы пользуетесь шаблонизатором twig, то в Linux его можно добавить через пакет:

atom-twig

Для улучшения вида файлов можно установить пакет:

logo-file-icons

Также вы можете установить пакет Linter для подсветки ошибок. Например, чтобы добавить Linter для PHP, CSS, JSON и HTML, следует установить расширения:

• linter
• linter-ui-default
• linter-php
• linter-csslint
• linter-json-lint
• linter-htmllint

Теперь, если вы допустите ошибку в PHP или другом поддерживаемом языке, то текстовый редактор сразу же об этом сообщит.

Поддержка GIT

Думаю, не нужно объяснять, что такое система контроля версий. Сегодня она используется практически везде. Чтобы синхронизировать Atom и GIT, достаточно установить пакет git-plus. Если в папке проекта есть Git-репозиторий, то вы будете видеть измененные и новые файлы, а также их текущее состояние.

При необходимости мы можем сделать и коммит – для этого необходимо в нижнем правом углу нажать на кнопку Git. Затем указать измененные файлы, ввести описание коммита и нажать на кнопку «Commit to имя_ветки». Возле кнопки Git мы также можем найти другие кнопки, предназначенные для переключения между ветками и публикации изменений в удаленный репозиторий.

Автоматическое форматирование

Без автоматического форматирования кода сегодня практически никуда. Всего в один клик можно отформатировать нужный фрагмент кода – для этого достаточно установить дополнительные расширения. Например, чтобы подключить форматирование для PHP, то следует скачать atom-beautify и php-cs-fixer.

После установки вы можете перейти в меню «Расширения» и увидеть все доступные плагины.

Редактор в стиле VIM

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

С помощью него мы можем перемещаться по тексту с помощью клавиш h, j, k, l, выделять его с помощью v, использовать y, x и p для копирования и вставки, / для поиска, а также команды vim, например :w, для сохранения документа.

Префиксы в CSS

Префиксы в CSS позволяют обращаться к определенному браузеру и задавать свойства, именуемые только для него (-webkit, -moz, -ms). Писать каждый раз такие длинные слова не очень удобно, поэтому лучше воспользоваться специальным расширением autoprefixer. Оно автоматически прописывает префиксы к выделенному коду.

Как только пакет будет установлен, выделяем нужный фрагмент кода и переходим в меню «Расширения» -> «Command Palette» -> «Toggle».

В отобразившейся поисковой строке вводим запрос «Autoprefixer» и кликаем по первой строке.

Таким образом, в CSS произойдет автоматическая расстановка префиксов.

Отладка в PHP Atom

Если вы планируете работать с крупными проектами, то без отладки не обойтись никак. Для PHP в этом может помочь специальный отладчик Xdebug. В Ubuntu для его установки следует выполнить команду:

sudo apt install php-xdebug

После этого открыть файл xdebug.ini командой:

sudo vi/etc/php/7.2/mods-available/xdebug.ini

В файл прописать следующие параметры:

zend_extension=xdebug.so xdebug.remote_enable=1 xdebug.remote_host=127.0.0.1 xdebug.remote_connect_back=1 xdebug.remote_port=9000 xdebug.remote_handler=dbgp xdebug.remote_mode=req xdebug.remote_autostart=false

Обратите внимание на значение параметра xdebug.remote_autostart – оно должно быть false. В противном случае отладчик будет запускаться для всех скриптов, что требуется далеко не всегда. Чтобы применить внесенные изменения, необходимо перезапустить веб-сервер командой:

sudo systemctl restart apache2

Дополнительно нужно установить еще один пакет php-debug – в нем также следует прописать все зависимости, которые предлагает среда:

Также рекомендую отключить показ надписи « You have both linter and atom-ide-diagnostics enabled, which will both display lint results for Linter-based packages», которая будет появляться при каждом запуске. Для этого необходимо открыть настройки пакета atom-ide-ui и в пункте «Enabled Fetures» деактивировать опции «Diagnostics Services» и «Diagnostics». Достаточно их раскрыть и выбрать «Never enabled».

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

Теперь следует поработать с браузером, так как по умолчанию отладка там отключена. Потребуется скачать дополнительное расширение Xdebug helper. Загружаем его, затем в верхней части активируем и жмем «Debug».

Осталось перезапустить страницу – в результате в Atom должен запустить отладчик.

Работа с проектами в Atom

Вот и подходит к концу мое руководство по использованию редактора Atom. Осталось рассказать еще о такой особенности, как проекты. Мы можем не просто открывать css-, html- и php-файлы, но и загружать целые проекты. Это удобно, когда в разработке задействуется большой набор файлов. Для этого необходимо выбрать «Добавить папку с проектом».

Теперь мы увидим проект в виде дерева:

Горячие клавиши

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

• Ctrl + S – сохраняет файл;
• Ctrl + Shift + P – запускает консоль;
• Ctrl + Shift + T – открывает последнюю закрытую вкладку;
• F5 – сортировка;
• Ctrl + P – открывает поиск по проекту;
• Ctrl + F – поиск и замена;
• Shift + Ctrl + F – поиск по всем файлам проекта;
• Ctrl + Shift + D – дублирует строку;
• Ctrl + / – комментирует строки;
• Ctrl + J – складывает строки в одну;
• Ctrl + Alt + F2 – позволяет поставить метку около строки;
• F2 – перемещение между метками строк;
• Ctrl + Space – вызывает автодополнение;
• Ctrl + K + U – устанавливает буквы заглавными;
• Ctrl + K + L – устанавливает буквы маленькими;
• Ctrl + M – позволяет перейти к закрывающейся или открывающейся строке;
• Ctrl + Shift + : – вызывает подсказку;
• Ctrl + Alt + V – превью SVG-файлов;
• Ctrl + Alt + B – автоматически расставляет отступы в коде;
• Alt + Ctrl + I – вызывает инструменты разработчика.

Сегодня мы поговорили о мощном текстовом редакторе Atom, который отлично подойдет как для начинающих, так и для опытных веб-разработчиков. Надеюсь, что статья была для вас полезной, и теперь работа с этим редактором кода для вас не страшна. Спасибо за внимание!

PhpStorm. Почти все, что вы хотели знать об интеграции с Git.

Давно не писал про phpstorm. Да и чего тут писать, казалось бы. Документация в публичном доступе, бесплатная версия доступна для скачивания, да и лицензия стоит не так дорого. Полно уже информации о том, что это наикрутейший инструмент, который есть сейчас на рынке для разработки приложений на php. Но все еще много сомневающихся, многих отталкивает его «монструозность», «тормознутость» (все познается в сравнении). Лично мне кажется, что дело не в перечисленных выше факторах, а в непонимании, как им пользоваться. Читать огромную доку — лень, изучать что-то новое — лень. Программисты — они вообще люди ленивые в большинстве своем.

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

Осторожно, под катом очень много картинок, гифок, и … текста …

Дисклеймер

Давайте сразу договоримся — есть крутые гуру, которые не признают GUI-вариант управления git репозиторием. Нравится — пользуйтесь дальше. Я понимаю, что в CLI возможности git’а раскрываются на 100%. Но есть такие сценарии, когда с git гораздо удобнее работать именно в GUI. Мы все это понимаем и осознаем, и спор об этом выходит за рамки данной статьи.

Информация о том, что такое git, зачем он нужен, как его установить, как им пользоваться в целом — все это тоже остается за пределами данного материала.

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

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

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

Начало

После того, как git установлен в вашей ОС, нужно подключить его к PhpStorm. Сделать это можно в настройках IDE по адресу File | Default Settings… | Version Control | Git. Тут есть опция Path to Git executable, в которой нужно задать путь до исполняемого файла git. В 99% случаев он определится автоматически, но если вдруг у вас какой-то специфичный случай, нужно тут указать путь до бинарника с git. После указания нужно нажать на кнопочку Test, чтобы убедиться, что все ок.

Если вдруг вы не нашли этот пункт меню, то вероятно у вас не установлен плагин «Git Integration». Обычно он установлен и включен по-умолчанию в стартовой инсталляции PhpStorm, но мало ли.

Кстати, тут сразу можно обратить внимание, что PhpStorm даст фору любому GUI по количеству опций, которые можно настроить. Одних только дефолтных настроек 9 вкладок (которые будут работать во всех системах контроля версий, а не только в git). А есть еще специфичные для каждого проекта и vcs опции. А еще опции для разных частей интерфейса … впрочем, обо всем по порядку.

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

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

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

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

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

PhpStorm довольно умный, и если он нашел репозитории внутри вашего проекта, он покажет их все. Вам останется только выбрать нужный репозиторий. Кроме этого он покажет отдельной строкой директорию , которая ассоциирована с корнем вашего проекта. Если ваш репозиторий находится в корне проекта, то просто ассоциируем с типом VCS — Git:

Если же ваш репозиторий находится глубже по уровню — выбираем найденный 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

Примерно 50% времени всей работы с репозиторием в PhpStorm происходит внутри панели инструментов Version Control, которая включается в меню View | Tool Windows | Version Control (или по хоткею Command + 9). Эта панелька содержит 3 вкладки — Local Changes, Log и Console. Последняя показывает просто список всех консольных команд, которые были выполнены самим PhpStorm’ом со всеми параметрами. А вот на первых двух остановимся поподробнее.

Local changes

Если сравнивать gui и cli, то это прям «git status на стероидах». Основой работы этой вкладки являются Change-листы. Это такая небольшая абстракция поверх версионного контроля, которая позволяет прикрепить набор редактируемых файлов к какому-то списку, что помогает изолировать код, относящийся к разным фичам друг от друга. Вообще говоря, сценариев использования change-листов огромное множество. В phpstorm поддержка этих change-листов довольно широка. Например, он может формировать чейнжлисты на основе задач из багтрекера сам, а при переключении веток сохранять состояние чейнжлиста и переходить к другому чейнжлисту. Вы можете сами управлять чейнжлистами, создавать свои, перекидывать файлы из одного листа в другой, коммитить эти листы отдельно друг от друга и т.д. и т.п. Если углубляться в эту тему, можно написать не одну статью в этом блоге �� Поэтому я буду рассматривать работу только с одним-двумя чейнжлистами для упрощения.

По-умолчанию в PhpStorm уже есть один чейнжлист, который нельзя удалить, называется он Default. В этот лист попадают все те файлы, которые вы правите в рамках текущего репозитория. Хотя нет, на самом деле дефолтных листа — два, постараюсь показать на примере.

Если вспоминать теорию по 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

Справа в gui мы видим только две категории (а точнее — два чейнжлиста). Если с листом Unversioned Files все относительно понятно — слова untracked и unversioned являются синонимами в контексте git, а значит в этом листе показываются те файлы, которые являются не добавленными в репозиторий. А вот с листом Default не понятно, там отображаются файлы, которые находятся в состоянии staged и unstaged, и никак не разделены между собой.

WAT?

Тут надо понимать, что отображаемые два чейнжлиста — это дефолтные листы. Поэтому следует принимать то поведение, которое было в них заложено. Если подумать, то так ли нам важно, находится файл в состоянии staged или unstaged? Очень часто бывает так, что после выполнения команды «git add .» которая помечает все файлы репозитория меткой staged, приходится еще что-то подправлять. После таких правок очень легко забыть повторно добавить файлы в индекс (вызвав команду git add . снова, или применив её на какой-то конкретный файл). Чаще всего нам важно понимать лишь разницу между теми файлами, которые мы хотим добавлять в репозиторий, и теми, которые не хотим добавлять.

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

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

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

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

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

Довольно удобной фичей тут является возможность предпросмотра diff для каждого файла сразу же после выбора их в спике. После включения вся панель инструментов делится на две части, слева будет оставаться также список файлов, а справа — diff файла, выбранного слева. И в нем можно даже сразу редактировать. Diff можно открыть в отдельном всплывающем окне, если неудобно смотреть его в маленьком окошке.

Также тут присутствуют кнопки для управления чейнжлистами, которые позволяют добавлять/удалять их, выбирать активный чейнжлист, перемещать файл между чейнжлистами (что можно делать и с помощью Drag’n’Drop).

Отсюда же можно произвести отмену сделанных изменений в файле (операция Revert). Если вы изменили файл, который уже был в репозитории, то PhpStorm отменит все сделанные в нем изменения и приведет его к состоянию в HEAD метке репозитория, выполнив команду git checkout HEAD — file. Если же файла нет в репозитории, то команда вернет файл в список Untracked.

В общем — пробуйте. Возможностей у этой панельки — хоть отбавляй.

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

Сделать коммит можно тоже множеством способов. Есть хоткеи (Command + K или Ctrl + K), есть кнопочки в интерфейсе и контекстных меню — используйте любой удобный. Самое важное тут понимать — в коммит попадет только то, что вы непосредственно укажете, независимо от того, что сейчас находится в индексе гита. Выбрали только один файл, в коммит попадет только он. Выбрали директорию — попадут все измененные файлы этой директории. Выбрали чейнжлист — попадут файлы из него. Ну вы поняли ��

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

Тут можно еще раз проверить, какие именно файлы попадут в коммит. Будет выведено все дерево измененых файлов с группировкой по директориям и деревом вложенности (если выбран этот режим отображения). Также тут можно нужно задать сообщение для коммита и на всякий случай проверить diff.

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

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

В любом инструменте для работы с репозиториями через gui обязательно должно быть дерево коммитов. PhpStorm — не исключение. Найти его можно во вкладке Log панели Version Control. На первый взгляд — ничего необычного. Однако чем больше с ним работаешь, тем больше понимаешь, насколько это серьезный инструмент. Да, я согласен, тут может быть есть не все то, что нужно иногда (редко), но тем не менее, на мой взгляд, этот лог гораздо более функционален, чем лог в других gui’яx (слово-то какое!).

В верхней части находятся возможности по фильтрации дерева. Можно показать только те коммиты, которые в тексте описания содержат какую-то строку или регулярку. Можно показать коммиты конкретной ветки/тега. Можно показать коммиты конкретного пользователя, или показать коммиты с фильтром по дате. Что очень интересно — можно показать дерево одного репозитория, или же нескольких репозиториев сразу (на скрине как раз показано несколько деревьев сразу, выбранные в фильтре Paths)!

Само по себе дерево является интерактивным. Можно свернуть историю, если она линейна, нажав на ветвь истории. Каждый коммит в дереве кликабелен и имеет контекстное меню, через которое можно выполнить все базовые операциями над коммитами в истории. Например, если вы хотите отменить сделанный коммит, через контекстное меню надо нажать на Reset Current branch to here …, после чего будет вызван диалог, предлагающий выбрать тип reset’а — hard, soft или mixed с пояснением каждого из вариантов.

А еще можно назначать теги, переходить к коммиту на github, делать cherry-pick, создавать новые ветки из коммита, и даже менять сообщение коммита. В общем много всего.

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

В дополнение ко всему вышесказанному можно добавить приятную мелочь — интеграцию лога с таск-трекером. Для того, чтобы её настроить, нужно пойти в настройки по адресу Version Control > Issue Navigation, где добавить свои настройки для своего таск-трекера. В нашем случае оно выглядит вот так:

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

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

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

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

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

Если вам нужно просмотреть историю изменения какого-то файла и сравнить его с предыдущей версией этого же файла, то можно сделать следующее: достаточно вызвать контекстное меню конкретного файла (в дереве файлов или в редакторе) и выбрать опцию Git | Show History. В основной панели инструментов Version Control появится новая вкладка — History, в которой будут отражены все зафиксированные коммиты, в которых присутствовал этот файл. И вот тут как раз можно просмотреть разницу между разными версиями этого же файла с помощью соответствующей кнопки на панели (или шортката Ctrl + D или Command + D)

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

При просмотре diff’а можно настроить отображение окошка так, как душе угодно — можно просматривать в одной колонке, можно в двух; можно выделить изменения, которые были сделаны в рамках одной строки; можно показать файл целиком или показать только изменения + 5 строк сверху и снизу (при этом остальные строки файла будут просто в свернутом состоянии и к ним можно будет получить доступ, просто нажав на «плюсик» разворачивания кодового блока)

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

Все, что нужно знать о ветках, а также дополнительные сведения о текущем состоянии вашего репозитория (помимо файлов, о которых была речь чуть выше), находится в правом нижнем углу phpstorm. Если вы в данный момент находитесь на какой-то ветке, то будет отображено название ветки. Если вы «оторвались от головы» репозитория и перешли на какой-то коммит, то там будет короткий хеш коммита. Если вы находитесь в каком-то особом состоянии типа merge или rebase, то оно тоже будет там показано

При нажатии на эту область вылезает список всех ваших репозиториев, всех их веток (локальных и удаленных), а также опции для работы с ними. Можно переключиться на другую ветку, создать новую, переименовать. Кстати, очень полезная функция — сравнить текущую ветку с одной из выбранных — очень помогает при Code Review

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

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

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

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

Как и в cli, тут есть возможность принять чужие или свои изменения в приоритете. А есть кнопка Merge… открывающая diff-viewer, который поможет разрешить конфликт

На этот раз представлен трехсторонний diff. В левом окне — ваши правки. В правом — конфликтующие ветки. В середине — результат слияния. Красным помечены конфликтующие строки, изменения в которых были внесены с обоих сторон. Серым помечены удаления строк, а зеленым — добавления.

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

Все, что не является красным — phpstorm может обработать автоматически. Достаточно нажать кнопку Apply All Non-Conflicting Changes на верхней панели инструментов. Эта кнопка решает в ситуациях, когда изменений ну очень много, но при этом diff-viewer оставляет просмотр правок на ваше усмотрение.

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

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

Для того, чтобы начать rebase, нужно пойти в меню VCS | Git | Rebase … Откроется диалоговое окно, которое позволит задать параметры для перебазирования одной ветки на другую. Все довольно очевидно и понятно:

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

После запуска перебазирования phpstorm начнет по одному перекидывать коммиты. В зависимости от того, какие опции перебазирования были выбраны для веток, будут происходить разные действия. Например, если вы выбрали редактирование файлов в каком-то коммите, то phpstorm остановит процесс rebase’а на этом коммите и предложит вам отредактировать файлы, после чего — продолжить:

Если делаете слияние нескольких коммитов в один, то phpstorm любезно предложит ввести новое сообщение о коммите

По окончании операции будет сообщение об успешно завершенной операции

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

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

Сделать fetch можно с помощью меню VCS | Git | Fetch. Возможно где-то в недрах конфигурации есть опция, которая бы автоматически выполняла эту команду, но мне удалось найти эту функцию только в стороннем плагине — GitToolbox,

Сделать pull можно с помощью меню VCS | Git | Pull… Откроется диалоговое окно, которое предложит выбрать репозиторий и ветку/ветки для слияния. Там же есть ряд наиболее часто используемых опций при слиянии

Если вдруг в процессе слияния обнаружатся конфликты, то будет предложено их слить с помощью diff-viewer’а, как и при обычном merge.

Для выполнения push нужно выбрать меню VCS | Git | Push … или воспользоваться хоткеем Command + Shift + K или Ctrl + Shift + K. Это тоже диалоговое окно, в котором нужно выбрать репозитории и ветки, в которые выполнить отправку новых коммитов

Прочее

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

Да, конечно, не все операции phpstorm позволит сделать с помощью GUI. Но подавляющее большинство операций — доступно. Да — это медленнее, чем через cli. Да — может быть это не «труъ». Но факт остается фактом — работать с гитом через GUI в шторме удобно и приятно, и что самое главное — продуктивно! Пользуйтесь дарами человечества и изучайте инструменты, с которыми работаете. Всем благ.

Инструкция: заливаем проект на GitHub без командной строки

Автор статей о программировании. Изучает Python, разбирает сложные термины и объясняет их на пальцах новичкам. Если что-то непонятно — возможно, вы ещё не прочли его следующую публикацию.

GitHub — это облачный сервис, где разработчики хранят файлы и совместно работают над проектами. GitHub взаимодействует с системой контроля версий Git. Сегодня вы узнаете, как он работает. Мы создадим репозиторий, добавим в него файлы проекта, синхронизируем репозиторий с ПК, научимся обновлять файлы, добавлять новые ветки и сливать их в одну.

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

Шаг 1

Создаём учётную запись

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

Далее рекомендуем выставить настройки безопасности и заполнить профиль — на GitHub много IT-рекрутеров, которые по информации в профиле набирают кандидатов в проекты. Поставьте фото и ссылки на соцсети, откройте доступ к электронной почте и напишите о себе: расскажите про опыт, специализацию, пройденные курсы, рабочий стек технологий и выполненные проекты. Заполненный профиль повышает вероятность трудоустройства.

Шаг 2

Добавляем удалённый репозиторий

Репозиторий — это файловое хранилище проектов. На бесплатном тарифе можно загружать до 500 МБ данных и создавать неограниченное количество репозиториев.

Чтобы создать репозиторий, нажмите на кнопку New repository, назовите проект и кликните Create repository. Можно добавить описание проекта, сделать его публичным или приватным и прикрепить технические файлы:

• README file содержит подробное описание проекта — так другие разработчики узнают, какой репозиторий они смотрят и зачем он нужен.
• Gitignore позволяет сэкономить место и не заливать на GitHub лишние файлы. Например, можно исключить скрытые файлы Mac OS.
• License добавляет к коду ссылку на первоисточник и защищает права разработчика. Лицензия позволяет понять, как правильно использовать чужой код и можно ли его свободно внедрять в коммерческие проекты.

Мы создаём тестовый репозиторий, поэтому обойдёмся без лицензии — выберем только два дополнительных файла: README file и gitignore. Если вы пока не знаете, что писать в README file и что добавлять в gitignore, — оставьте эти файлы пустыми или посмотрите инструкцию в разделе Read the guide.

В README file отображается краткое описание проекта — сейчас этот файл не важен, поэтому мы не будем менять его описание. Изменим файл gitignore и сделаем так, чтобы он не учитывал служебные папки операционной системы:

• Переходим на сайт gitignore.io.
• Добавляем macOS или другую операционку, с которой вы работаете.
• Жмём Create и получаем нужный служебный файл.
• Копируем данные и переносим их в файл gitignore на GitHub.

После редактирования gitignore делаем коммит — записываем в историю проекта факт того, что мы установили ограничение для файлов Mac OS.

Шаг 3

Переносим удалённый репозиторий на ПК

Перейдите на сайт desktop.github.com и скачайте GitHub Desktop — это приложение, которое позволит синхронизировать удалённый репозиторий на GitHub и файлы на вашем компьютере без командной строки терминала:

• Скачиваем приложение под свою операционную систему.
• Открываем приложение и проходим авторизацию — нужно указать электронную почту и данные вашего GitHub-аккаунта.
• Приложение синхронизируется с удалённым репозиторием и предложит выполнить одно из следующих действий: создать новый репозиторий, добавить локальную папку с компьютера в GitHub Desktop или клонировать существующий репозиторий в папку компьютера.

Мы создали тестовый удалённый репозиторий, поэтому выберем третий вариант — клонировать существующий репозиторий в папку компьютера.

После клонирования репозитория в рабочем пространстве появятся три вкладки: Current Repository, Current Branch и Fetch origin.

• Current Repository — раздел позволяет переключаться между несколькими репозиториями, отслеживать невнесённые изменения (вкладка Changes) и смотреть историю коммитов (вкладка History).
• Current Branch — раздел позволяет переключаться между несколькими ветками проекта.
• Fetch origin — раздел обновляет внесённые изменения и синхронизирует файлы локального и удалённого репозитория.

Обратите внимание на раздел Current Repository и вкладку Changes. В левом нижнем углу есть окно для добавления коммитов и комментариев — это означает, что вы можете записывать каждый шаг, не посещая сайт GitHub.

На скриншоте первый коммит технический, он указывает на то, что мы создали репозиторий. Второй коммит наш — им мы редактировали файл gitignore. История хранит все коммиты, и мы можем вернуться к любому из них. Это страховка от непредвиденных случаев

Шаг 4

Добавляем новые файлы на ПК и переносим их в удалённый репозиторий

Папка с файлами нашего репозитория хранится на рабочем столе. Чтобы продолжить работу, откроем проект в редакторе кода: можно выбрать любую программу, и GitHub Desktop предлагает воспользоваться Atom.

Выбор редактора кода — дело вкуса. Мы будем работать с репозиторием в Visual Studio Code — это бесплатный редактор от компании Microsoft.

Создадим HTML-файл, добавим базовую структуру и посмотрим на боковое меню — HTML-файл подсвечен зелёным цветом. Это означает, что в проекте появились изменения и они ещё не добавлены в репозиторий на GitHub.

Переходим в GitHub Desktop — созданный HTML-файл появится во вкладке Changes. Для его сохранения пишем коммит и переходим во вкладку History для просмотра изменений. Если изменения сохранились, нажимаем на Push origin и отправляем изменения в удалённый репозиторий.

Шаг 5

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

Добавим к проекту пустой CSS-файл и подключим его к HTML. После этого в меню редактора появятся два цвета: HTML-файл подсветится оранжевым, а CSS-файл — зелёным. Оранжевый означает, что файл уже есть в удалённом репозитории и его нужно обновить. Зелёный — файла нет в репозитории. Переходим в GitHub Desktop и добавляем коммит для этого изменения.

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

• Переходим в GitHub Desktop.
• Открываем раздел Current Branch, нажимаем кнопку New Branch, пишем название новой ветки и кликаем Create New Branch.
• Возвращаемся в редактор кода и тестируем идею.

После создания новой ветки не забудьте нажать на Push origin, чтобы изменения попали в удалённый репозиторий на сайте GitHub.

Предположим, наша идея с красным фоном оказалась удачной и код нужно залить в основную ветку. Чтобы это сделать, переходим сайт GitHub, нажимаем кнопку Сompare & pull request и подтверждаем изменения кнопкой Merge pull request. Последний шаг — переходим в GitHub Desktop, кликаем Fetch origin и синхронизируемся с удалённым репозиторием. Теперь код из дополнительной ветки попал в основную, а изменения есть на ПК и в облаке.

Saved searches

Use saved searches to filter your results more quickly

Cancel Create saved search

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

This repository essentially includes the simple steps to connect Atom and GitHub in a proper format.

1varunvc/How-to-connect-Atom-and-Github

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Switch branches/tags
Branches Tags
Could not load branches
Nothing to show
Could not load tags
Nothing to show

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Cancel Create

• Local
• Codespaces

HTTPS GitHub CLI
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more about the CLI.

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

Latest commit message
Commit time

README.md

How-to-connect-Atom-and-Github

This repository essentially includes the simple steps to connect Atom and GitHub in proper order. Please suggest edits shall there be any.

Steps

1. Create a GitHub account and log-in.
2. Go to https://github.atom.io/login/. Re-enter password. Grant the access permission for atom. Copy the token.
3. Open Atom. From the bottom right corner, click ‘GitHub’. Enter the copied token, there.
4. Create a local folder for the project.
5. Download and install Git. Open GitBash in the local folder for the project that you’ve just created, (and where you want to make a commit.) Type in:

git config --global user.email "type_your_email_here" git config --global user.name "type_your_name_here" 

If you already have a project created locally:

In case you have already created all the files for your project locally, proceed the same way until step 8.

After performing step 8, upload all the files from your original local project folder to the remote repository on GitHub, manually (i.e. in the way you would usually upload any file online.)

Now, proceed to step 9.

How to log-out Github from Atom?

1. Log out from atom.

In atom, press Ctrl + Shift + P. Search for ‘Github Logout’ and click it.

1. Remove token ID. That is, log-out of https://github.atom.io/login.

Open github account on your browser. Click the profile picture on top right corner > Settings > Applications. Now find Atom, and revoke access.

Important Points:

1. While ‘commiting’ files from the staged area, make sure the ‘message’ box isn’t empty.
2. To delete a local or remote git branch, refer this link[2]. Avoid creating unwanted branches.
3. To unlink a local directory from github, delete the .git folder.[3] Open GitBash in your project folder and use this command:[4] git rm -rf .git
4. There is no need to unlink an unwanted local directory from GitHub, simply delete the local folder.[5]

Useful Command Line Commands:

• Create a new repository on the command line:

echo "# repository-name" >> README.md git init git add README.md git commit -m "first commit" git branch -M main git remote add origin https://github.com/username/repository-name.git git push -u origin main 

• Push an existing repository from the command line

git remote add origin https://github.com/username/repository-name.git git branch -M main git push -u origin main