VSCode: HTML,JS のインデントを調整するショートカットキー
コーディング最中に、コードのインデントを手作業で調整するのは面倒ですよね。
Visual Studio Code には、HTMLやJavaScriptのソースコードに対して、 インデントをうまく調整してくれる機能があります。
「ドキュメントのフォーマット」機能といって、 ショートカットキーは「Shift + Alt + F」です。
ソースコードをコピペした時に、インデントがそろわないことがよくあります。 そんな時に使えて、個人的にはかなり重宝している機能です。
ただし、すべての言語に対応しているわけではありません。 試してみた所、「HTML・JavaScript」は対応、「CSS・PHP・Python」は非対応でした。
対応していない場合は、その言語用のフォーマット拡張機能をインストールします。 （インストール方法は後述）
では具体的に、どのようにインデント調整をするのか見てみます。
HTMLのインデント調整
次のような、div 要素の中に p 要素が２つあるHTMLを記述します。
この段階では、わざとインデントが全くない状態にしています。
この状態でショートカットキー「Shift + Alt + F」を押します。
コード部分を選択する必要はありません。カーソルもどこにあってもOKです。 「Shift + Alt + F」を押すだけです。
すると次のようにインデントされます。
body 要素が一番左側で、div要素、p要素とインデントされています。
エディタの設定でインデントは「スペース2つ」に設定しているので、 このような表示になります。この幅はご自身のVS Codeでの設定によります。
インデントの幅を確認、設定
インデントの幅を確認、設定するには、
メニューの「ファイル」 ⇒ 「設定」 ⇒ 「基本設定」から、 「Editor: Tab Size」項目で確認、設定してください。
JavaScriptのインデント調整
次はJavaScriptの場合を見てみます。
下のようにわざと崩した形で記述してみました。
この状態で「Shift + Alt + F」を押すと、次のようになりました。
きれいにインデントが調整されています。
拡張機能をインストールする方法
最初の方で、「インデント調整に対応していない言語もある」といいました。 その場合の対処方法を説明します。
例えば、「.css」ファイルを開いている時に「Shift + Alt + F」を押すと、 VS Code画面右下に次のようなメッセージが表示されます。
「インストールされた'css'ファイル用のフォーマッターが存在しません」
フォーマッターをインストールする場合は、「フォーマッタをインストール...」ボタンをクリック。
画面左側にインストールできるCSSフォーマッターの一覧が表示されます。 どれか１つ選んで「インストール」ボタンをクリックするとインストールされます。
他の対応していないプログラム言語でも同様にフォーマッターをインストールできます。
「Shift + Alt + F」のフォーマット機能は便利な機能なので、 ぜひ活用してみてください。