VSCodeにLaravel用の拡張機能を導入しコーディングを快適にしましょう。拡張機能のインストール方法は最後に解説します。
PHP編はこちら。
Laravel Snippets
Laravelの構文の自動補完が効くようになります。単語の先頭数文字を入力すると下記画像のように候補が表示されるので選択するだけです。
Laravel Extra Intellisense
こちらもコードの自動補完を行ってくれます。補ってくれるのは下記の内容です。
- 名前付きルートとルーティングパラメーター
- ビューのパスと変数名
- 設定ファイル
- 翻訳ファイルとパラメーター
- バリデーションルール名
- Bladeのsectionとstack
- 環境変数名
- ルーティングのミドルウェア名
また機能の参照ヘルプが可能になります。クラス名やメソッド名をマウスオーバーしてください。
Laravel Blade Snippets
Bladeテンプレートファイルの構文の自動補完、シンタックスハイライトが効くようになります。例えば「@extends」を出したい時は先頭に「b」と入力して続けて「ex」と文法名の先頭数文字を入力してください。
また、「html:5」と入力すると下記のようなテンプレートが出力されます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>htmlタグのショートカット記法もあります。「タグ名.クラス名」または「タグ名#ID名」と入力してください。下記のように「>」で続けると入れ子のタグを出力できます。
div.container>section#section1↓
<div class="container">
<section id="section1"></section>
</div>Laravel Blade formatter
Bladeテンプレートファイルの自動整形とシンタックスハイライトが効くようになります。Windowsの方は「Shift + Alt + F」と押してください。Macの方は「shift + option + F」と押してください。
Laravel goto view
パス名からビューファイルへジャンプできるようになります。view(‘app.index’)にカーソルを合わせて、WindowsはCtrlキーを押しながらクリック、Macはcommandキーを押しながらクリックしてください。
laravel-jump-controller
ルーティングファイル等から参照元のコントローラーへコードジャンプできるようになります。コントローラー名にカーソルを合わせて、WindowsはCtrlキーを押しながらクリック、Macはcommandキーを押しながらクリックしてください。
laravel-goto-components
Bladeコンポーネントタグからコンポーネントファイルへジャンプできるようになります。Bladeコンポーネントタグにカーソルを合わせて、WindowsはCtrlキーを押しながらクリック、Macはcommandキーを押しながらクリックしてください。
Laravel Create View
パス名からBladeファイルを生成できるようになります。コマンドパレットを開き（Ctrl + Shift + P or command + shift + P）、「Laravel:Create View」を選択し、ドットつなぎでパス名を入力してください。（例 admin.items.index）
Laravel Extension Pack
上記で紹介しなかった拡張機能も含まれますが、上記の拡張機能を一気にインストールしたいという方はこちらのパックを導入してください。
拡張機能のインストール方法
左サイドメニューの「拡張機能」アイコンをクリックしてください。
検索バーに導入したい拡張機能の名前を入力してください。リアルタイムに検索結果が表示されのますので、目的の拡張機能の「インストール」ボタンをクリックしてください。拡張機能は自動で有効化されます。以上でインストールは完了です。
拡張機能のアンイストール方法
不要になった拡張機能を選択し、「アンインストール」ボタンをクリックしてください。
アンインストールせず無効にしたい場合は「アンインストール」ボタンの左横の「無効」ボタンをクリックしてください。
案件のご依頼・ご相談はコチラ
コメント