VSCode 設定

## Setup

- [Download Visual Studio Code](https://code.visualstudio.com/download)


## 全体

- 文字コードを 'Ricty Diminished' に変更
  - 設定を開く (cmd,)
  - 検索窓に 'Editor Font Family' を入力
  - Editor: Font Family の先頭に 'Ricty Diminished' (''が必要) を入力


## ショートカット変更

- keybindings.json を開き以下の設定を行う ([Code|基本設定|キーボードショートカット]選択後、アイコン「キーボードショートカットを開(Json)」をクリック)
  - ctrl+n, p 次/前 エディター移動
  - ctrl+h, l 次/前 エディターグループ移動
  - ctrl+j, k Terminal, Editor を移動

  ```
    {
        "key": "ctrl+p",
        "command": "workbench.action.previousEditor"
    },
    {
        "key": "ctrl+n",
        "command": "workbench.action.nextEditor",
    },
    {
        "key": "ctrl+j",
        "command": "workbench.action.terminal.focus",
    },
    {
        "key": "ctrl+k",
        "command": "workbench.action.focusActiveEditorGroup",
    },
    {
        "key": "ctrl+l",
        "command": "workbench.action.focusNextGroup"
    },
    {
        "key": "ctrl+h",
        "command": "workbench.action.focusPreviousGroup"
    },
  ```

##  vim Key binding

- Esc キーで IME off (英数)
  - [Karabiner で対応](https://github.com/kharigai/karabiner/blob/master/karabiner.json#L40)
- vim-surround 設定<br>
  標準で付いているため、設定を有効にする

  ```
    $ vim ~/Library/Application\ Support/Code/User/settings.json
    {
      ・
         "vim.surround": true,
    }
  ```


## ターミナル

- 色を黒に変更
  - 設定を開く (cmd,)
  - 検索窓に 'workbench color customizations' を入力
  - [setting.json を編集] link をクリックし、settings.json を表示する 
  - settings.json に以下の内容を入力
    - [Base16 Terminal Colors for Visual Studio Code|ashes](https://glitchbone.github.io/vscode-base16-term/#/ashes)

    ```
    "workbench.colorCustomizations": {
      "terminal.background":"#1C2023",
      "terminal.foreground":"#C7CCD1",
      "terminalCursor.background":"#C7CCD1",
      "terminalCursor.foreground":"#C7CCD1",
      "terminal.ansiBlack":"#1C2023",
      "terminal.ansiBlue":"#AE95C7",
      "terminal.ansiBrightBlack":"#747C84",
      "terminal.ansiBrightBlue":"#AE95C7",
      "terminal.ansiBrightCyan":"#95AEC7",
      "terminal.ansiBrightGreen":"#95C7AE",
      "terminal.ansiBrightMagenta":"#C795AE",
      "terminal.ansiBrightRed":"#C7AE95",
      "terminal.ansiBrightWhite":"#F3F4F5",
      "terminal.ansiBrightYellow":"#AEC795",
      "terminal.ansiCyan":"#95AEC7",
      "terminal.ansiGreen":"#95C7AE",
      "terminal.ansiMagenta":"#C795AE",
      "terminal.ansiRed":"#C7AE95",
      "terminal.ansiWhite":"#C7CCD1",
      "terminal.ansiYellow":"#AEC795"
    },
    ```

## Plugins

### Coding

- Vim (vscodevim.vim)
- ESLint (dbaeumer.vscode-eslint)
- Prettier - Code formatter (esbenp.prettier-vscode)
- stylelint (stylelint.vscode-stylelint)
- Visual Studio IntelliCode (visualstudioexptteam.vscodeintellicode)
- Bracket Pair Colorizer (coenraads.bracket-pair-colorizer)
- indent-rainbow (oderwat.indent-rainbow) <br>
  インデントを見やすくする（レインボー表示）

### Debug

- Debugger for Chrome (msjsdiag.debugger-for-chrome)

### Misc

- Japanese Language Pack for Visual Studio Code (ms-ceintl.vscode-language-pack-ja Microsoft) <br>
  日本語パック
- Hybrid Next (wyze.theme-hybrid-next)<br>
  色テーマ
- VSNotes (patricklee.vsnotes)<br>
  作業履歴、技術資料管理<br>
  良さそうだったが、git 管理しようと思ったら読み込みが著しく遅くなったので、アンインストール
- vscode-icons "vscode-icons-team.vscode-icons" <br>
  ファイル毎のアイコン表示
- Auto-Open Markdown Preview (hnw.vscode-auto-open-markdown-preview)<br>
  md ファイルをエディターで開くと自動でプレビュー画面を表示する<br>
  自動で開かれるとうざいため、アンインストール


## 資料

- [VSCode でも Vim 風に操作する拡張機能 VSCodeVim](https://loumo.jp/archives/21604)
- [vim-surroundでvimmerへの道を極めよう] (https://qiita.com/takuyanin/items/5eb009e737a235e51ab2)

## memo

```
# vim surround tips
ブロック選択して S( をすると(にスペースが挿入される) スペースなしは以下のコマンドで行う
  b: (
  B: {
  r: [
  a: <
```