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