【まとめ】VSCode エディターのタブサイズをプログラミング言語ごとに変更する方法

こんにちは、現役エンジニアの inno_tech です。

VSCode(Visual Studio Code)でエディターのタブサイズを変更する方法をお探しでしょうか？

本記事を見れば、プログラミング言語ごとにVSCodeのタブサイズを変更できるようになります。

VSCodeのインストール方法はこちらの記事を見てね。

あわせて読みたい

【速習】Visual Studio Code インストール方法まとめ(Ubuntu 20.04LTS) Visual Studio Code(通称VSCode) のインストール方法をお探しでしょうか？ 本記事では、VSCodeのインストール方法を詳しくまとめています。コマンドライン、GUIの両方に...

ユーザー単位でタブサイズを変更する場合

まずは、プログラミング言語に関係なく、共通のタブサイズを変更する方法を説明します。

VSCode を起動し、ファイル > ユーザー設定 > 設定 を開きます。 ショートカット Crtl + ,でも設定が開けます。

設定画面の上部にある検索バーから「Tab Size」と検索すると Editor: Tab Size という項目が出てきます。あなたが設定したいタブサイズに変更してください。(デフォルト : 4 )

続いて、プログラミング言語(ファイル拡張子)単位 で タブサイズを切り替える方法 を説明します。

プログラミング言語ごとにタブサイズを変更したい場合

プログラミング言語固有の設定を作成すれば、ファイルの拡張子に応じて言語を判別し、タブサイズを切り替えることができます。

プログラミング言語固有のタブサイズ設定

プログラミング言語固有の設定を作成するには、ショートカット Ctrl + Shift + Pを押下してコマンドパレットを開き、「Configure Language Specific Settings」をクリックします。

続いて、言語を選択する状態になるので、設定したい言語を選択します。

今回は JavaScript を例に説明するよ!

すると@lang: xxxxという設定モードが開きます。言語固有の設定モード内でTab Sizeを変更すれば、設定した言語のファイルの時だけタブサイズが変わります。

最後に、settings.jsonを確認し、設定内容を確認しましょう。

プログラミング言語固有設定を確認

これら設定の変更内容は settings.jsonというファイルに記述されています。

settings.jsonを開くには、ショートカット Ctrl + Shift + Pを押下してコマンドパレットを開き、「Open User Settings」をクリックします。

するとjsonファイルが開き、editor.tabSizeが 共通設定 と 各言語用設定 で2か所追加されたことが確認できました。

{
    // 共通設定
    "editor.tabSize": 2,
 
    // javascript用設定
    "[javascript]": {
        "editor.tabSize": 4,
        "editor.detectIndentation": false
    }
}

設定を一覧で確認したいときにsettings.jsonを見ると便利だよ。

settings.jsonファイルを直接編集し、設定変更することも可能です。

まとめ

2021年の全国の本屋さんで最も売れた年間ベストセラー本が気になる方はこちら。

参考になったでしょうか。
ほかにも役立つ情報が他のページにもあるかもしれません。
ご覧になるかはあなた次第です!

この記事がイイねと思ったら、Twitterフォロー か  にほんブログ村のどちらかしてくれたら嬉しいよ!