備忘録：Atom


Atomの設定とかまったりのんびりまとめる

* Windows 7
    * 2015-07-03：v1.0.1 をインストール
    * 2015-11-12：v1.1.0 にアップデート

GitHub製テキストエディタ：[Atom](https://atom.io/)
* Atomは Chromium[^1] で作られている
* 見た目はスタイルシート（LESS[^2]）で変更可能

[^1]: [Chromium - Wikipedia](https://ja.wikipedia.org/wiki/Chromium)
[^2]: [LESS - Wikipedia](https://ja.wikipedia.org/wiki/LESS)



## コマンド
* **`Ctrl + Shift + P`** で「コマンドパレット」が表示される
* キーバインド操作と同様のことをコマンドパレットからの入力でも操作可能
* 大抵のコマンドはキーバインド項目にある各表の「Command」欄に記載する

| コマンド | 内容 |
|:---------:|:-----|
| setting | 設定画面を開く |

## キーバインド
※Command欄は「コマンドパレット（`Ctrl + Shift + P`）」に入力するコマンド内容

| 分類 | 内容 | Windows7 | Mac | Command |
|:---- |:----- |:----------- |:---- | :----------- |
| 表示 | コマンドパレットを表示 | Ctrl + Shift + P | Cmd + Shift + P | command palette:toggle |
| 表示 | 設定画面を開く | Ctrl + ,（カンマ）| Cmd + , | 以下、どれでも開いた<br>1) setting<br>2) application:show settings<br>3) settings view: Open |
| 表示 | エディタ側とツリー・ビュー側とでフォーカスを切り替える | Alt + \ | Option + \ | ... |
| 表示 | Markdownのプレビューを表示 | Ctrl + Shift + M | Cmd + Shift + M | markdown preview:toggle |
| 表示 | デベロッパーツールを表示 | Alt + Ctrl + I | Option + Cmd + I | ... |
| ツリー | プロジェクトディレクトリを追加 | Alt + Ctrl + O | ... | ... |
| ツリー | ツリー・ビューを開く／閉じる | Ctrl + \ | Cmd + ¥ | ... |
| 編集 | ファイルのフルパスをコピーする | Ctrl + Shift + C | ... | ... |
| 編集 | コメントイン・アウト | Ctrl + / | Cmd + / | ... |
| 編集 | 指定行に移動 | Ctrl + G | Cmd + G | ... |
| 編集 | 表示フォントの大きさをリセット | Ctrl + 0（ゼロ） | Cmd + 0 | ... |

### ペイン操作

| 内容 | Windows7 | Mac | Command |
|:---- |:------------ |:---- | :---------- |
| ペインを閉じる | Ctrl + Shift + C | ... | pane: close |
| 上にスプリット | Ctrl + K Up（↑） | Cmd + k Up | pane:split up |
| 下にスプリット | Ctrl + K Down（↓） | Cmd + k Down | pane:split down |
| 右にスプリット | Ctrl + K Right（→） | Cmd + k Right | pane:split right |
| 左にスプリット | Ctrl + K Left（←） | Cmd + k Left | pane:split left |
| 次のペインに移動 | Ctrl + K,  Ctrl + N | Cmd + K, Cmd + N | window:focus next pane |
| 前のペインに移動 | Ctrl + K,  Ctrl + P | Cmd + K, Cmd + P | window:focus previous pane |
| 上のペインに移動 | Ctrl + K,  Ctrl + Up（↑） | Cmd + K, Cmd + Up | window:focus pane above |
| 下のペインに移動 | Ctrl + K,  Ctrl + Down（↓） | Cmd + K, Cmd + Down | window:focus pane below |
| 右のペインに移動 | Ctrl + K,  Ctrl + Right（→） | Cmd + K, Cmd + Right | window:focus pane on left |
| 左のペインに移動 | Ctrl + K,  Ctrl + Left（←） | Cmd + K, Cmd + Left | window:focus pane on right |


## Core Packages

### 1. Whitespace

空白、空行関連

*Confirmation version.1.1.0 / win7*

1. メニューの「File > Settings（Ctrl + ,（Comma））」で設定画面を開く
2. Packages > Installed Packages に「Whitespace」と入力しパッケージを検索
3. Packages > Core Packages に表示されるパッケージ「Whitespace」の「Settings」を押下

#### 1-0. 設定内容

| No | 表示項目 | 機能 | Default | 個人設定 |
| :--: | :-------- | :---- | :----------: | :--------: |
| 1 | Ensure Single Trailing Newline | 文末の余分な空行を自動削除<br>末尾が改行で終わっていない場合は改行を追加 | ON | OFF |
| 2 | Ignore Whitespace On Current Line | カーソル行の空白は削除しない | ON | ON |
| 3 | Ignore Whitespace Only Lines | 空行の空白は削除しない | ON | ON |
| 4 | Keep Markdown Line Break Whitespace | ... | ON/OFF | ON |
| 5 | Remove Trailing Whitespace | 行末の空白を自動削除 | ON | ON |

<!--| # | ... | ... | ON/OFF | ... |-->

#### 1-1. 文末の余分な空行を自動削除させない

※No.1「Ensure Single Trailing Newline」に対する設定

Atomエディタには文末に余分な空行があった場合[^Whitespace1]に自動で削除される仕様になっているらしいのだが、ぶっちゃけこれいらないのでその機能をきる。

この機能を実現しているのが Core Packages としてインストールされている「Whitespace」らしく、その設定を変更することで自動削除を無効化することができる。

*Confirmation version.1.1.0 / win7*

