Работаем с GitHub из WebStorm

10.1 Клонирование репозитория

Помните, я рассказывал вам про 3 места хранения файлов? Удаленный репозиторий, локальный репозиторий и рабочая директория.

Так вот, сейчас нужно будет клонировать ваш удаленный репозиторий (который вы создали на GitHub) в ваш локальный репозиторий (репозиторий на вашем компьютере).

Поэтому запускайте WebStorm и начинаем…

Шаг 1. Закройте проект если он открыт. И нажмите Clone Repository

Шаг 2. Укажите url вашего удаленного репозитория, который вы хотите клонировать на компьютер.

Такой способ полезен, если вы клонируете чей-то репозиторий.

Если вы клонируете свой, будет проще залогиниться на GitHub через WebStorm:

Выбирите проект и жмите Clone

Шаг 3. Никому нельзя доверять. Даже себе.

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

Шаг 4. Стандартный антивирус в Windows предупреждает, что появились какие-то неизвестны файлы. Антивирус вообще не любит неизвестные ему программы.

НО! Мы собираемся эти самые программы создавать, поэтому просим IDE сказать антивирусу, чтобы он не блокировал ваши будущие программы. Кликайте по кнопке «Automatically», а потом — «YES».

10. 2 Первый коммит

Если вы клонировали свежесозданный репозиторий, он будет содержать только один файл — README.md

Шаг 1. Откройте файл README.md

Поменяйте этот файл так, как вам захочется: можете написать любое приветственное сообщение, или описание репозитория.

Шаг 2. После того как вы внесли изменения в файл, WebStorm отобразит его синим цветов в дереве файлов слева. Синим цветом отображаются все измененные файлы, если изменения в вашей рабочей директории еще не внесены в локальный репозиторий.

Шаг 3. Коммит

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

Для этого вам нужно кликнуть по кнопке Commit и отметить все файлы, изменения которых вы хотите внести в локальный репозиторий:

Шаг 4. И нажимаете кнопку Commit.

Шаг 5. Проверка

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

10.3 Работа с файлами

Шаг 1. Давайте создадим файл в WebStorm.

Мы же пишем HTML-код – пусть это будет main.html

Шаг 2. Добавляем файл в локальный репозиторий.

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

Если файл есть в вашей рабочей директории, но в локальном репозитории его нет, он помечается красным — как на картинке ниже:

В принципе вы всегда можете нажимать Add, но давайте в этот раз мы нажмем Cancel и потом добавим файл вручную, чтобы вы знали, как это делать.

Шаг 3. Пишем в файле ваш любимый код.

Я, например, написал: <h1>FIRST COMMIT</h1>

Шаг 4. Теперь давайте добавим наш файл main.html в локальный репозиторий.

Просто кликните в любом месте файла правой кнопкой мышки и выберите Git --> Add File

Если все прошло успешно, добавленный файл будет светиться зеленым:

Шаг 5. Дальше коммитим его по старой схеме:

10.4 Первый push

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

Шаг 1. Кликаем по кнопке Push.

На самом деле это сделать очень легко: вам просто нужно будет воспользоваться кнопкой Push в верхнем меню вашей IDE:

Шаг 2. Подтверждаем внесенные коммиты.

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

Шаг 3. Проверяем.

Если все прошло успешно, то вы увидите сообщение типа такого:

Шаг 4. А теперь открывайте ваш GitHub репозиторий и проверяйте:

Магия технологий!

10.5 Использование .gitignore-файлов

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

Шаг 1. Для начала создайте файл в каталоге проекта. Например, .txt файл с любым именем. После создания файла нажмите Cancel.

Шаг 2. Щелкните правой кнопкой мыши по созданому файлу hacky_fix_that_somehow_works.txt в окне "Project". Перейдите к Git --> Add to .gitignore --> Add to .gitignore. Эта опция добавляет выбранный файл в файл .gitignore в корне вашего проекта.

Шаг 3. Создайте .gitignore в вашем проекте. При создании репозитория мы не создавали файл .gitignore

WebStorm автоматически добавит имя файла hacky_fix_that_somehow_works.txt в ваш файл .gitignore.

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

Файл .gitignore влияет только на файлы, которые еще не были зафиксированы (закоммичены) в репозитории Git. Если файл уже был закоммичен, то для его игнорирования нужно сначала удалить его из репозитория.

Не забудьте закоммитить сам файл .gitignore в репозитории Git и отправить изменения на GitHub, чтобы все участники проекта использовали одинаковые правила игнорирования файлов.

Исключение локальных файлов .git/info/exclude

Помимо файла .gitignore , который используется для исключения файлов для всех пользователей проекта, Git предоставляет возможность создавать локальные правила игнорирования .git/info/exclude, которые не будут зафиксированы в репозитории и будут действовать только для вашей локальной копии проекта.

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

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

Правила для .gitignore

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

Пустые строки игнорируются. Чтобы добавить комментарий, начните строку с символа #.

Шаблоны:

• * - заменяет любое количество любых символов. Например, *.log игнорирует все файлы с расширением .log.
• ? - заменяет один любой символ. Например, temp?.txt игнорирует файлы temp1.txt, temp2.txt и т.д.
• [] - указывает диапазон символов. Например, [abc] соответствует любому из символов a, b или c.
• ! - исключает файлы, соответствующие шаблону. Например, !important.txt будет отслеживать файл important.txt, даже если есть правило *.txt.
• / - в начале шаблона указывает на корень репозитория. /temp/ игнорирует папку temp в корне репозитория.
• ** - соответствует любому количеству вложенных папок. Например, **/temp игнорирует папки temp на любом уровне вложенности.

Пример файла

# Логи
logs/*
*.log

# Папки, создаваемые WebStorm
.idea/
*.iml

# Временные файлы
*.tmp
*.swp
*~

# Файлы, создаваемые при сборке проекта
dist/
build/

# Зависимости
node_modules/
bower_components/

# Файлы конфигурации
.eslintrc.js
.prettierrc.js

# Тестовые данные
coverage/
cypress/screenshots/
cypress/videos/

Готовые шаблоны

1. Коллекция .gitignore для разных языков программирования и сред разработки: https://github.com/github/gitignore
2. gitignore.io - веб-сервис, призванный помочь создавать файлы .gitignore