おすすめVSCode拡張機能8選（Laravel編）

　VSCodeにLaravel用の拡張機能を導入しコーディングを快適にしましょう。拡張機能のインストール方法は最後に解説します。

PHP編はこちら。

Laravel Snippets
Laravel Extra Intellisense
Laravel Blade Snippets
Laravel Blade formatter
Laravel goto view
laravel-jump-controller
laravel-goto-components
Laravel Create View
Laravel Extension Pack
拡張機能のインストール方法
拡張機能のアンイストール方法
案件のご依頼・ご相談はコチラ

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

　上記で紹介しなかった拡張機能も含まれますが、上記の拡張機能を一気にインストールしたいという方はこちらのパックを導入してください。

拡張機能のインストール方法

左サイドメニューの「拡張機能」アイコンをクリックしてください。

　検索バーに導入したい拡張機能の名前を入力してください。リアルタイムに検索結果が表示されのますので、目的の拡張機能の「インストール」ボタンをクリックしてください。拡張機能は自動で有効化されます。以上でインストールは完了です。

拡張機能のアンイストール方法

　不要になった拡張機能を選択し、「アンインストール」ボタンをクリックしてください。

　アンインストールせず無効にしたい場合は「アンインストール」ボタンの左横の「無効」ボタンをクリックしてください。

案件のご依頼・ご相談はコチラ

お問合せ｜株式会社パパグラム

西新宿にあるWebシステム開発会社です。パソコンで効率化するおてつだいいたします。PHP／Laravelを中心に予約システム、在庫管理システム、顧客管理システム等を作成します。

株式会社パパグラム