VSCode で言語毎にインデントを変更する方法

Programming

2025.01.13

プログラマーであれば趣味仕事問わず、複数のプログラミング言語を扱う機会があると思う。その際、言語毎にエディタの設定を変えると効率よく作業できる。特にインデントは言語毎に推奨される値が異なるため、設定しておきたいものの一つだ。

このページでは VSCode で言語毎にインデントの設定を行う方法を紹介しよう。

VSCode で言語毎にインデントを変更する方法

まずは設定ファイルを開こう。

VSCode を起動したら Ctrl-Shift-P を押してコマンドパレットを表示し、Preferences: Open User Settings (JSON)を選択すると settings.json が開かれる。

以下のように言語毎の設定を記述しよう。

{
    (省略)
    "[javascript]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "[php]": {
        "editor.tabSize": 4,
        "editor.insertSpaces": false
    },
    "[ruby]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "[haml]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
}

editor.tabSize でタブの幅を、editor.insertSpaces でタブをスペースに変換するかを指定できる。上記のようにすると JavaScript ではタブ幅2でスペースに置き換え、PHP ではタブ幅は4でスペース変換無し(タブのまま)となる。

[]の中は各言語名が入るが、記号付きなどでどのように記述すれば良いのかわからない場合は、コマンドパレットから「Preferences: Configure Language Specific Settings」を開くと対応する言語の一覧と項目の値が表示される。