In this article, you’ll find a curated list of 10 useful VS Code extensions that will boost your productivity and make you more efficient as a Laravel developer. For anyone who is just getting started with Laravel, I will recommend PhpStorm or VS Code as your default IDE when building PHP and Laravel projects.

However, PhpStorm is quite expensive and it only supports PHP-related development. VS Code on the other hand is free, supports a bunch of programming languages including PHP, and has an extensive list of add-ons to supercharge the IDE. In the Stack Overflow 2022 Developer Survey, VSCode was ranked the most popular IDE with 74.48% of the respondent using it as their primary code editor.

By default, VS Code does not support PHP and Laravel. Therefore, if you want to develop Laravel and PHP applications in VS Code, it is important to install the necessary extensions from the extension market.

Related articles:

Top 10 Best VS Code Extensions for Laravel Developers

1 – Laravel Extension Pack

Laravel Extension Pack for VS Code

The Laravel Extension Pack contains a list of useful extensions for Laravel development in Visual Studio Code. Below is a table of the extensions included in the pack.

ExtensionObjective
Laravel Blade SnippetsProvides snippets and syntax highlighting
for blade templates
Laravel SnippetsProvides snippets for Laravel
Laravel Extra IntellisenseProvides IntelliSense for Laravel
Laravel ArtisanRun Laravel Artisan commands
Laravel goto viewQuick jump to Laravel blade view files
Laravel goto controllerQuick jump to Laravel controllers from route files
DotENVSyntax highlighting for .env files
Laravel goto componentsQuick jump to Laravel components
Laravel Blade formatterOpinionated Blade file formatter
Laravel Create ViewCreate Laravel view using dot notation
EditorConfigOverride user/workspace settings
with configuration found in .editorconfig files
Laravel Blade WrapperWrap Blade directives

Some months ago, the pack only had 10 extensions but at the time of writing this article, two extensions have been added to the list. So by the time you’ll read this article, the list can be decreased or increased.

We’ll elaborate on some of the useful extensions included in the pack in the remaining sections of the article to give you a clearer picture of their functionalities.

2 – Laravel Blade Snippets

Laravel Blade Snippets for VS Code

Laravel uses Blade as a templating engine for building the frontend part of the project. The Laravel Blade Snippets extension provides syntax highlighting for Blade files and has a bunch of snippets for generating pieces of code.

Laravel Blade Snippets examples

With the extension installed, you’ll get Emmet support and auto-formatting in blade templates. To generate the opening and closing controller tags, you can type b:c and choose the “b:component” option from the suggestions.

Laravel Blade Snippets extension generate controller

3 – Laravel Snippets

Laravel Snippets for VS Code

The Laravel Snippets extension provides snippets for common patterns for Laravel in VS Code. The snippet prefix follows Laravel Facades like Request::Route:: etc.

Laravel Snippets example

Other supported snippet prefixes include:

  • Request
  • Response
  • Route
  • Config
  • Auth
  • Schema – Contains Schema:: and Column:: prefix for database-related settings
  • Mail – Contains Mail:: and Mailable:: prefix for mail-related settings
  • Helper

4 – Laravel Artisan

Laravel Artisan VSCode extension

Laravel Artisan is an extension created by Ryan Naddy that allows us to perform Laravel Artisan commands within Visual Studio Code. By default, the extension becomes active once you open a workspace that has an artisan file. After installing the extension, you can run Artisan commands from the command pallet or the terminal of the root project.

For example, to view all available routes inside the project, open a new terminal and run the php artisan route:list command.

Alternatively, you can run the same command from the command pallet without opening the terminal. To do this, hit Ctrl + Shift + P to open the command palette, search for route list and choose the “Artisan: Route List” option to view the available routes.

Laravel Artisan Get a list of routes

In the command palette, you can type Artisan: to see a list of commands provided by the Laravel Artisan extension.

Laravel Artisan commands

You can run the “Artisan: Make Controller” command from the command palette to create a controller file with some initial boilerplate code.

Laravel Artisan Make a controller

Some of the other features include:

  • Support for Docker
  • Ability to start/stop a local PHP server
  • Create files like Models, Migrations, Controllers, and many more
  • Run custom commands
  • Manage a database instance

5 – Laravel Extra Intellisense

Laravel Extra Intellisense VSCode Extension

The Laravel Extra Intellisense extension builds upon the standard VS Code Intellisense to provide auto-completion for views, controllers, route names, model attributes, translations, configs, etc for Laravel in VS Code.

Laravel Extra Intellisense Views and variables

To get the most out of this extension, you need to couple it with PHP Intelephense. Once you install the PHP Intelephense extension, it will go ahead and index the project (search for PHP classes, methods, symbols, etc) so it can better understand the project’s structure to provide the best IntelliSense.

6 – Tailwind CSS Intellisense

Tailwind CSS Intellisense VS Code Extension

There is no doubt that Tailwind CSS helps developers build stylish websites but at some point, you may forget some of the utility classes. Luckily, the Tailwind Labs team developed the Tailwind CSS Intellisense extension to add auto-completion, syntax highlighting, and linting in VS Code.

This way, you can apply appropriate utility classes to your markup from the intelligent suggestions provided by the extension.

tailwind css extension autocomplete feature

The extension is automatically activated when the Tailwind CSS package is installed and the tailwind.config.js or tailwind.config.cjs files are located in the workspace.

7 – RapidAPI Client

RapidAPI Client extension

RapidAPI Client is an alternative to famous API testing software like Postman and Insomnia. The RapidAPI Client VS Code extension is lightweight and suitable for developers who want an easy-to-use and intuitive interface. It also runs flawlessly offline and has a feature to generate typesafe objects from the API responses.

testing RapidAPI Client vs code extension

Having this extension will allow you to test client APIs directly in VS Code and export API definitions from the interface without ever switching the context to another application. Keep in mind that Postman is more robust and has a wide range of features for testing complex APIs.

RapidAPI Client on the other hand has fewer features making it lightweight and super fast for testing API clients. Finally, RapidAPI Client supports requests grouping, environment variables, GraphQL, and any VS Code theme.

8 – Editor Config for VS Code

Editor Config for VS Code

When working on a project with multiple contributors, maintaining consistent code formatting can be challenging. Each developer may have their own preferences for indentation, line endings, and other formatting styles, leading to code that looks inconsistent and difficult to read.

The Editor Config for VS Code extension addresses this problem by reading and applying settings from a project’s .editorconfig file. This file allows developers to define and enforce a set of consistent formatting rules across their entire project.

With this extension, there is no need for additional or VS Code-specific files. Additionally, the plugin can override user or workspace settings with the rules found in the .editorconfig file. If the root=true option is not specified, the plugin will continue to search for a .editorconfig file outside of the project.

9 – Laravel goto view

Laravel goto view VS Code Extension

As your project grows, the number of Views grows as well, so finding your way around the various view files can be tedious. Luckily, the Laravel goto view extension solves this problem by allowing us to quickly navigate to any view with a simple click.

To navigate to a particular file in the views directory, hold Ctrl and click on the file name.

Laravel goto view example

10 – Laravel Blade Spacer

Laravel Blade Spacer VS Code Extension

Whenever you want to use a variable defined in a controller inside a view, you’ve to wrap the variable inside double curly braces {{$variabel_name}} . By default, when you type {{}} , you do not get extra spaces inside the curly braces.

You can manually add the spaces but if you prefer an automatic option, you can install the Laravel Blade Spacer extension to automatically add spaces in Laravel Blade template tags.

Laravel Blade Spacer example