AtomエディタとGitHub連携 – ターミナルを使わない設定方法のメモ 【JavaScript入門】

AtomGitPush

Atomエディタを使って作業しているときに「ターミナル使わずに、そのままGitHubに連携できないかな?」という時の設定方法と便利なパッケージについてメモです。

AtomエディタとGitHub連携のメリット

AtomエディタでGitHub連携するメリットです。

  • Atomエディタだけで作業できる → ターミナルを起動しなくていい
  • Gitコマンドいらず → プラグインで使うこともできる

Atomエディタについてはこちらの記事を参考ください。

AtomとGitHub連携方法

実際にAtomエディタでGitHubと連携する設定と手段について触れていきます。

GitHubアカウントをまだ作成していない方はこちらの記事を参考ください。

AtomエディタでGitHub設定

Atomエディタを開きます。

1. [Cmd] +  [Shift] + [P] キーを押して、コマンドパレット表示

2. 検索で “GitHub: Toggle GitHub Tab” と入力し、[Enter]キーを押します。

`Loginボタン` を押します。

GitHubトークンの生成&入力

AtomのGitHubタブで表示される”2ステップ”でトークンを設定していきます。

ステップ1

  1. https://github.atom.io/login にアクセスします。 
  2. そのままGitHubにログインします。
  3. [Authorize atom] ボタンを押します。

トークンが生成されます。

ステップ2

  1. 生成されたトークンをコピーします。
  2. Atomエディタに戻り、STEP2のボックスにトークンをペーストします。
  3. [Login] ボタン を押します。

これでAtomとGitHubが連携できました!

AtomからGitHubのリモートリポジトリをクローンする方法

AtomからGitHubのリモートリポジトリをクローンする方法です。

すでにローカル環境にクローンされている場合は読み飛ばしてください。

GitHubでリポジトリURLをコピー

GitHubからクローンしたい”リポジトリURL”をコピーします。

Atomエディタでクローン実行【git clone】

Atomエディタを起動します。

  1. [Cmd] +  [shift] + [P] キーを押してコマンドパレット表示。
  2.  github: Clone] を実行します。
  3. [clone from: ] コピーしたURLを入力
  4. [To directory: ]  クローンしたいローカル環境の場所を”パス”で指定。
  5. Cloneを実行。

これでリモートリポジトリが、ローカル環境にクローンされます。

AtomのGitHubタブの使い方

Atomエディタの標準で使えるGit機能です。

  • プッシュ(Git Push)
    ローカルリポジトリの内容をリモートリポジトリにアップロードする
  • プルリクエスト(pull request)
    ローカルリポジトリでの変更を他の開発者に通知する

後述の“パッケージ”を使えば、もっとGitの機能が使えます。

実際のGitHubタブでの作業手順例

下記は実際のAtomエディタ GitHubタブからGit作業する時の例となります。

ここではプルリク用のブランチが作成されているものとします。
まだの方は、下部メニューからブランチアイコンを押し `Create Branch`でブランチ作成/切り替えしておきます。

  1. ファイルを変更します。
  2. 「Unstaged Changes」に未ステージのファイルがリストアップされます。
  3. ステージしたいファイルを選択し
    「Stage All」を押すと
    「Staged Changes」に移動します。
  4. “Commit Message” にコメントを記入して、[Commit] ボタンを押す。
  5. 下部メニューの [⬆︎PUSHアイコン(1)] のように数字が追加されます。
  6. [Push] を押すと [Fetch] [Pull] [Push] が出てきて選択するとプッシュが実行されます。

GitHubを開いて確認すると、Pushされていることがわかります。

便利なGit関連パッケージ

AtomエディタにGit関連のパッケージを設定すると、標準以外のGit機能も使えるようになり便利です。

gitコマンド使わないパッケージ

git-control

https://atom.io/packages/git-control

gitコマンドを使わずにコミットできる、GUIライクなコントロールパネルのパッケージ。

  • コマンドパレットから: [Git Control: Toggle]
  • ショートカット: [Ctrl] + [Alt] + [O] , [Ctrl] + [Alt] + [C]

git-history

https://atom.io/packages/git-history

バージョンの比較ができます。変更箇所の前後を確認できるパッケージ。

  • ショートカット:  [Ctrl] + [Alt] + [O] , [Ctrl] + [Alt] + [H] , [Ctrl] + [Alt] + [J]

gitコマンドを使うパッケージ

platformio-ide-terminal

https://atom.io/packages/platformio-ide-terminal

Atomエディタの中で、ターミナルを表示して操作できるパッケージ。

  • ショートカット:  [Control] + [Shift] + [@]

git-plus

https://atom.io/packages/git-plus

Gitコマンドがコマンドパレットで一通り使えるパッケージ。

  • パレットを開く:[Cmd] + [Shift] + [H]

まとめ

Atomエディタを使って作業しているときに「ターミナル使わずに、そのままGitHubに連携できないかな?」という時の設定方法と便利なパッケージについてメモでした。

あわせて読みたい記事

エンジニアの転職

あわせて読みたい書籍

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA