仕事で TypeScript を書いています。メインとして使っている Neovim で少し込み入った構造の ts ファイルを開くと、シンタックスハイライトがうまく効かないことがしばしばありました。vim-polyglot をインストールすることで解決できたので、簡単にまとめておきます。

起きていた問題

ある日、仕事でいつもどおり TypeScript ファイルを開くと、以下のような色付けになっていました。

（実際に仕事で使っているファイルは載せられないので、サンプルとして用意したものです）

ugly-syntax-highlight

const arr1 のあたりが無機質な感じになっていますし、for (let i = 0; i < arr1.length; i++) に関してはほとんどがピンクになっていて個人的には見るに堪えない配色です。

行数の少ない、シンプルなファイルであればこのような状況は体感的には発生していなかったのですが、数千行のファイルになるとこのようにシンタックスハイライトがおかしくなる状況が頻発していました。

そもそも数千行のファイルは分割しろというのはそれはそうなのですが、そこはいったん目をつぶるとして、我慢さえすればコーディングをする上で支障があるわけではなかったので、とりあえず数週間そのまま仕事をしていました。

カラースキームの旅に出る

さて、私は飽き性かつエディタの見た目にこだわりたい人間のため、2週間に1回くらいのペースでカラースキームを変更しています。

基本的には、以下の3つの配色をローテーションしている感じです。

  1. monokai
  2. one-dark
  3. oceanic-next

ちなみにこのブログで使っているコードスニペットの配色は one-dark です（2020/05/07 時点）。といってもこれも気まぐれで変えるかもしれません。

const arr = ['1', '2', '3'];

for (let i = 0; i < arr.length; i++) {
  console.log(`hello ${i} ${arr[i]}`);
}

この3つのローテーションにも飽きたときや暇なときには新たなカラースキーム探しの旅に出ることがよくあります。つい先日、GW で時間に余裕があったのでカラースキーム探しに出かけました。~/.vim/colors というサイト が見やすくて好きです。

そこで gruvbox-material というカラースキームと出会いました。↓

gruvbox-material-example

とっても自分好みの配色で、しかも GitHub のリポジトリ を見ると、Lightline や Airline 用のテーマも用意してあったり、イタリックに対応していたりと細部まで配慮が行き届いた素晴らしいカラースキームでした。

よし次のカラースキームはこれにしよう、と思っていると、README に以下の一文があるのを見つけました。

For better syntax highlighting support, please install sheerun/vim-polyglot.

vim-polyglot を入れると幸せになれる

vim-polyglot というプラグインの存在をこのとき初めて知りました。

を読むと、「さまざまな言語に対して Vim にシンタックスハイライトやインデントなどの機能を拡充することのできる言語パック」といった感じのようです。

これを入れれば数週間悩みのタネだった TypeScript のシンタックスハイライトおかしい問題が解決するのでは！？ と思い、インストールしてみました。

結果は以下の通りです。

beautiful-syntax-highlight

無機質だった const arr1 が息を吹き返し、さらに for の中の let i = 0; i < arr1.length; i++ に関しては雲泥の差です。 gruvbox-material の目に優しくも華やかな配色を存分に活かした、美しい彩りです。

BEFORE / AFTER の形で並べて載せてみます。AFTER の美しさが際立ちますね！！！

〜 BEFORE 〜

before-syntax-highlight

〜 AFTER 〜

after-syntax-highlight

これで仕事の効率とモチベーションが跳ね上がりました。

まとめ