IntelliJの使い方


購入したので、使い方をメモしていきます。
随時更新します。
(ruby,php,javascriptで利用)

[2016/04/18時点で和書は存在しない模様](http://www.amazon.co.jp/s/ref=nb_sb_noss_2?__mk_ja_JP=%E3%82%AB%E3%82%BF%E3%82%AB%E3%83%8A&url=search-alias%3Daps&field-keywords=IntelliJ)
（´-`）.｡oO（兄貴よろぴく）

## 画面を分割
[参考記事](http://increment-log.com/webstorm-edit-split/)

#### 画面分割の基本
メニューバーの「Window > Editor Tabs」内にある「Split Vertically」と「Split Horizontally」で縦横に分割出来ます。

- 「Split Vertically」で縦分割
- 「Split Horizontally」で横分割

#### 画面分割その他
メニューバーの「Window > Editor Tabs」内には、分割に関わるその他のコマンドもあります。それぞれ、
「Change Splitter Orientation」で分割の方向を縦/横に変更

- 「Un split」でアクティブなエディタタブ（ウィンドウ）の分割を解除
- 「Un split All」で全てのエディタタブの分割を解除
- 「Goto Next Splitter」で次のエディタタブをアクティブに
- 「Goto Previous Splitter」で前のエディタタブをアクティブに

ちなみに、`cmd + shift + a`でIntelliJのアクションにアクセスできます。
`cmd + shift + a` でアクション検索窓を開いて `split`とか入力すると画面分割にアクセスできます。

## Git、LocalHistory
[参考記事](http://qiita.com/yoppe/items/fd03607d4d4f191d32dd)
[個人的にチェンジリストが秀逸だと思う(UMLで対象ファイル選択)](http://qiita.com/yoppe/items/fd03607d4d4f191d32dd#%E3%83%81%E3%82%A7%E3%83%B3%E3%82%B8%E3%83%AA%E3%82%B9%E3%83%88%E3%82%92%E4%BD%BF%E3%81%A3%E3%81%9F%E5%A4%89%E6%9B%B4%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%81%AE%E7%AE%A1%E7%90%86)
[Anotateで犯人探しも出来る](http://qiita.com/yoppe/items/fd03607d4d4f191d32dd#annotate%E6%A9%9F%E8%83%BD)
[ファイル上からセクション単位でリバート出来る](http://qiita.com/yoppe/items/fd03607d4d4f191d32dd#%E3%81%9D%E3%81%AE%E4%BB%96)

対象ファイル上にて`ctrl + v`で、バージョンコントロール関連のダイアログが表示されます。

### LocalHistoryに感動
Gitの場合、diffの比較を行うときは対象のリビジョンを２つ選択してクリック->差分を表示、という流れかと思います。
LocalHistoryの場合、`対象ファイル上で右クリック->Local History -> Show History`で出てきた該当ファイルの変更履歴一覧を「カーソルを移動するだけで」差分を確認することが出来ます。
(個人的にはGitの履歴も同様のインターフェースにして欲しい)

IDE使うのが初めてだからかもしれませんが、そこそこの時間短縮、なによりサクサク確認できるのでストレスがありません。
（Netbeans使ってる人も同じような事やってた気がする）

なお、LocalHistoryはGitではなくIDEの機能なため、変更履歴の単位がステージングやコミットではなく、もっと細かいです（雑ですみません）

`Show History`で変更履歴のダイアログが立ち上がった後、対象履歴を右クリックで`revert`にアクセスする事も可能です。

### PutLabel
LocalHistoryの機能ですが、前述の通り変更単位が細かすぎて、目的の変更履歴にたどり着くのが至難の技状態です。

そんなときは、`対象ファイル上で右クリック->Local History -> Put Label`で現在の変更履歴位置に「ラベル」を付けられます。
(`ctrl + v`から選択出来る)

こんな感じ↓ (test,test2がラベルです)
![スクリーンショット 2016-04-19 22.50.34.png](https://qiita-image-store.s3.amazonaws.com/0/36492/d7cdff64-8d0a-74c0-e6d9-18dc066d0066.png "スクリーンショット 2016-04-19 22.50.34.png")


## 初期設定
[参考記事①](http://isann.blog2.fc2.com/blog-entry-304.html)
[参考記事②（AndroidStudio）](http://gihyo.jp/dev/serial/01/android_studio/0009?page=1)

基本的には、Preferenceの左上検索窓で探せば見つかる。
`cmd + ,`でPreference起動

### 共通
- 行番号を表示  
`preference -> Editor -> General -> Appearance -> Show line numbers`
- 空白を可視化  
`preference -> Editor -> General -> Appearance -> Show whitespaces`
- メソッドセパレータを表示(メソッドの境界線)  
`preference -> Editor -> General -> Appearance -> Show method separators`
- インデントの補助線  
`preference -> Editor -> General -> Appearance -> Show vertical indent guides`
- 1行の最大文字数を変更（リーダブルコードでは80文字を推奨しているが、デフォルトは120文字）  
`preference -> Editor -> CodeStyle -> Default Options -> Right margin columns`  
- 範囲選択している際に、クォーテーションで囲う(SublimeText使いは必見)  
`preference -> Editor -> General -> Smart Keys -> Surround selection on typing quote or brace`
- tabのファイル拡張子を非表示(要らないかも)  
`preference -> Editor -> General -> Editor Tabs -> Hide file extension in editor tabs`
- tabに編集したかアイコン表示(要らないかも)  
`preference -> Editor -> General -> Editor Tabs ->Mark modified tabs with asterisk`

### Javascript
今のところ、下記項目をカスタマイズ
（[Google Javascript Style Guide](https://google.github.io/styleguide/javascriptguide.xml)と[Airbnb Javascript Style Guide (ES5編)](https://github.com/airbnb/javascript)を参考にしています。随時修正）

コードスタイルを変更する際、右側にプレビューが付いているので、確認しながら設定出来ます。

- ES6の構文サポートを有効にする(嬉C)  
`preference -> Languages&Frameworks -> JavaScript -> Jvascript Language Version`から`ECMAScript 6`を選択
- タブ・インデント系  
`preference -> Editor -> CodeStyle -> Javascript -> Tabs and indents` 
- 最大の改行数（デフォルトは2だが、1に修正）  
`preference -> Editor -> CodeStyle -> Javascript -> Blank Lines` 
- 変数定義の整列（オブジェクトプロパティはバグの元になるのでデフォルトの整列しない設定）  
`preference -> Editor -> CodeStyle -> Javascript -> Other -> Align multiple 'var' statements and assignments` 
- コメントの水平位置（デフォルトはインデント無し）  
`preference -> Editor -> CodeStyle -> Javascript -> Wrapping and Braces -> Keep when reformating -> Comment at first column` 
- 関数定義時の引数折り返し（デフォルトは折り返し無し）  
`preference -> Editor -> CodeStyle -> Javascript -> Wrapping and Braces -> Function decration paramters` 
	- wrap if longを選択
	- Align when multilineをチェック
	- place '(' on new lineをチェック外す 
- 関数呼び出し時の引数折り返し（デフォルトは折り返し無し）  
`preference -> Editor -> CodeStyle -> Javascript -> Wrapping and Braces -> Function decration paramters` 
	- wrap if longを選択
	- Align when multilineをチェック 
- メソッドチェーンの折り返し（デフォルトは折り返し無し）  
`preference -> Editor -> CodeStyle -> Javascript -> Wrapping and Braces -> chained method calls` 
	- wrap if longを選択
	- '.'on new lineをチェック外す
- 四則演算の折り返し（デフォルトは折り返し無し）  
`preference -> Editor -> CodeStyle -> Javascript -> Wrapping and Braces -> Binary expressions` 
	- wrap if longを選択
	- Align mutilineをチェック（直近兄弟式の左端に揃える）
- 変数定義の折り返し（デフォルトは折り返し無し）  
`preference -> Editor -> CodeStyle -> Javascript -> Wrapping and Braces -> Asignment statement` 
	- wrap if longを選択
- 3項演算子の折り返し（デフォルトは折り返し無し）  
`preference -> Editor -> CodeStyle -> Javascript -> Wrapping and Braces -> Ternary operation` 
	- chop down if longを選択
	- Align mutilineをチェック
- 配列定義の折り返し（デフォルトは折り返し無し）  
`preference -> Editor -> CodeStyle -> Javascript -> Wrapping and Braces -> Array initializer` 
	- chop down if longを選択
	- Align mutilineをチェック
	- new line after '['をチェック
	- place ']' on new lineをチェック


ちなみに、下記から設定をxmlなどの形式でエクスポート・インポート出来る。
`preference -> Editor -> CodeStyle -> Javascript -> Manage` 

## ショートカット
[参考記事1](http://isann.blog2.fc2.com/blog-entry-304.html)
[参考記事2](http://www.happyquality.com/2012/06/14/2316.htm)

### 検索系
- 何でも検索  
`shift * 2`
- 最近開いたファイル  
`cmd + e`
- IntteliJのアクション検索（メニューとかにあるアクションにアクセス）
`cmd + shit + a`

### 移動系
- 選択行の上下移動  
`opt + shift + ↑ or ↓`
- タブの移動  
`cmd + shift + [ or ]`
- エディタ内ウィンドウ移動  
`opt + tab`
- エディタ内の上下移動   
`fn + ↑ or ↓`
- 行移動  
`cmd + l`で行番号指定
- 宣言にジャンプ  
`cmd + b`
- クラスにジャンプ  
`cmd + opt + b`
- 変数が利用されている箇所にジャンプ  
`cmd + opt + fn + f7`
- クラス、メソッド、関数の情報を表示  
該当コード上に`cmd`を押しながらカーソルを合わせる

### 編集系
- インデントを下げる  
`tab`
- インデントを上げる  
`shift + tab`
- 行の複製  
`cmd + d`
- 新しい行の追加  
`shift + return`
- 処理を戻す  
`cmd + z`
- 処理を進める（戻すのを戻す）  
`cmd + shift + z`
- コードフォーマット  
`cmd + opt + l`
- 現在いるステートメントを最適化  
`cmd + shift + return`
- インデントを正しい位置に修正  
`ctrl + opt + i`
- クイック編集(解決方法の提供箇所)  
`opt + return`
- 変数・関数のリネーム  
`shift + fn + f6`
- 宣言を作成  
`cmd + opt + v`
- 関数・メソッドに切り出す  
`cmd + opt m`
- クリップボード履歴から貼付け  
`cmd + shift + v`
- 選択範囲を制御構文で囲む（tagやifなど）  
`cmd + opt +t`
- テンプレートを入力  
`cmd + j`
- //コメントアウト  
`cmd + /`
- /**/コメントアウト  
`ctrl + shift + /`

### 選択系
- マルチカーソル  
`ctrl + g`
- カーソルのある行を選択（もっと適切なやつあるかも）  
`opt + ↑`
- 選択範囲の拡大、縮小  
`opt + ↑ or ↓`

### その他
- 問題の解決策を表示  
`opt + return`
- クラスの継承関係を参照  
`cmd + h`
- メソッドのオーバーライド状況など  
`cmd + opt + h`
- プロジェクトツリーを展開  
`cmd + 1`(エディタに戻るときは`esc`)
- ストラクチャツリーを展開  
`cmd + 7`
- 開くブラウザの選択  
`opt + fn + f2`
- ファイル/ディレクトリ作成  
 1. `cmd + 1`でプロジェクトツリーに移動
 2. 該当箇所にハイライトを合わせて`cmd + n`でアクション選択
- フォントの拡大縮小  
Macの場合は2本指でピンチするだけ
- 特定拡張子にシンタックスを追加(*.capファイルにRubyシンタックスを当てるなど)
 1. `cmd + shift + a`でアクションウィンドウを表示
 2. `Recognized File Types`を入力
 3. 右ウィンドウから言語を選択して、拡張子を追加する

## keymapカスタマイズ
下記のショートカットを追加しました。

ショートカットは下記からアクセス出来ます。
`Preferences -> Keymap`
なお、Keymapはアクション名orアクション（キーボードで入力）で検索可能です。

- `cmd + ↓` セクション毎にページを降下（PageDown）
- `cmd + ↑` セクション毎にページを上昇（PageUp）
- `ctrl + l` カーソル行選択（Select Line at Caret）
- `cmd + ]` インデントを追加に移動（Tab）※元のアクションは削除
- `cmd + [` インデントを削除（Unindent Line or Section）※元のアクションは削除
- `cmd + opt + ←` 左のタブに移動（Select Previous Tab）
- `cmd + opt + →` 右のタブに移動（Select Next Tab）