VS Code - HTML,JS のインデントを調整するショートカットキー

コーディング最中に、コードのインデントを手作業で調整するのは面倒ですよね。

Visual Studio Code には、HTMLやJavaScriptのソースコードに対して、 インデントをうまく調整してくれる機能があります。

「ドキュメントのフォーマット」機能といって、 ショートカットキーは「Shift + Alt + F」です。

ソースコードをコピペした時に、インデントがそろわないことがよくあります。 そんな時に使えて、個人的にはかなり重宝している機能です。

ただし、すべての言語に対応しているわけではありません。 試してみた所、「HTML・JavaScript」は対応、「CSS・PHP・Python」は非対応でした。

対応していない場合は、その言語用のフォーマット拡張機能をインストールします。 (インストール方法は後述)

では具体的に、どのようにインデント調整をするのか見てみます。

スポンサードサーチ
アドセンス

HTMLのインデント調整

次のような、div 要素の中に p 要素が2つあるHTMLを記述します。

この段階では、わざとインデントが全くない状態にしています。

HTML インデントなし

この状態でショートカットキー「Shift + Alt + F」を押します。

コード部分を選択する必要はありません。カーソルもどこにあってもOKです。 「Shift + Alt + F」を押すだけです。

すると次のようにインデントされます。

HTML インデント調整後

body 要素が一番左側で、div要素、p要素とインデントされています。

エディタの設定でインデントは「スペース2つ」に設定しているので、 このような表示になります。この幅はご自身のVS Codeでの設定によります。

インデントの幅を確認、設定

インデントの幅を確認、設定するには、

メニューの「ファイル」 ⇒ 「設定」 ⇒ 「基本設定」から、 「Editor: Tab Size」項目で確認、設定してください。

Tab Size設定

JavaScriptのインデント調整

次はJavaScriptの場合を見てみます。

下のようにわざと崩した形で記述してみました。

JS インデントなし

この状態で「Shift + Alt + F」を押すと、次のようになりました。

JS インデント調整後

きれいにインデントが調整されています。

拡張機能をインストールする方法

最初の方で、「インデント調整に対応していない言語もある」といいました。 その場合の対処方法を説明します。

例えば、「.css」ファイルを開いている時に「Shift + Alt + F」を押すと、 VS Code画面右下に次のようなメッセージが表示されます。

「インストールされた'css'ファイル用のフォーマッターが存在しません」

フォーマッターがない場合

フォーマッターをインストールする場合は、「フォーマッタをインストール...」ボタンをクリック。

フォーマッターインストール

画面左側にインストールできるCSSフォーマッターの一覧が表示されます。 どれか1つ選んで「インストール」ボタンをクリックするとインストールされます。

フォーマッター一覧

他の対応していないプログラム言語でも同様にフォーマッターをインストールできます。

「Shift + Alt + F」のフォーマット機能は便利な機能なので、 ぜひ活用してみてください。

スポンサードサーチ
アドセンス

シェアする

  • このエントリーをはてなブックマークに追加

フォローする

スポンサードサーチ
アドセンス