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

Работа с Git и GitHub в редакторе кода Atom

Если вы новичок и еще не работали с консолью, но уже хотите работать с Git и GitHub, то вместо поиска подходящего GUI, советую вам присмотреться к редактору Atom.

Atom — отличный редактор кода с богатым функционалом и очень гибкой настройкой. Так как он разрабатывался командой GitHub, то вполне логичным и долгожданным стало появление в стартовой сборке версий 1.18+ одноименного пакета “GitHub”, позволяющего работать с репозиториями и системой контроля версий напрямую из редактора без установки дополнительных программ, в том числе даже GitHub Desktop.

Работа с пакетом ведется через панели Git и GitHub. Их можно открыть через меню редактора: Packages -> GitHub -> Toggle Git Tab, или сочетанием клавиш Ctrl + Shift + 9 для Git и Ctrl + Shift + 8 для GitHub.

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

Для примера создадим новый репозиторий.

Войдите в свой аккаунт на GitHub и выберите пункт “New repository” в меню справа или нажмите зеленую кнопку “New repository” в разделе “Your repositories”.

Введите название и описание. Поставьте галочку “Initialize this repository with a README”, чтобы автоматически создать файл readme.md. Вы можете выбрать будет ли ваш репозиторий публичным (Public) или приватным (Private, это опция требует оплаты тарифного плана). Нажмите кнопку “Create repository” и создайте новый репозиторий.

Чтобы связать локальный репозиторий с удаленным, нам необходим специальный URL этого репозитория на GitHub.

В созданном репозитории нажмите кнопку “Clone or download” и скопируйте URL.

Откройте командную строку редактора Crtl + Shift + P и введите команду “GitHub: Clone” или воспользуйтесь сочетанием клавиш Alt + G и затем =.

Команда PUSH

Команда push позволяет отправить в удаленный репозиторий изменения, внесенные в локальный репозиторий.

Кликнув на дереве локального рипозитория слева, создадим новую папку с именем “css” сочетанием клавиш Shift + A (или пункт “New folder” в контекстном меню). Обратите внимание — на панели Git создание пустой папки не отображается, т.е. папка без содержимого не будет добавлена в коммит, а значит и в репозиторий на GitHub. Добавим в нее несколько новых файлов — клавиша “A” или пункт “New file” в контекстом меню.

В разделе “Unstaged Changes” создание файлов отображается зелеными значками. Желтыми значками будут отображаться изменения в уже проиндексированных файлах. Красными значками будут отображаться удаленные файлы.

Отправим наши изменения в удаленный репозиторий на GitHub. В разделе “Unstaged Changes” нажмите кнопку “Stage All”. Все учтенные изменения будут перенесены в раздел “Staged Changes”. Если вы хотите добавить только некоторые — выберите нужные и нажмите клавишу Enter. При необходимости вы можете вернуть их обратно кнопкой “Unstage All”.

Чтобы не вводить данные аккаунта каждый раз, сохраним их в системе Git нашего локального репозитория. В дереве слева откройте папку “.git” и выберите файл “config”. В строке “url” после “ https:// ” и до названия домена “github.com” введите данные аккаунта. Отделите username от пароля “:” и пароль от домена “@”. В итоге у вас должен получиться адрес вида “https://username:password@github.com/…”.

Это безопасно — файл “config” хранится локально, изменения в нем не фиксируются в коммитах, не попадают в историю и не доступны даже если ваш репозиторий на GitHub публичный.

Тем не менее этот способ временный —только пока вы новичок и консоль вам не покорилась. С этим способом вам придется изменять URL в файле config каждого нового репозитория. В будущем, чтобы правильно организовать доступ к репозиториям вашего аккаунта, вам потребуется настроить SSH-ключи.

Команда PULL

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

Теперь отредактируем файлы в удаленном репозитории.

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

Теперь вернемся в редактор и попытаемся внести в локальный репозиторий те изменения, которые произошли в удаленном. На панели Git нажмем кнопку “Fetch”, чтобы обновить информацию об удаленном репозитории.

