vscodeがいい感じになる設定を継ぎ足していく（俺流vscode秘伝のタレ）

Macユーザーです。


# 見た目編

## テーマ
[Cobalt2 Theme Official](https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2)
<img src="https://qiita-image-store.s3.amazonaws.com/0/55003/f89054d7-efe6-7aa8-8df4-d0b2ee6b5f6e.png" width=600>


## icon
シンプルでフォルダが色分けで出ているのが非常に良い
[Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
<img width="239" alt="ss 2018-11-06 0.24.30.png" src="https://qiita-image-store.s3.amazonaws.com/0/55003/a170938b-c45b-b564-312b-1c3952fe8302.png">

# 設定編

## タブ切り替えをchromeと同じにする
ショートカットキーの設定画面（ctrl+K → ctrl+S）を開き、以下のキーワードで絞り込んでキー設定する。

| キーワード | ユーザー設定 |
| :--- | :----- |
|次のエディターを開く workbench.action.nextEditor| ctrl+tab |
|以前のエディターを開く workbench.action.previousEditor | ctrl+shift+tab |

参考：https://kantaro-cgi.com/blog/tool/vscode_tabmovekey_like_chrome.html

## 常に新しいエディタに開く

これをやっておくと、左のサイドバーでファイルをクリックした際にどんどん新規タブの追加でファイルを開いてくれるようになる。タブを閉じる癖がない人だと、タブが増えやすくなるので注意が必要。

| 操作 | 設定 |
| :--- | :----- |
|// 開かれるエディターをプレビュー として表示するかどうかを制御します。|  "workbench.editor.enablePreview": false |
|// Quick Open で開いたエディター をプレビューとして表示するかどうかを制御します。|  "workbench.editor.enablePreviewFromQuickOpen": false |

参考：http://www.atmarkit.co.jp/ait/articles/1806/15/news026.html

## プラグイン

- [Clock in status bar](https://marketplace.visualstudio.com/items?itemName=Compulim.vscode-clock)

ステータスバーに時計が表示される
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55003/528e2db7-4208-2329-7668-742ab57e7708.png" width="300">


- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)

あんまり使ってないかも。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55003/1b6e6c32-57e4-cfbc-fc2d-78ca79158fc7.png" width="300">

- [fish-ide](https://marketplace.visualstudio.com/items?itemName=lunaryorn.fish-ide)


- [guides](https://marketplace.visualstudio.com/items?itemName=spywhere.guides)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55003/9d6cebee-ca97-a42e-2b1c-73b259296d89.png" width="300">

- [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css) 
- [Instant Markdown dbankier.vscode-instant-markdown](https://marketplace.visualstudio.com/items?itemName=dbankier.vscode-instant-markdown)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55003/9cacbd1f-abba-8809-8642-854971f22715.png" width="500">

- [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
Japanese Language Pack は VS Code にローカライズされた UI を提供します。

- [ruby-rubocop](https://marketplace.visualstudio.com/items?itemName=misogi.ruby-rubocop)
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55003/5659a361-d8dd-6ac8-b18a-a200911a867d.png" width="500">
ローカルでrubocopの指摘が表示される。

- [VS Live Share](https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare) 

ペアプロ/モブプロが捗る
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55003/d6a2f2dd-7072-87e9-65c4-666d9fa9d6e3.png" width="200">


- [vscode-gemfile](https://marketplace.visualstudio.com/items?itemName=bung87.vscode-gemfile)

マウスホバーでgemfileを表示してくれる
<img src="https://qiita-image-store.s3.amazonaws.com/0/55003/40b67a06-56dd-b7c6-2516-cdaaf0c490a6.png" width=300>


- [Shortcuts](https://marketplace.visualstudio.com/items?itemName=gizak.shortcuts)

画面左下のバーにショートカットを作れる。メソッド検索を開いたりなど。ショートカットキーを覚えたらほとんど使わないかも。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55003/57733e8e-0047-654e-99a4-c6b4b04cd237.png" width=300>


- [Terminal](https://marketplace.visualstudio.com/items?itemName=Tyriar.terminal-tabs)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/55003/d58909d2-8186-0e8f-a30b-95c6e0d5205c.png)


- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
![image.png](https://qiita-image-store.s3.amazonaws.com/0/55003/7ba2200a-2391-a226-9222-c82daf0ae7fc.png)

- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)

対応するカッコを色でわかりやすく表示してくれる
![image.png](https://qiita-image-store.s3.amazonaws.com/0/55003/0dda13b5-dbaf-a7ed-ae69-323dfc3616e2.png)


#### git系
- [Git Blame](https://marketplace.visualstudio.com/items?itemName=waderyan.gitblame)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55003/0b9558d5-1c08-6baf-b180-3564be0680cb.png" width=300>

- [Git History Diff](https://marketplace.visualstudio.com/items?itemName=huizhou.githd)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55003/ebacfba0-df5f-b386-2039-ab2d5b2da04a.png" width=300>

- [Git Project Manager](https://marketplace.visualstudio.com/items?itemName=felipecaputo.git-project-manager)

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55003/32bfc614-8df0-4029-abb0-8f95d4c59607.png" width=300>

- [GitHub Pull Requests](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github)

プルリクに上がっているコードをvscode上で展開できる
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/55003/54408e43-7329-565c-6ef2-ba03cf4e2d02.png" width=500>


# エディタの細かい設定編

```json-doc:vscode.json（設定）
{
  // フォント サイズをピクセル単位で制御します。
  "editor.fontSize": 16,
  // フォント ファミリを制御します。
  "editor.fontFamily":"Ricty Diminished",
  // 行の高さを制御します。
  "editor.lineHeight": 0,
  // 1 つのタブに相当するスペースの数。
  "editor.tabSize": 2,
  // 入力補完を表示する
  "editor.quickSuggestions": true,
  // 現在行をガターを含めてハイライトするので視認性が上がる
  "editor.renderLineHighlight": "all",
  // 入力補完の表示を何ms遅らせるか
  // "editor.quickSuggestionsDelay": 10,
  // 括弧開きを入力したとき括弧閉じを自動的に入れる
  "editor.autoClosingBrackets": true,
  // 空白文字列の表示
  "editor.renderWhitespace": "boundary",
  // ウインドウ幅で折り返す
  // "editor.wordWrap": "on",
  // カーソルがにゅるっと点滅する
  "editor.cursorBlinking": "smooth",
  // エディタのendなどを自動入力
  "editor.autoIndent": true,
  // インデントガイド(インデントに沿って縦線を表示)
  "editor.renderIndentGuides": true,
  // 余分なホワイトスペースを削除
  "files.trimTrailingWhitespace": true,
  // Enable the extension.
  "guides.enabled": false,
  // Specifies the severity of the message when the classpath is incomplete for a Java file
  "java.errors.incompleteClasspath.severity": "ignore",
  // 実行するターミナル アプリケーションをカスタマイズします。
  "terminal.external.osxExec": "iTerm.app",
  // ターミナルのフォント サイズをピクセル単位で制御します。
  "terminal.integrated.fontSize": 18,
  "window.zoomLevel": -1,
  // 新規ファイルはUntitledでファイル作成
  "workbench.startupEditor": "newUntitledFile",
  "workbench.sideBar.location": "left",
  // ミニマップの表示
  "editor.minimap.enabled": false,
  // ファイルの末尾は改行で終わらせる
  "files.insertFinalNewline": true,
  // 拡張機能を自動更新
  "extensions.autoUpdate": true,
  // codeコマンドで(ディレクトリではなく)ファイルを開いたときは、既に開いているウインドウがあればそこに表示する
  "window.openFilesInNewWindow": "off",
  // タイトルバーにファイルのフルパスを表示する
  "window.showFullPath": true,
  "explorer.confirmDelete": false,
  // Quick Open で開いたエディターをプレビューとして表示するかどうかを制御します。
  "workbench.editor.enablePreviewFromQuickOpen": false,
  // ワークベンチのフォント エイリアシング方法を制御します。
  // "workbench.fontAliasing": "antialiased",
  // エディターのタブの大きさを制御します。
  "workbench.editor.tabSizing": "shrink",
  // 前のセッションからエディターが復元されていない場合に、起動時に表示するかどうかを制御します。
  "workbench.startupEditor": "newUntitledFile",
  // 3 本の指で横方向にスワイプすると、開いているファイル間を移動できます。
  "workbench.editor.swipeToNavigate": true,
  "explorer.confirmDragAndDrop": false,
  "workbench.colorTheme": "Cobalt2",
  "workbench.iconTheme": "material-icon-theme",
  "breadcrumbs.enabled": true,
  "workbench.editor.enablePreview": false,

  /*
   * terminal
   */
  // 実行するターミナル アプリケーションをカスタマイズします。
  "terminal.external.osxExec": "iTerm.app",
  // Terminalのフォント設定
  "terminal.integrated.fontFamily": "Source Code Pro for Powerline",
  "terminal.integrated.fontSize": 14,
  "workbench.iconTheme": "material-icon-theme",
  "workbench.statusBar.visible": true,
  "workbench.colorTheme": "Cobalt2",
  "githubPullRequests.hosts": [
    {
      "host": "https://github.com",
      "username": "oauth",
      "token": "system"
    }
  ],
}
```

# 使い方編

## ワークスペースを切り替える
このショートカットコマンドで、一度でも開いたプロジェクトは切り替えることが出来るようになる

`control + r`

## 文字の折返しのオン／オフ
`alt + z`