1. メニューの「File > Settings（Ctrl + ,（Comma））」で設定画面を開く
2. Packages > Installed Packages に「Whitespace」と入力しパッケージを検索
3. Packages > Core Packages に表示されるパッケージ「Whitespace」の「Settings」を押下
4. Whitespace > Settings にある「Ensure Single Trailing Newline」のチェックを外す

#### 1-2. 文末の余分な空白を自動削除させない

※No.5「Remove Trailing Whitespace」に対する設定

*Confirmation version.1.1.0 / win7*

1. メニューの「File > Settings（Ctrl + ,（Comma））」で設定画面を開く
2. Packages > Installed Packages に「Whitespace」と入力しパッケージを検索
3. Packages > Core Packages に表示されるパッケージ「Whitespace」の「Settings」を押下
4. Whitespace > Settings にある「Remove Trailing Whitespace」のチェックを外す


[^Whitespace1]: 正確には空行が２行以上あった場合、１行を残して他空行が削除される


### 2. markdown-preview

Markdown形式ファイルのPreview機能

*Confirmation version.1.1.0 / win7*

1. メニューの「File > Settings（Ctrl + ,（Comma））」で設定画面を開く
2. Packages > Installed Packages に「markdown-preview」と入力しパッケージを検索
3. Packages > Core Packages に表示されるパッケージ「markdown-preview」の「Settings」を押下

#### 2-0. 設定内容

| No |大項目 | 表示項目 | 機能 | Default | 個人設定 |
| :--: | :---: | :-------- | :---- | :------: | :--------: |
| 1 | Settings | Break On Single Newline | ... | OFF | OFF |
| 2 | Settings | Live Update | ... | ON | ON |
| 3 | Settings | Open Preview In Split Pane | プレビューを分割画面で開く | ON | ON |
| 4 | Settings | Use GitHub.com style | GitHub.comスタイルを使用 | OFF | OFF |
| 5 | Keybindings | Enamle | ... | ON | ON |
| 6 | Customize | Use GitHub.com style | GitHub.comスタイルを使用 | ON | OFF |


#### 2-1. プレビューのフォントを変更

プレビューで表示される漢字が日本語っぽくないので変更する。

*Confirmation version.1.1.0 / win7*

1. 「Style.less」を開く
    * パターン１
        1. メニューの「File > Settings（Ctrl + ,（Comma））」で設定画面を開く
        2. Themes > Choose a Theme に「(?マークのアイコン)You can also style Atom by editing your stylesheet」という一文があるので、その文のリンク文字になっている「your stylesheet」を押下
        3. 「Style.less」がAtom上に開かれる
    * パターン２
        1. メニューの「File > Open Your Stylesheet」で「Style.less」を開く  
2. 下記内容を追記する  

```css
@fontfamily:  'Migu 1M','メイリオ','Arial';
.markdown-preview.markdown-preview {
  font-family: @fontfamily;
}
```

※`@fontfamily` は日本語が扱えるものならなんでも良い。


<!--
![Settings_markdown-preview02B.PNG](https://qiita-image-store.s3.amazonaws.com/0/50632/1397ebc5-aef5-4e77-9c83-cf441b4ea414.png)
![Settings_markdown-preview03.PNG](https://qiita-image-store.s3.amazonaws.com/0/50632/392a34e2-9b3c-7c13-9983-f206106f0327.png)
-->


### 3. tabs

タブを開く際の挙動設定

*Confirmation version.1.1.0 / win7*

1. メニューの「File > Settings（Ctrl + ,（Comma））」で設定画面を開く
2. Packages > Installed Packages に「tabs」と入力しパッケージを検索
3. Packages > Core Packages に表示されるパッケージ「tabs」の「Settings」を押下

#### 3-0. 設定内容

| No | 表示項目 | 機能 | Default | 個人設定 | 備考 |
| :-: | :-------- | :---- | :------: | :-------: | :--- |
| 1 | Always Show Tab Bar | 常にタブバーを表示 | ON | ON | ... |
| 2 | Enable VCS Coloring | VCSカラーリングを有効にする | OFF | OFF | ... |
| 3 | Show Icons | アイコン表示 | ON | ON | ... |
| 4 | Tab Scrolling | タブのスクロール | OFF | OFF | ... |
| 5 | Use Preview Tabs | プレビュータブの使用 | OFF | ON | ［ON］ダブルクリックしているか、その内容が変更されている場合は別のタブで表示される。 |


## Install Packages

### 1. [sync-settings](https://atom.io/packages/sync-settings)

*Confirmation version.1.1.0 / win7*

Atomの設定他、下記内容をGithubと同期する。
* Atomの設定
* キーマップ
* ユーザースタイル
* initスクリプト
* スニペット
* インストールされたパッケージ

GitHub のアカウント必須。

＜ Update History＞

| 日付 | Version | 備考 |
| :---: | :------- | :--- |
| 2015-11-12 | 0.6.0 | インストール |


### 2. [file-icons](https://atom.io/packages/file-icons)

*Confirmation version.1.1.0 / win7*

拡張子に応じてファイルのアイコンを変更してくれる。

＜Update History＞

| 日付 | Version | 備考 |
| :---: | :------- | :--- |
| 2015-11-13 | 1.6.11 | インストール |
| 2015-11-20 | 1.6.12 | ... |



## 入れて試してみたい Package

### [linter](https://atom.io/packages/linter)
* 静的コード解析パッケージ
* これ単体では何もしない。各言語用の linter パッケージを入れる必要がある。

### [script](https://atom.io/packages/script)

* 開いてるファイルや選択したコードを実行し、結果を表示してくれるらしい

### [term2](https://atom.io/packages/term2)

* ターミナルをAtomのタブで開ける
* シェルの設定とか環境変数は引き継いでくれるらしい