Выполним команду pull и проверим наш локальный репозиторий — в него добавились все изменения из главного репозитория.

Конфликты

При слиянии (merge) локального и удаленного репозитория могут возникать конфликты. Редактор постарается помочь вам их предотвратить. К примеру, при отправке push редактор может выдать предупреждение:

Эта проблема решается предварительным запросом pull.

Конфликты происходят из-за разных коммитов, изменяющих одну область кода. Например, в GitHub уже сохранен новый цвет фона и в тот же момент мы изменили его у себя, а затем попытались запросить pull. Редактор выдаст предупреждение:

Кликнув по изменению в разделе “Unstaged Changes”, можно увидеть какие строки файла были изменены. Изменение можно удалить из этого раздела (тогда файл вернется в состояние, сохраненное в последнем коммите) сочетанием клавиш Ctrl + Backspace или соответствующей командой в контекстном меню и затем снова запросить pull.

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

Здесь вы можете выбрать из двух вариантов — локальные изменения (our changes) или изменения из удаленного репозитория (their changes). Так же вы можете отредактировать любое из них и уже потом его выбрать. К примеру скопировать конфликтный код из одного блока в другой и закомментировать его, чтобы позже разобраться в коде. Затем выбрать нужный вариант кнопкой “Use me” и потом опять синхронизировать данные в репозиториях командами pull/push.

Изменение коммита

При необходимости можно внести изменения в последний коммит, который еще не отправлен в удаленный репозиторий. Для этого нужно поставить галочку “Amend” рядом с кнопкой “Commit”. При этом надпись на ней измениться на “Emmend commit”.

Создание ветки

Также в редакторе можно создавать новые ветки репозитория и переключаться между ними.

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

Полезные сочетания клавиш для работы с пакетом можно увидеть, вбив в командную строку редактора запрос “github”.

Более подробно о редакторе Atom и пакете GitHub можно узнать на официальном сайте проекта Atom for GitHub и в соответствующем разделе его документации — GitHub package.

Интеграция Atom и GitHub нативными инструментами

Приветствую. Имеется редактор Atom, у него — нативная работа с GitHub. Но вопрос: как опубликовать репозиторий на ГитХабе? Авторизации нет, ничего нет. Вкладка I: Вкладка II:

Отслеживать
11.5k 8 8 золотых знаков 42 42 серебряных знака 69 69 бронзовых знаков
задан 8 авг 2017 в 5:58
Albert Akmukhametow Albert Akmukhametow
119 6 6 бронзовых знаков

заходите на гитхаб, создаете новый репозиторий, и гитхаб сам пишет, как «опубликовать» Ваш код (git origin add && git push). А чем Вы пользуетесь на своей стороне — ему побоку.

8 авг 2017 в 7:12
Дак а как подключить этот репозиторий к Atom?
8 авг 2017 в 12:31
atom сам подтянет Ваш репозиторий, как только вы его добавите. А для этого Вам атом не нужен.
8 авг 2017 в 13:09

То есть, мне надо через какой-нибудь Github Desktop или иной клиент этот репозиторий подгрузить, задать его в Атоме и он его подтянет?

8 авг 2017 в 16:51
Через консоль Гита добавьте и скорее всего все само и подымется
8 авг 2017 в 16:53

0

Сортировка: Сброс на вариант по умолчанию

Знаете кого-то, кто может ответить? Поделитесь ссылкой на этот вопрос по почте, через Твиттер или Facebook.

• git
• github
• atom

Важное на Мете

Похожие

Подписаться на ленту

Лента вопроса

Для подписки на ленту скопируйте и вставьте эту ссылку в вашу программу для чтения RSS.

Дизайн сайта / логотип © 2024 Stack Exchange Inc; пользовательские материалы лицензированы в соответствии с CC BY-SA . rev 2024.1.3.2953

Нажимая «Принять все файлы cookie» вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Atom Github: настройка текстового редактора для работы с кодом

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

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

