まず初めに知っておいて欲しいのは、Visual Studio Codeは等幅フォント専用になるように作られているわけでは無く、プロフォーショナルフォントも使えるように、そのフォントがレンダリングされるがままに幅がを取るようになっています。サクラエディタ等のようにな等幅フォント前提のエディタとはそもそもの作りや設計が異なるということです。
では、等幅フォントの場合はどうなるかですが、フォントが等幅にレンダリングされる限りは期待通りの動作をするでしょう。しかし、それが太字の場合、表示しようとするフォントに太字に関する情報が含まれていない(太字のグリフが無い)と単純にフォントの各線を縦横に太くするレンダリングを行ってしまうために幅が増加します。「Myrica M」や「MS ゴシック」などにはそういった太字の情報が無いため、横幅が少しずつ大きくなり、ズレてしまったと言うことです。
逆に言えば、太字の情報も含まれていて、横幅が変わらないようになっているフォントもあると言うことです。私の手元(Windows 10 1809、Visual Studio Code 1.33.1)では下記フォントについて、ずれるという現象は発生せず、太字の場合も横幅が変わらないままになっていることを確認しました。一度お試しください。(名前はVisual Studio Codeで設定するときの名前です。リンク先はダウンロード元です。独断と偏見によるお勧め順です。)
Sarasa Mono J
Fira Codeのようなligature(合字)に対応したCJKプログラミング用フォントです。"editor.fontLigatures"
をtrue
にすると!=
が≠
のように表示されるようになります。Migu 1M
古くから有るプログラミング用フォントで、日本語特有の文字も区別しやすいように工夫がされています。姉妹フォントのMigu 2Mでも可能です。Noto Sans Mono CJK JP
豆腐(文字が□になる現象)をなくすために作られたNotoフォントのうち日本語用Sans Serifフォントです。等幅のMonoはダウンロードできるNoto Sans CJK JPの中に含まれます。フォント一覧ではRegularとBoldの二つのフォントにわかれていますが、それらを付けずに指定することで、自動的に通常はRegular、太字はBoldを使うようになります。ただし、プログラミング用フォントではないため、0とOが識別しにくい等の欠点があります。Source Han Code JP
少し変わり種で、1:2ではなく2:3となるプログラミング用フォントです。好みによりますが、英字が大きいため、愛用している人もいるそうです。
私のPCに入っていたものは上のものだけですが、その他にもあるかと思いますので、探してみてください。