優柔不断VimmerのVSCodeVim

# 優柔不断VimmerのVSCodeVim
![vscode_002.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/275273/cdb0d586-fb96-7657-f199-e1b85497f592.png)

**ターミナルVim**
↓
**VSCode Vim**
↓
**ターミナルVim**
↓
**他のエンジニアもVSCodeだし合わせないとなんか気持ち悪い** ←今ここ。

そんなVimmerです。

「気持ち悪い」というのも、弊社では「モブプログラミング」を週１で開催しており、環境が異なると僕がドライバーになった際に困るのです。
というわけで、久々にVSCodeを立ち上げてみるも、一部のプラグインが正常に動作しない。
非推奨の「背景表示」プラグインが原因だったり、PHPCSの動作不良で警告が吐かれたり、そもそもめっちゃ動作が重たい。

そんなこんなでアンインストール & インストール・プラグイン導入 までやってみました。
既に同じような記事がいくつも上がってますが、アンインストール時・導入時にハマるポイントなども解説していきます。

*MacBookPro使用してます。

## アンインストール

今回はプラグインごと綺麗さっぱり削除したいので、いくつかコマンドを実行します。

```bash

## 本体削除
rm -rf /Applications/Visual\ Studio\ Code.app/
## プラグイン削除
rm -rf ~/Library/Application\ Support/Code/
rm -rf ~/.vscode/
```

僕の場合はプラグインがうまく動作していない様子だったので、プラグインなどのフォルダごと削除しました。

## インストール

```bash

## Homebrewで導入
brew update
brew cask install visual-studio-code
```

## プラグイン導入

以下、導入したプラグインたちです。

- [VSCodeVim](https://github.com/VSCodeVim/Vim)
  - 僕にとっては必須アイテム。VSCodeでVimを利用するためのプラグイン
- [vscode-icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)
  - 有名ですよね。オシャレ男子必須アイテム。アイコンをオシャレにします
- [hoovercj.vscode-power-mode](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode)
  - pwoer modeです
- [monokai.theme-monokai-pro-vscode](https://marketplace.visualstudio.com/items?itemName=monokai.theme-monokai-pro-vscode)
  - VSCodeの見た目を変更
- [alefragnani.project-manager](https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager)
  - プロジェクトを切り替えるサイドバーを追加
- [gizak.shortcuts](https://marketplace.visualstudio.com/items?itemName=gizak.shortcuts)
  - ステータスバーにショートカットを追加
- [Compulim.vscode-clock](https://marketplace.visualstudio.com/items?itemName=Compulim.vscode-clock)
  - ステータスバーに時間表示
- [spywhere.guides](https://marketplace.visualstudio.com/items?itemName=spywhere.guides)
  - インデントガイドラインを追加
- [sgryjp.japanese-word-handler](https://marketplace.visualstudio.com/items?itemName=sgryjp.japanese-word-handler)
  - 日本語のカーソル移動をサポート
- [日本語化](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
  - 日本語化しちゃう
- [vscode-duplicate](https://marketplace.visualstudio.com/items?itemName=mrmlnc.vscode-duplicate)
  - ファイル複製を楽にする
- [shardulm94.trailing-spaces](https://marketplace.visualstudio.com/items?itemName=shardulm94.trailing-spaces)
  - 末尾スペースの可視化
- [githistory](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
  - 差分表示とか
- [gitlens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
  - `git blame`が楽にできる
- [pull-request-github](https://marketplace.visualstudio.com/items?itemName=GitHub.vscode-pull-request-github)
  - プルリクをVSCode上で確認
- [vscode-icons-team.vscode-icons](https://marketplace.visualstudio.com/items?itemName=codezombiech.gitignore)
  - gitignoreを自動で追加してくれる
- [IBM.output-colorizer](https://marketplace.visualstudio.com/items?itemName=IBM.output-colorizer)
  - ログファイルの色付け
- [emilast.LogFileHighlighter](https://marketplace.visualstudio.com/items?itemName=emilast.LogFileHighlighter)
  - これもログの色付け
- [rogalmic.bash-debug](https://marketplace.visualstudio.com/items?itemName=rogalmic.bash-debug)
  - bashを組む時に使う
- [chrmarti.regex](https://marketplace.visualstudio.com/items?itemName=chrmarti.regex)
  - 正規表現のプレビュー
- [bracket-pair-colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
  - 括弧に色付けしてくれる
- [rainbow-csv](https://marketplace.visualstudio.com/items?itemName=mechatroner.rainbow-csv)
  - CSVファイルを色付けしてくれる。割と重宝してます
- [prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
  - 自動フォーマッター
- [felixfbecker.php-intellisense](https://marketplace.visualstudio.com/items?itemName=felixfbecker.php-intellisense)
  - PHPインテリセンス
- [bmewburn.vscode-intelephense-client](https://marketplace.visualstudio.com/items?itemName=bmewburn.vscode-intelephense-client)
  - PHPインテリセンス
- [ikappas.phpcs](https://marketplace.visualstudio.com/items?itemName=ikappas.phpcs)
  - phpcsです

```
## phpcsについて、php-code-snifferを導入しないとエラーになる
brew install php-code-sniffer
```


## 高速化

VSCodeの設定で高速化ができるらしい。


```json
{
    "editor.cursorBlinking": "solid",
    "editor.fontSize":9,
    "editor.highlightActiveIndentGuide": true,
    "editor.wordWrap": "on",
    "editor.minimap.enabled": false,
    "editor.renderIndentGuides": false,
    "files.trimTrailingWhitespace": true,
    "files.watcherExclude": {
        "**/画像/**": true,
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/*/**": true
    },
    "breadcrumbs.enabled": true,
    "terminal.integrated.fontSize": 9,
    "emmet.includeLanguages": {
        "twig": "html",
        "vue-html": "html"
    },
    "workbench.useExperimentalGridLayout": true,
    "workbench.colorTheme": "Monokai Pro (Filter Machine)",
    "workbench.iconTheme": "Monokai Pro (Filter Machine) Icons",
    "fabric.runtime": {
        "ports": {
            "orderer": 17050,
            "peerRequest": 17051,
            "peerChaincode": 17052,
            "peerEventHub": 17053,
            "certificateAuthority": 17054,
            "couchDB": 17055,
            "logs": 17056
        },
        "developmentMode": false
    },
    "window.zoomLevel": 2,
    "powermode.enabled": true,
    "powermode.presets": "exploding-rift"
}
```

上記設定の中で、`file.watcherExclude`という項目があります。
これは「監視から除外するファイル」を列挙でき、これにより読み込み時に余計なリソースを喰わなくなります。

画像ファイルが監視対象となるのかは定かではないですが、設定するのはタダなのでやっておきました。

```json
"files.watcherExclude": {
    "**/画像/**": true,
    "**/.git/objects/**": true,
    "**/.git/subtree-cache/**": true,
    "**/node_modules/*/**": true
},
```

その他の設定は良しなに変更してください。

## 感想

ショートカットや設定によってさらに使いやすくなるので、やはりVSCodeは素晴らしいですね。
ターミナルのVimは確かに軽量で多機能ではあるのですが、機能拡張やカスタマイズにかかる時間を考えるとVScodeにVimを導入して周りと開発環境を合わせた方が良いなと感じました。

## おまけ

コマンドパレットを開き、「zen」と入力すると「zen modeへの切り替え」という項目が表示される。
僕も上司から聞いて初めて知ったのですが、UIなどを非表示にしてコーデディングに集中できるようにするためのモードだとか。
「zen(禅) mode」ぜひ利用してみてください。(僕は10分触って満足したのでそれ以降利用してない)