Atomの導入

# 導入日
2016/7/10
# インストール
[Atom公式サイト](https://atom.io/)からセットアップを入手しインストールする。
#### 【Windows】
　　１．「Download Windows Installer」をクリックしセットアップを入手。
　　２．入手したセットアップをダブルクリック。あっという間にインストール完了。
#### 【Linux】
　　TBD
#### 【MAC OS X】
　　１．「Download For　MAC」をクリックしZIPファイルを入手。
　　２．入手したZIPを解凍しdmgファイルをアプリケーションフォルダへ配置。
# パッケージのインストール方法
Atomを拡張するにはパッケージと呼ばれるプラグインを
インターネットからダウンロードしてインストールする。
このパッケージは種類が豊富。
例えば、Atomの日本語化も「japanese-menu」というパッケージをインストールする。
#### 手順
１．Atomを起動する
２．メニューバーにある[Help]→[WelComeGuide]をクリック
３．「Install a Package」をクリック
４．「Open Installer」をクリック
５．左側の上の方にフォームがあるのでそこに「パッケージ名」を入力
６．「Packages」をクリック
　　※ 曖昧でも検索に引っかかる。
  　　 例えば「japanese-menu」というパッケージ名でも「japanese」で引っかかる。
７．見つかったパッケージの「Install」をクリック
# 日本語化
パッケージ：「japanese-menu」をインストール。
# テーマ
メニューバーにある[ファイル(F)]→[環境設定]をクリック
　・インターフェーステーマ
　・シンタックステーマ
の２つで変更できる。
自分は真っ黒や真っ白は合わないので、
　・インターフェーステーマ：One Light
　・シンタックステーマ：Solarized Light
で運用を始めて見た。
# MarkDownプレビュー画面
MarkDownにデフォルトで対応しているようです。
## プレビュー画面の表示方法
#### 【Windows】
　　[Ctrl]+[Shift]+M
#### 【Linux】
　　TBD
#### 【MAC OS X】
　　control + shift + M
## 普通に改行する設定にする
マークダウンの改行は標準記法「半角スペース×2」。
慣れない。。。普通に一回の改行で改行するように設定変更。

1.Atom-環境設定を開く
2.左メニューのパッケージ選択
3.markdown-previewを探し、設定ボタンをクリックする
![wpatom03.jpg](https://qiita-image-store.s3.amazonaws.com/0/133593/652d43bf-6215-73e0-28f3-07f73a4bcac6.jpeg)

4.Break On Single Newlineにチェックを入れる
![wpatom04.jpg](https://qiita-image-store.s3.amazonaws.com/0/133593/e04d6d64-1c4c-4757-c2ba-5396fb4504e0.jpeg)
これでMarkdownで改行するとプレビューのほうでも改行してくれるようになる。
# 色々と設定
## タブ関連
メニューバーにある[ファイル(F)]→[環境設定]をクリック
タブ数、タブタイプ、ソフトタブに関してはしっかり設定。
タブが勝手にスペースに置き換えられるのが嫌な人は、タブタイプ=Hardが良いかも。
## エディタ内の縦線を消す
桁数の目安となる線でコレが出るエディタも多いですが・・・
要らない人には要らない。
![キャプチャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/133593/6056f610-f94c-cbfc-8f2f-7718fea57683.jpeg)
消し方は簡単。
デフォルトで導入されているPackageの「Wrap Guide」を無効化すれば消えます。
# パッケージ（個人的に利用しているモノ）
[file-icons](https://atom.io/packages/file-icons)
ツリーに表示されるファイルのアイコンを拡張子毎に綺麗にしてくれる。

[highlight-selected](https://atom.io/packages/highlight-selected)
選択した単語をハイライト表示してくれる。

[show-ideographic-space](https://atom.io/packages/show-ideographic-space)
全角スペースを□で表示してくれる。

[symbols-tree-view](https://atom.io/packages/symbols-tree-view)
プログラム開発で便利。エディタの右側に関数の一覧が出てクリックでジャンプする。
エディタ画面で右クリックで「Toggle Symbols-tree-view」メニューがあるのでクリック。

[color-picker](https://atom.io/packages/color-picker)
色の指定がめっちゃ楽。
エディタ画面で右クリックで「Color Picker」メニューがあるのでクリック。

[pigments](https://atom.io/packages/pigments)
色指定している箇所をその色でハイライトしてくれる。

[minimap](https://atom.io/packages/minimap)
右側にコード全体の位置がわかるマップが出る。設定で左側にも出せるみたい。
エディタ画面で右クリックで「Toggle Minimap」メニューがあるのでクリック。

[minimap-highlight-selected](https://atom.io/packages/minimap-highlight-selected)
highlight-selectedのハイライト表示をMinimapにも表示してくれる。

[project-manager](https://atom.io/packages/project-manager)
プロジェクトフォルダを記憶しリストからプロジェクト選択してプロジェクトを開くことが出来る。
　【Atomで言うプロジェクト（フォルダ）ってなに？】
　　　[プロジェクトフォルダってなに？](http://creating-homepage.com/archives/890)
　　　[プロジェクトフォルダを追加して表示](http://creating-homepage.com/archives/906)
　【project-managerの使い方】
　　　[登録＆呼び出し](http://creating-homepage.com/archives/1219)
　　　[削除](http://creating-homepage.com/archives/1239)

[autocomplete-paths](https://atom.io/packages/autocomplete-paths)
オートコンプリートにファイルやディレクトリも表示してくれる。

[imdone-atom](https://atom.io/packages/imdone-atom)
プロジェクト毎にタスクボードを追加できる。

[markdown-writer](https://atom.io/packages/markdown-writer)
キーバインディングの有効化は、
1. `Packages > Markdown Writer > Configurations > Create Default Keymaps`
2. `keymap.cson`が開き、一番下に、markdown用のキーバインディングが追加される
3. `Packages > Markdown Writer > Open Cheat Sheet`でmarkdownの記法と共にキーバインディングを確認できる

[markdown-scroll-sync](https://atom.io/packages/markdown-scroll-sync)
編集画面とプレビュー画面のスクロールを同期させる。
![68747470733a2f2f636c6f75642e67697468756275736572636f6e74656e742e636f6d2f6173736574732f3831313435352f31313331373235392f63356239623063322d386664632d313165352d386638352d6237646565666235323563352e676966.gif](https://qiita-image-store.s3.amazonaws.com/0/109898/eb50718f-5d83-1a3e-061e-65dc283c239a.gif)

[tool-bar-markdown-writer](https://atom.io/packages/tool-bar-markdown-writer)
便利なツールバーを表示してくれる。markdown-writerとtool-barが必須。
<img width="1094" alt="687474703a2f2f692e696d6775722e636f6d2f474b357a42314c2e706e67.png" src="https://qiita-image-store.s3.amazonaws.com/0/109898/e5226ae2-6fe8-f50d-9cb1-6eb53e855c63.png">
1. markdown-writerをインストール
2. tool-barをインストール
3. tool-bar-markdown-writerをインストール

[tool-bar](https://atom.io/packages/tool-bar)
tool-bar-markdown-writerの使用に必要となる。

[markdown-folder](https://atom.io/packages/markdown-folder)
項目を折りたたむことが出来る

[activate-power-mode](https://atom.io/packages/activate-power-mode)
ドカドカします。
![68747470733a2f2f636c6f75642e67697468756275736572636f6e74656e742e636f6d2f6173736574732f3638383431352f31313631353536352f31306631363435362d396336352d313165352d386166342d3236356630316663383361302e676966.gif](https://qiita-image-store.s3.amazonaws.com/0/109898/7b222d39-8046-9ea8-9f30-23456a968843.gif)

[git-time-machine](https://atom.io/packages/git-time-machine)
Gitのcommit 履歴をキレイにナビしてくれます。
![68747470733a2f2f7261772e67697468756275736572636f6e74656e742e636f6d2f6c6974746c656265652f6769742d74696d652d6d616368696e652f6d61737465722f7265736f75726365732f74696d656d616368696e652e676966.gif](https://qiita-image-store.s3.amazonaws.com/0/109898/6cb0cb81-7d33-4a38-2dae-b72163ba3021.gif)

# プログラミング関連設定
## プログラミング言語のコメント行のフォントと色を変更する
メニューバーにある[ファイル(F)]→[環境設定]をクリック
[テーマ]の中に"スタイルシート"のリンクがあるのでクリック
![キャプチャ.JPG](https://qiita-image-store.s3.amazonaws.com/0/133593/498e69bd-4cec-637c-9c2b-791985a42f01.jpeg)

すると「styles.less」というファイルが開かれるので以下のコードを追加する。

``` styles.less
atom-text-editor::shadow {
  .comment {
    font-style: normal;
    color: rgb(14, 182, 96);
  }
}
```
※ デフォルトだとコメント行がイタリックになっているのでノーマルに。
※ デフォルトだとコメント行が灰色になっているので適当な緑色に。