Настройка Atom от GitHub

Скачать редактор можно под любую операционную систему: Windows, Linux, MacOS непосредственно из репозитория на GitHub.

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

Настройка Atom от GitHub: как добавить новое расширение

1. Запустит ь редактор Атом.
2. Изначально программа откроется на вкладке «Welcome Guide». На этой вкладке нас интересует пункт «Install a pack a ge» , а в нем на м нужен пункт «Open Installer».
3. После этих манипуляций вам откроется окно для поиска дополнительных пакетов. Если вам известно название нужного вам пакета, то можете ввести его в поиск. Если неизвестно, то можно ввести ключевое слово , тогда вам будет предложено несколько подходящих по смыслу пакетов, из которых вам нужно будет выбрать.
4. Выбираете нужный вам пакет с расширением и нажимаете на кнопку «Install». Установленное расширение всегда можно будет удалить или настроить.

Настройка Atom от GitHub: основные пункты

1. Если нужно русифицировать. Обычно у программистов не должно быть проблем с английским языком, но бывает всякое. Ру с ифицировать Атом можно разными пакетами, но в качестве рекомендации можете попробовать пакет «atom-i18n». Это расширение можно использовать и для других языков, так как оно поддерживает не только русский. После установки данного пакета нужно будет найти в настройках пункт с настройкой языка и выбрать подходящий вам язык перевода редактора. После перезагрузки Атома он ру с ифицируется, если вы выбрали русский язык.
2. Можно сменить тему оформления. При смене темы оформления можно выбирать и стилистику подсветки синтаксиса. Делается это по следующему пути: «Edit-Preferences-Themes». Вариантов тем по умолчанию немного, но если ничего не устраивает, то в сети можно найти подходящую именно вам тему внешнего вида. С выбором стилистики подсветки синтаксиса дела обстоят немного л учше.
3. Подсветка синтаксиса. Для большинства популярных языков программирования подсветка синтаксиса включена по умолчанию, потому что работа с данными языками также включена по умолчанию. Среди этих языков можно найти: Go, C++, JavaScript, CoffeeScript, CSS, HTML, PHP и др. Для того чтобы Атом поддерживал подсветку других языков, н ужно добавить их в редактор ; для этого нужно добавить пакет «atom-twig».
4. Подсветка ошибок. Это очень удобная функция, которая помогает видеть большинство ошибок прямо в процессе разработки. Чтобы активировать эту функцию в редакторе , нужно добавить пакет «linter» — это общий пакет для множества языков ; либо под каждый отдельный язык, например , «linter-php» для подсветки ошибок в языке PHP.
5. Интеграция Git. Продвинутые программисты очень часто используют контроль версий, поэтому интеграция с этим сервисом важна для многих. Делается это при помощи добавления пакета «git-plus».
6. Для тех , кто любит редактор Vim. Те программисты, которые работали в редакторе Vim, часто в других редакторах пытаются добавлять его особенности. В Атом это сделать очень просто, нужно инсталлировать два пакета: «vim-mode-plus», «ex-mode».
7. Доработать программирование CSS. В частност и в Атом можно автоматизировать расстановку префиксов в CSS для разных браузеров, например: -webkit, -ms, и т. д. Как всегда , делается это простой установкой нужного пакета, а таким пакетом является «autoprefixer».
8. И др.

Заключение

Основная настройка Atom от GitHub для веб-разработки окончена. Но нужно понимать, что количество расширений у Атом а исчисляется тысячами, поэтому настроить этот редактор прямо под свои нужды сможет абсолютно любой разработчик, если постарается.

Atom от GitHub — это первоклассный , качественный, бесплатный редактор, который можно превратить в полноценную IDE.

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

Как пользоваться редактором 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, который отлично подойдет как для начинающих, так и для опытных веб-разработчиков. Надеюсь, что статья была для вас полезной, и теперь работа с этим редактором кода для вас не страшна. Спасибо за внимание!