優柔不断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分触って満足したのでそれ以降利用してない)