Cloud9でタブとスペースの見た目の幅が異なる

最近Cloud9でGo言語を書いていると、タブの見た目の幅が設定されている文字数とは異なるのが気になっていました。

下記の画像ではTabサイズを4にしているのですが、7文字分のインデントが入っているように見えます。

他の言語だったらTabをSpaceに変えれば良いような気もしますが、 Go言語の場合は標準のFormatterがTabを使用するようにしているのでそうもいきません。

この状態で修正したい文字にカーソルを合わせてしまうと、3文字前の部分が編集されてしまいます。

tab

f:id:tohosokawa:20170603221231p:plain

space

f:id:tohosokawa:20170603221254p:plain

ただ、この現象は低解像度のChromebookを使用しているときだけで、FHDの外部ディスプレイに接続したときには 正常に表示されていました。

フォントの設定などを試しても改善されず、ググってみても解決方法が見つからなかったため Cloud9 Community で聞いてみました。

community.c9.io

驚いたことに3時間もかからずに解決方法を教えて貰えました。

解決方法

教えて頂いた解決方法は下記です。

Show Invisible Character

下記のようにInvisible Characterの表示をOFFにします。

Preferences -> User Settings -> Code Editor (Ace) -> Show Invisible Characters : OFF

これだけで、TabとSpaceが同じ幅になります。

Font Family

下記のようにエディタのフォント設定を Cousine にします。

Preferences -> User Settings -> Code Editor (Ace) -> Font Family : Cousine

この方法ではInvisible Characterを表示したままでTabとSpaceが同じ幅になります。


何となく Cousine はデフォルトよりも癖のあるフォントに感じたので、Cousine が許容できるか次第で対応方法を決めれば良いのではないかと思います。