VS Code 崩れたインデントを整える

インデント VS Codeの使用法

CloudyやChatGPT、Geminiに作成してもらったコードをソースに追加すると、インデントが崩れた状態になってしまうことがあります。
そんな場合にVisual Studio Codeの崩れてしまったソースコードのインデントを一発で整える方法を紹介。

インデントを強制的に整える

例えば以下のようなソースコードがあったとします。

function checkUserAccess(user) {
if (user) {
if (user.isActive) {
if (user.role === "admin") {
if (user.hasPermission) {
console.log("管理者としてアクセスが許可されました");
} else {
console.log("権限が不足しています");
}
}
}
}
}

このように崩れてしまったもしくはインデントが入っていないソースを強制的に整える。

function checkUserAccess(user) {
    if (user) {
        if (user.isActive) {
            if (user.role === "admin") {
                if (user.hasPermission) {
                    console.log("管理者としてアクセスが許可されました");
                } else {
                    console.log("権限が不足しています");
                }
            }
        }
    }
}

基本的にはVisual studioは、改行すると自動的にインデントを生成してくれるんですけれど、どこかのコピーを使ったり、生成AIでソースを書いてもらったりすると、インデントがずれてしまったりする場合が多々ある。

そんなときに強制的にインデントを整えるには──

Visual Studio Codeの場合

全体を整える

Visual Studio Codeで、ソースコード全体のインデントを強制的に整えるには、

Shift + Alt + F

選択した範囲のみ

選択範囲のみインデントを整えるには、まずは整えたい行を選択し、

Shift + Alt + F

全体と同じです。

右クリックメニューから

ショートカットだけでなく以下のようにしてもインデントを整えることが出来ます。

ソースコードのどこでもいいから右クリックし、右クリックメニューの中の「ドキュメントのフォーマット」を選択します。
これでソースコード全体のインデントが強制的に整えられます。

Tabキー

Tabキーでもインデントは行えます。とくに、複数の行を選択してTabキーを押すと、まとめてインデントしてくれます。

Visuial Studioの場合

ややこしいのはVisual Studioではショートカットが違う点。
Visual Studioでは以下のようにします。

ファイル全体を整形する

Ctrl + KCtrl + D

このときCtrlを押したままKを押し、Ctrlは離さずにDを押します。

選択した行のみ

選択した行のみインデントを整える場合は、整えたい行を選択し、

Ctrl + KCtrl + F

このときCtrlを押したままKを押し、Ctrlは離さずにFを押します。
ややこしいですね。

コメント

タイトルとURLをコピーしました