VS Code

About

You are free to use any IDE you feel most comfortable with, but in the event you are an existing VS Code user, or if you'd like to explore it a bit more, there are a number of features that will be available to you after installing your application through AppIgnition. However, before moving forward, it's important to understand the Dev Containers extension and how it's used to interface with your containers. If you already have the Dev Containers extension installed, then you can move on to The AppIgnition Extension Pack section.

Dev Containers

Dev Containers is a VS Code extension created by Microsoft that lets you use the Workspace container as a full-featured development environment. In other words, you can have the same VS Code experience developing in a container without the hassle of having to install all of the required software you need on your local machine. One of the benefits of using AppIgnition is that it will automatically configure your Workspace container to provide an ideal development experience:

  • PHP and Blade files will automatically be formatted on file saves.
  • New terminals launched within VS Code will automatically use the ignition user inside your Workspace container.
  • A comprehensive package of PHP and Laravel extensions will be installed immediately upon launching the IDE environment.

To install the Dev Containers extension, you can wait until you install your first application with AppIgnition. So long as you have VS Code installed on your machine, and it's available in your system's PATH, you'll be asked if you'd like to install the extension as you wait for your installation to finish.

Install VS Code Dev Containers

Otherwise, you can launch VS Code and select the Extensions icon on the left-hand side. Search for Dev Containers and install the extension from the list.

Install VS Code Dev Containers

Once installed, there are two ways to load your Dev Container environment in your Workspace.

  1. So long as you have VS Code and the Dev Containers extension installed, an option to Open in VS Code will appear on the menu for your installed applications. This will open a new VS Code window and automatically connect to the Workspace container.

    Application menu

  2. To connect to the Workspace container in VS Code manually, open a new window of VS Code and select the Remote Explorer icon on the left-hand side. Next, find the workspace container in the list of containers, which should be prepended with default-workspace-workspace. Finally, hover over it and click the arrow icon to attach the container in the current window.

    VS Code Dev Containers attach in current window

{warning} The Workspace container must be running before you connect to it in VS Code.

The AppIgnition Extension Pack

When opening your Workspace container in VS Code, it will automatically be configured to install the AppIgnition Laravel extension pack. This extension pack includes over 20 different PHP and Laravel extensions that can substantially improve your productivity. Below is a sample of some of the most useful.

  • PHP Intelephense
    • A high performance and feature rich PHP language server.
  • PHPUnit Test Explorer
    • Use the VS Code Test Explorer UI to easily run tests and keep track of test failures.
  • PHP Debug
    • Run a debugger alongside your code to catch breakpoints and step through complex bugs.
  • Laravel Extra Intellisense
    • Provides additional auto-completion for Laravel routes, views, configurations, and much more.
  • Laravel Pint
    • Automatically format PHP files with your Laravel Pint configuration.

XDebug

Once you've successfully attached your Workspace container to VS Code, you'll have access to run a debugger with XDebug. However, this feature is only available if you've enabled XDebug in the Workspace container within AppIgnition.

Enable XDebug for Workspace container

When XDebug is enabled, AppIgnition will add a launch configuration to your repository under .vscode/launch.json. This file is already configured to launch XDebug, so all you have to do is select the Run and Debug icon on the left-hand side of VS Code, and then click the Play icon next to Listen for XDebug.

VS Code XDebug

Now, you can set breakpoints in VS Code that will trigger when the line is ran. This offers several features such as allowing you to view currently defined variables, step to the next line, or continue processing. If you no longer wish to run the debugger, you can hit the Stop icon.

VS Code XDebug

{warning} If you prematurely exit VS Code before stopping the debugger, I have ran into cases where the debugger is still running. This can prevent any PHP commands from executing on the container, making it seem like the commands have frozen. If you encounter this, load up your VS Code environment inside the container, open the PORTS tab on the bottom and remove the port configured in the launch.json file. You may receive warnings that you can't connect to the XDebug port, but those can be safely ignored.

Running Tests

Assuming you have already attached your Workspace container to VS code, you'll be able to utilize the Test Explorer UI to easily run your Laravel unit & feature tests. Besides being able to better visualize all of the tests you have in your application, one of the biggest benefits is that the Test Explorer UI remembers successful and failed tests after every run. To view your tests, select the test beaker icon on the left-hand side of VS Code and then click the Refresh Icon at the top to discover all of your application's tests.

VS Code XDebug

Once discovered, you can choose to run all of your tests at once by clicking the Play icon up top, or run them individually by clicking the Play icon next to each test.

Laravel Ignition

A staple for every Laravel application, Laravel Ignition provides a beautiful error page to help you better troubleshoot any issues with your code. Packaged with new Laravel installations, Laravel Ignition allows you to open up your IDE of choice by clicking the icon that appears when you hover over the lines on the error page. If you have VS Code and the Dev Containers extension installed on your machine, AppIgnition will automatically configure Laravel Ignition so that it opens up VS Code directly in your application's directory within the Workspace container. You'll notice the following configurations in your .env file in your application:

IGNITION_EDITOR="vscode-remote"
IGNITION_REMOTE_SITES_PATH="/var/www/my_app"
IGNITION_LOCAL_SITES_PATH="attached-container+A_VERY_LONG_HEX_VALUE/var/www/my_app"

These configurations tell Laravel Ignition how to map your local files to the files in your container, thus allowing it to display links that will open your VS Code Dev Container.