Laravel 開発に VS Code を使う

ホーム  
はじめの一歩
Todo チュートリアル
BBS チュートリアル
Ledger チュートリアル
<
サーバーの構築
付録

概要

アプリケーション開発にどのテキストエディタを使うかは大事な問題です。使うエディタによって開発の効率が全然違います。このページはもっと早く作るべきだっと思いますが、 アプリケーション開発の手順にテキストエディタの説明を含めると、肝心な事柄に集中できなくなります。なので、VS Code の説明は後述することにしました。実際に私も Laravel 開発には、VS Code を使っています。非常に便利です。しかしサイトの記述には別のエディタを使っています。サイトの記述は、ずっと FTP に繋ぎっぱなしで作業しています。 つまりローカルにファイルがあるわけではなく、リモートのファイルを直接記述しています。その点については、VS Code は安定性に欠ける点があります。

VS Code (Visual Studio Code) のダウロンロードとインストール

次のリンクからダウンロードできます。インストール時に注意することは特にありません。

Download Visual Studio Code - Mac, Linux, Windows

注意するべき点があるとすれば、Windows 版にはシステム用とユーザー用があることです。システム用はどのユーザーからも使え、ユーザー用はそのユーザーしか使えないものだと思います。しかし、あまり気にしなくても良いでしょう。実際私も、どちらをインストールしたか覚えていません。


日本語への切り替え

  1. VS Code を起動して、ウィンドウの左に並んだアイコンの上から五番目にマウスカーソルをのせると「Extensions」と表示されると思います。それをクリックしてください。
  2. 表示されるパネルの検索窓に「japanese」と入力します。
  3. 候補が表示されますので「Japanese Langage Pack for Visual Studio Code」の「Install」ボタンをクリックしてください。
  4. ウィンドウの右下に「Change Language and Restart」ボタンが表示されたら、それをクリックしてください。
  5. VS Code のウィンドウが再起動します。再起動後に日本になっています。先ほどの「Extensions」ボタンが「拡張機能」に変わっています。これをクリックすると拡張機能パネルが閉じます。
  6. 必要のないタブは「X」をクリックすると閉じます。

色の設定

ここからは、Mac 版での説明になります。Windows や Linux でお使いの場合は、適宜読み替えてください。

色の設定といっても難しい話ではありません。ウィンドウをどの色にするかという話です。デフォルトでは黒になっています。

  1. VS Code のウィンドウの左下に歯車アイコンがあります。それをクリックして「テーマ」→「配色テーマ」と進んでください。
  2. 次に表示されるパネルでいろいろなもの試して、あなたが作業しやすいものを探してください。私は「Light (Visual Studio) Visual Studio Light」にしています。


エディタの設定

VS Code のウィンドウの左下の歯車アイコンをクリックして「設定」を選んでください。そして次のように設定していきます。

  1. Files: Auto Save
    afterDelay を選びます。これで編集したテキストが自動で保存されるようになります。
  2. Edito: Word Wrap
    on にします。行が長くなれば自動で折り返されて表示されるようになります。実際に改行されるわけではありません。
  3. Editor: Tab Size
    2 に設定します。最近はインデントをあまり深くしないのが流行りみたいです。
  4. エディターの設定はこれくらいです。続けて Emmet を設定します。設定画面の上部の検索窓に「Emmet」と入力してください。そして次のように設定していきます。
    1. 「Emmet: variables」という項目を探します。
    2. 「Emet: variales」が見つかれば、「項目の追加」をクリックします。
    3. 「項目」に「lang」と入力し、「値」に「ja」と入力して「OK」ボタンをクリックします。
    4. この Emmet の設定については後ほど説明します。
  5. 設定は以上です。設定タブの「X」をクリックして、設定タブを閉じてください


拡張機能の追加

VS Code ウインドウの左側に縦に並ぶアイコンの上から五番目の「拡張機能」ボタンをクリックしてください。そして検索窓に次のものを入力して、インストールしていきます。

  1. PHP Intelephense
    似たような名前のものが多いです。間違えないようにしてください。これは、PHP 関係の入力補完をしてくれます。
  2. indent-rainbow
    これは、実は、役に立っているのかどうか、私には分かっていません。一応推奨されています。
  3. Laravel Blade snippets
    Blade というものの入力補完をしてくれます。慣れると使いやすいですが、慣れないと戸惑うかもしれません。Blade 関係の入力の時に、「入力しにくい」と感じたらアンインストールしてください。
  4. 機能拡張はこれくらいです。あまり多くインストールすると VS Code の動作が遅くなります。


VS Code の基本操作

  1. 「ファイル」メニューから「フォルダーを開く...」を選択します。
  2. 表示されるパネルで、編集したい Laravel プロジェクトのプロジェクトフォルダーを選択してください。
  3. VS Codo ウィンドウの左側の一番上のアイコンをクリックすると、「エクスプローラー」を開いたり閉じたりできます。
  4. プロジェックトにフォルダーやファイルを追加したり、フォルダーやファイルの名前を変更する場合はエクスプローラーを開いて行います。
  5. 実際にコーディングする場合は、エクルプローラーを閉じていたほうが、画面を広く使えて便利です。
  6. プロジェクト内のファイルを開く場合は、VS Codo ウィンドウ上部の検査窓にファイル名を入力して探すほうが早いです。
  7. おまけ。
    見つけにくいかもしれませんが、エクスプローラーを開いているときに、プロジェクト名の欄の右端に「ー」のアイコンが表示されます。これをクリックすると、エクスパンド(拡張された)項目(▼)がすべて閉じます。わりと便利です。

便利なキーボードショートカット集

  1. エディター画面で「html:」と入力してタブキーを押すと、Html のテンプレートが自動で記述されます。
  2. この時に <html lang="ja"> と記述されています。これがさきほど Emmet で設定した結果です。Emmet を設定していなければ、ここはデフォルトで <html lang="en"> と記述されます。
  3. 同じくエディター画面で「link:css」と入力してエンターを押すと CSS のテンプレートが記述されます。
  4. コメントにしたい行に入力カーソルを持っていって、「commanc + /」(Mac)、もしくは「control + /」(Windows) を押すとその行がコメントアウトされます。
  5. 複数行を選択して、上記の操作をすると、その複数行全部がコメントアウトされます。
  6. 上記の操作後、もう一度「commanc + /」(Mac)、もしくは「control + /」(Windows) を押すと今度はコメントが外れます。
  7. コピーしたい行に入力カーソルを持っていって「option + shift + ↓」でその行が下にコピーされます。コピーしたい行のどかに入力カーソルを持っていくだけで良いです。 行全部を選択する必要はありません。
  8. 先ほどの操作で矢印を「↑」にすると上にコピーされます。
  9. shift を使わずに「option + 矢印」でその行を上下に移動できます。
  10. この「option + shift + 矢印」もしくは「option + 矢印」の操作は、複数の行を選択して行うと、選択した行すべてがコピーできたり移動できます。



1092 visits
Posted: Aug. 01, 2025
Update: Aug. 01, 2025

ホーム   目次