1分でできるVSCodeでBladeファイルを綺麗に整形する設定方法【Laravel】 #PHP

前置き

VSCodeは標準でファイル整形機能があるが、HTML, CSS, Javascriptにしか対応していません。
他の形式の場合は自分でフォーマッターを用意する必要があります。
とっても簡単なので、設定していない方はぜひこの機会に設定してみてください。

設定手順

VSCodeの拡張機能の「Laravel Blade Snippets」をインストールする

※すでに「Laravel Blade Snippets」をインストール済みの方は飛ばしてください

まずVSCodeを起動して、VSCodeの左バーのメニューから「拡張機能」を選択してください

次に画面上部の「Marketplaceで拡張機能を検索する」と表示されている検索バーに「blade」と入力すれば、「Laravel Blade Snippets」が上位に表示されるので、緑のインストールボタンを押下してください。

※筆者はすでにインストールされているため表示されていませんが、未インストールの拡張機能にはインストールボタンが表示されます

これでインストールは完了です。

設定から「Enable format blade file」を有効化する

VSCodeの左バーのメニュー最下部に、下記の歯車のマークがあるのでそれを押下します。さらにメニューウインドウが開くので、「設定」を選択してください。

※Windowsの方は「Ctrl」+「,」、Macの方は「⌘」＋「,」でも設定画面が開けます

設定画面が表示されるはずなので、その検索バーに「blade config」と入力してください。

Bladeの設定として、「Enable format blade file」のチェックボックスが表示されるので、チェックを入れてください。

これで設定は完了です！

動作の確認

テキトーにbladeファイルを開いて、「Shift」+「Alt」+「F」（Macは「⇧」＋「⌥」＋「F」）を押下すれば綺麗に整形してくれます。

整形前

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>整形サンプル</title>
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>
<body>
<div>hoge</div>
<div>fuga</div>
<div>
<p><a href="{{ route('toppage') }}"></a></p>
</div>
</body>
</html>

整形後

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>整形サンプル</title>
  <meta http-equiv="Content-Style-Type" content="text/css">
  <meta http-equiv="Content-Script-Type" content="text/javascript">
  <link rel="stylesheet" href="{{ asset('css/style.css') }}">
</head>

<body>
  <div>hoge</div>
  <div>fuga</div>
  <div>
    <p><a href="{{ route('toppage') }}"></a></p>
  </div>
</body>

</html>