kumainu-devの備忘録

調べてわかったこと、困ったこと、勉強したことを書く場所

VSCodeで開いたファイルのタブ幅をいい感じにする方法

学習目的などで、様々なWebページからコードをコピーしたとき、タブ幅が違ったりする。 ハードタブかソフトタブか、ソフトタブなら幅は2なのか4なのかそれ以外なのかなど。

優秀なIDEを使っている場合や、コピペ前に自分で整形している場合ならば、複数種のタブが混在することはないかもしれないが、そういったことをあまり気にせず強力な整形機能がないエディタを使っている場合、作業をしているうちにタブ幅が違ってきたりして、気がつけば大変なことになったりする。

そんなとき、強力なエディタ様の力を借りて、一発整形をしていただこうということで、VSCodeでいろいろ試した結果、一番「それっぽい」結果を出してくれたやり方を書いておく

開いたファイルのタブ幅とエディタのタブ幅が合わない場合

f:id:kumain-dev:20220106134821p:plain

例えば、このようにソフトタブなファイルのタブ幅が2で、エディタのタブ幅が4の場合、単にエディタ側のタブ幅を2にするればいいだけである。右下の「スペース4」の部分をクリックし、スペースによるインデント(ビューの変更)から、目的のタブ幅を選ぶだけである。 デフォルトのタブ幅と違う場合、そのタブ幅をデフォルトにするならば、左下の歯車から設定が変更できる。

開いたファイルのタブ幅がガタガタでスペースに統一したい

自動整形がうまく働かないとき、以下の方法でいい感じに整形できた

  1. 直したいのファイルを開く
  2. エディタ右下のスペース:4(タブ設定)の部分をクリックする
  3. インデントをタブに変換する
  4. もう一度エディタ右下のスペース:4(タブ設定)の部分をクリックする
  5. インデントをスペースに変換する

Shift+Alt+Fでも似たような動きをするが、なぜかうまく変換されなかったときにやってみたら動いた。

なお、タブ幅を一括で2→4や4→2にしたいときにも使える。その場合は、上記手順1のあとに、スペースによるインデントでファイルのタブ幅と一致させてから、2・3を行い、4をする前に、スペースによるインデントで目的のタブ幅にビューを変更してから4・5の手順を踏むとうまく変換できる。