Atom初心者が感動して泣いた超オススメな機能

#はじめに
今回は初心者が感動したAtomの超便利機能をいくつか紹介したいと思います。
と、言ってもこの記事は完全に個人的な目的で書こうと思ったものなので、参考になるかわかりませんが、興味のある方は是非ご覧ください。

この記事を書きたいがために、最初に書いてみた記事はこちら。
[初心者の初心者による初心者のためのAtom](https://qiita.com/honnuq/items/1922d4ec5b86ccbf99e2)

#一括でパッケージをインストールする方法
これから必要なパッケージをインストールする際に、パッケージ毎にインストールするのは大変ですよね...
そこでオススメするのは、コマンドラインで使える [apm](https://github.com/atom/apm) を使う事です！


順番が前後しますが、以下に紹介するパッケージはこちらに全てまとめてあります。

```packages.txt
autocomplete-paths
atom-html-preview
color-picker
emmet
maximize-panes
pigments
```

##使い方

1. 自分の欲しいパッケージを「packages.txt」として、適当な所に保存して下さい。
*紹介する全てのパッケージをインストールされる方は、上に記載してある`packages.txt`を使用してください。*
2. 保存が出来たら、コマンドラインを扱うソフトを起動します。
3. 起動したら「packages.txt」を保存したディレクトリに移動して以下のコマンドを実行して下さい。

```
apm install --packages-file packages.txt
```
これで「packages.txt」に書かれたパッケージを一括でインストールする事が出来ます。


#超オススメなパッケージ
###[autocomplete-paths](https://atom.io/packages/autocomplete-paths)
オートコンプリートにプロジェクト内のファイルパスを追加してくれるパッケージです。
![autocomplete-paths](https://qiita-image-store.s3.amazonaws.com/0/371794/ed18ff67-2a12-2d33-afb1-547aafb394bd.gif)

###[atom-html-preview](https://atom.io/packages/atom-html-preview)
リアルタイムでブラウザプレビュー機能を追加するパッケージです。ソースを変更するとリアルタイムで反映されるので、Atomとブラウザの更新・確認を行ったり来たりせずに済みます。
ただしブラウザに左右される属性などは表示されなかったりするので注意してください。
![atom-html-preview](https://qiita-image-store.s3.amazonaws.com/0/371794/8b51d547-1b2b-a521-5cc7-7ffbbd29859e.png "atom-html-preview")
###[color-picker](https://atom.io/packages/color-picker)
カラーピッカー機能を追加するパッケージです。
色コードの直感的な選択が出来ます。現在のカラーと選択中カラープレビューが違うので、とても分かりやすいです。
出力形式も選択出来るので、形式変換したい時にも便利です。
![color-picker](https://qiita-image-store.s3.amazonaws.com/0/371794/6eceaaa1-9428-9940-fb12-d6b3cd02c964.gif)
*解像度が低くなっています。ご了承ください。*

###[emmet](https://atom.io/packages/emmet)
HTMLやCSSのコーディングの簡略化入力が可能になるEmmetがAtomでも使うことができます。

###[maximize-panes](https://atom.io/packages/maximize-panes)
ペインを分けて編集している時に、「このペインをちょっと大きくしたい」なんて時はありませんか？
そんな時は大抵、境界をドラッグして、ペイン大きさを変えますが、少し面倒ですよね...
このパッケージを使えばその面倒な作業がなくなります。
ショートカットを押す事で現在作業しているペインを最大化する事が出来ます。

###[pigments](https://atom.io/packages/pigments)
色情報に関して様々な機能を提供してくれるパッケージ。
色コードをキャッチして、バックグラウンドにその色を付けてくれる機能です。
コードがどんな色なのかを見て、理解することが出来るので、とても便利です。
![pigments](https://qiita-image-store.s3.amazonaws.com/0/371794/ec869659-78d7-29f3-e25c-fbea138c1e2a.png "pigments")


###[open-on-github](https://atom.io/packages/open-on-github)
AtomはGitHub社が開発したテキストエディタです。
このパッケージはデフォルトでインストールされているコアパッケージです。
####open-on-githubのコマンド一覧
|コマンド|操作|
|:--|:--|
|Open on GitHub: Repository|github.com上のリポジトリを開く|
|Open on GitHub: File|github.com上のファイルを開く|
|Open on GitHub: Blame|github.com上のファイルのBlame Viewを開く|
|Open on GitHub: History|github.com上のファイルのHistory Viewを開く|
|Open on GitHub: Branch Compare|github.com上の現在のブランチの比較ページを開く|
|Open on GitHub: Copy Url| 現在選択している行番号を含んだgithub.comのURLをコピーする|

#超オススメなショートカット
###複数カーソル
文章内の任意の複数行に、1回で入力することができます。

|Mac|Windows|
|:--|:--|
|⌘+複数クリック|^ +複数クリック|

###行の複製
選択中の行を複製します。

|Mac|Windows|
|:--|:--|
|⌘⇧D|^⇧D|

上で紹介した複数カーソルを利用すると、複数の行を一度に複製することもできます。


###選択中の行を上または下へ移動
選択中の行を行の上または下に移動できます。

|Mac|Windows|
|:--|:--|
|⌘^↑または↓|^ ↑または↓|

###候補となる全ての文字を選択
このショートカットは、選択した文字の候補になる文字すべてを選択します。

|Mac|Windows|
|:--|:--|
|⌘^G|Alt+F3|



#最後に
ここまで読んでいただきありがとうございました。
わたしは今、Webサイトを制作しているのですが、そういった人には、特に感動するようなAtomの機能ではないでしょうか？
作っていただいた人に感謝ですね〜☺️