仕事でもプライベートでもよくLaravel&VSCodeで開発するのですが、ふと option + shift + F
でbladeファイルの整形ができないことに気がついたので調べました。
有効にする方法は調べた限り3つあります。
コマンドパレットに settings json
と入力してsettings.jsonを開きます。
コマンドパレットは F1
キーなどで開くことができます。
以下の設定を追記し、その後Visual Studio Codeを再起動します。
"files.associations": {
"*.blade.php": "html"
},
既にインストールしている方も多いかもしれません。
HTMLやCSS、javascript などはこの拡張をインストールした時点で整形が効くようになる有名なプラグインですね!
コマンドパレットに settings json と入力してsettings.jsonを開いて以下の設定を追記し、その後Visual Studio Codeを再起動します。
"beautify.language": {
"js": {
"type": [
"javascript",
"json",
"jsonc"
],
"filename": [
".jshintrc",
".jsbeautifyrc"
]
},
"css": [
"css",
"scss"
],
"html": [
"htm",
"html",
"blade"
]
},
こちらの拡張は、シンタックスハイライトが効くようになったりコードの生成をコマンドで出来たりと、便利な機能が使えるようになるので整形を必要としない場合もインストールしてもいいかもしれませんね!
設定画面を開いて左側のメニューから 拡張機能 -> Blade Configuration と選択し、右側メニューの Enable format blade file にチェックを入れます。
その後Visual Studio Codeを再起動します。
これで option + shift + F
で整形が効くようになります。3つのどの方法を使用しても得られる結果は同じでした
内部的にはHTML整形の流用だと思うので、
@section('header')
<div class="page-header">
<h1>foo</h1>
</div>
@endsection
上記のように @section
@endsection
などの間で字下げされないのが個人的には少し残念です…!(好みにもよるかもですが)
こちらの拡張を使用すると、まとめで書いた @section
や @if
@for
等のBlade独自の@記法の中も字下げされます。
設定等は特に必要なく、 option + shift + F
でフォーマットされます。