インデントはコードを読みやすくする重要な要素
インデントはコードの読みやすさや整頓に欠かせない要素です。
本記事では、VSCode(Visual Studio Code)でのインデント整形方法を設定方法や自動で揃える方法を含めて解説します。
VSCodeのインデント基本設定
インデント幅の設定方法
インデント幅の確認
VSCodeの画面右下のステータスバーに表示される「スペース」で現在のインデント幅の確認ができます。
右下のステータスバーは、ファイルを開いていない状態では表示されないので注意しましょう。
インデント幅の変更
「スペース」をクリックすることで、アクションの選択ウィンドウが表示されるので、「スペースによるインデント」をクリックします。
1～8までの数字が表示されるので、変更したいインデント幅を選択します。
コマンドパレットからも変更可能
「Ctrl + Shift + P(Windows)」または「Shift + Command + P(Mac)」を押してコマンドパレットを開き、「indent」と入力して設定を変更することもできます 。
インデントの入力方法
スペースを使ったインデント
スペースキーを使って、手動で1スペースずつインデントを追加します。
タブを使ったインデント
タブキーを使ってインデントを追加します。デフォルトでは4スペース分のインデントが設定されています。
複数行にインデントを追加
複数行を選択後、スペースキーやタブキーを使うことで一度で複数の行にインデントを追加できます。
複数行のインデントを削除
ショートカットキーを使うことで複数行のインデントを削除することもできます。
| OS | ショートカットキー |
|---|---|
| Windows | Ctrl + [ |
| Mac | Cmd + [ |
インデントの自動整形
ショートカットキーを使った自動整形
ファイル全体を自動整形
以下のショートカットキーを使うことで、インデントを自動で整形できます。
| OS | ショートカットキー |
|---|---|
| Windows | Shift + Alt + F |
| Mac | Shift + Option + F |
選択範囲のみを自動整形
整形したい部分を選択した後に、ショートカットキーを使うことで、選択範囲のみを自動整形できます。
| OS | ショートカットキー |
|---|---|
| Windows | Ctrl + K → Ctrl + F |
| Mac | Cmd + K → Cmd + F |
保存時にインデントを自動で整える方法
手順1：設定を開く
VSCode画面左下にある「歯車」アイコンをクリックして、「設定」を選択します。
手順2：「format on save」を検索
設定画面が表示されたら、上部にある検索バーに「format on save」と入力して検索します。
手順3：チェックボックスをONにする
検索結果の一覧から、「Editor: Format On Save」にチェックをつけます。
手順4：自動整形の確認
設定が完了したら、コードが自動整形されるか確認します。
コードの保存前
コードの保存後
インデント関連のおすすめ拡張機能
Indent-Rainbow
インデントを色分けして表示することで、コードを読みやすくできる便利な拡張機能です。
各インデントレベルが異なる色で表示され、視覚的にわかりやすくなります。
インデントが勝手に変わる際の対処法
インデント設定が自動で変更される場合は、「Detect Indentation」を無効にすることで問題が解決する可能性があります。
設定を無効にすると、ファイルを開くたびにインデント設定が変更されることを防ぐことができます
無効にする方法
手順1：設定を開く
VSCode画面左下にある「歯車」アイコンをクリックして、「設定」を選択します。
手順2：「Detect Indentation」を検索
検索バーに「Detect Indentation」と入力して検索します。
手順3：チェックを外す
「Editor: Detect Indentation」のチェックを外して無効にします。
インデントを使って読みやすいコードを書こう！
今回は、インデントの設定方法や自動形成について解説しました。VSCodeのインデント設定を理解し、適切に使いこなすことで、コードの可読性を大幅に向上させることができます。紹介した設定や拡張機能を活用し、効率的なコーディング環境を構築しましょう。
