1. 背景

これまで私はフロントエンド中心に開発を行っていましたが、最近RubyやPHPを使うことが増えてきました。
しかし、PHPは標準でインデントの幅が4文字であり、RubyやTypeScript・JavaScriptは2文字です。そのため、ファイルごとにインデントを変更するのも面倒です。
また、個人的に各言語ごとのプラグインも入れたくありません。そこで、VSCodeの設定を変更して各言語ごとのインデントを追加しようと考えました。

2. 手順（リポジトリ単位での設定）

リポジトリ配下にvscodeディレクトリを、その中にsetting.jsonを作成
各言語ごとにインデントとinsertSpaces(tabを押した時のスペース)を設定
今回はPHP,Ruby,JavaScript,Typescriptなどを設定しました。ここはお好みで設定できます。

    "[javascript]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "[javascriptreact]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "[typescriptreact]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "[typescript]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "[php]": {
        "editor.tabSize": 4,
        "editor.insertSpaces": true
    },
    "[ruby]": {
        "editor.tabSize": 4,
        "editor.insertSpaces": true
    }

3. 手順（グローバルでの設定）

vscodeでshift + cmd + P
open user settingと入力
各言語ごとにインデントとinsertSpaces(tabを押した時のスペース)を設定

Code/User/setting.json

    "[javascript]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "[javascriptreact]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "[typescriptreact]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "[typescript]": {
        "editor.tabSize": 2,
        "editor.insertSpaces": true
    },
    "[php]": {
        "editor.tabSize": 4,
        "editor.insertSpaces": true
    },
    "[ruby]": {
        "editor.tabSize": 4,
        "editor.insertSpaces": true
    }

4.まとめ

言語ごとにインデントを設定することで、RubyやPHP、TypeScriptやJavaScriptなど、それぞれの言語のインデント幅を簡単に管理できます。VSCodeの設定を変更することで、言語ごとのプラグインを追加せずにインデントを追加することができ、効率的な開発が可能となります。