優柔不断VimmerのVSCodeVim

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

そんなVimmerです。

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

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

*MacBookPro使用してます。

アンインストール

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


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

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

インストール


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

プラグイン導入

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

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

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

高速化

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

{
    "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という項目があります。
これは「監視から除外するファイル」を列挙でき、これにより読み込み時に余計なリソースを喰わなくなります。

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

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

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

感想

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

おまけ

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