Visual Studio Code Set Up for Laravel Development

Visual Studio Code Setup For PHP Laravel

Introduction

Visual Studio Code, or VS Code, is a code editor tool used by many programmers worldwide. It is super easy to customize as per your tastes and preferences. It has support for many languages like HTML, CSS, PHP, JavaScript, Markdown, etc. It supports Windows, Linux, and Mac OS as well. It is completely free to use the editor.

Download & Installation

You can download the VS Code editor from the official link from Microsoft. Here's the link: https://code.visualstudio.com/Download

Based on your operating system, you can download and run the installer.

Prerequisites

This article assumes that you are a Laravel developer. It doesn't matter the experience as it is not required.

VS Code Extensions

Install the following extensions to make your Laravel Development a little easier.

Auto-Rename Tag

As the name suggests, it renames the HTML tag name when editing it. Sometimes, it happens that a developer forgets to rename the closed HTML tag. This extension helps in eliminating that error.

https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Better PHPUnit

If you use the PHPUnit as your testing framework, this extension helps you in running the test suite. It has the option to run the single test from a file, all the tests from the Test file, entire test suite. This extension also has the option to change the default shortcuts to run the test(s).

https://marketplace.visualstudio.com/items?itemName=calebporzio.better-phpunit

Change Case

Sometimes, you need to change the words into different cases. Like from lower-case to upper-case, from uppercase to title-case, or to kebab-case or snake-case, or whatever the case you want. This extension will help you do it faster.

https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

Dotenv Official +Vault

It is a normal syntax highlighting extension for the .env.* files in your application. By default, it will cloak the values for the keys. Click on the Toggle option available at the top of any .env file and it will display the values. Alternatively, you can set the boolean value for it in the settings.json file

"dotenv.enableAutocloaking": false,

https://marketplace.visualstudio.com/items?itemName=dotenv.dotenv-vscode

ESLint

The linting tool for your JS projects - Vue or React. Adding this extension helps in fixing the JavaScript code in your project. Make sure that ESLint is installed on your system for better results.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

IntelliSense for CSS class names in HTML

This extension, as the name suggests, is an intellisense that helps in displaying the CSS class names in the HTML file. In other words, it is a class name completion for the HTML element.

https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

Laravel Blade Formatter

It is a formatter for the Blade engine that the Laravel Framework uses to render the HTML content on the page. It's pretty useful.

https://marketplace.visualstudio.com/items?itemName=shufo.vscode-blade-formatter

Laravel Blade Snippets

This extension provides the syntax highlighter for the *.blade.php files and also some blade snippets.

https://marketplace.visualstudio.com/items?itemName=onecentlin.laravel-blade

Laravel Extra Intellisense

A more intellisense package for your Laravel application. This provides auto-completion for route names, view files, configs, etc.

https://marketplace.visualstudio.com/items?itemName=amiralizadeh9480.laravel-extra-intellisense

Laravel GoTo View

Navigate to the view file from the controller with a click. Travel faster to the view file.

https://marketplace.visualstudio.com/items?itemName=codingyu.laravel-goto-view

Night Owl Theme

This is a theme for the editor. Of course, you may install it if you want. Comes in Light and Dark mode.

https://marketplace.visualstudio.com/items?itemName=sdras.night-owl

PHP

This is an all-in-one PHP extension for the VS Code. Helps with intellisense, debugging, formatting, etc. With this, other extensions will also get installed. Those are Composer, IntelliPHP - AI Autocompletion, and PHP Profiler.

https://marketplace.visualstudio.com/items?itemName=DEVSENSE.phptools-vscode

Prettier - Code Formatter

It is a code formatter for various files like HTML, CSS, JS, etc. This is a must for every project, especially the JS projects.

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Project Manager

This extension helps you manage the projects easily in the VS Code.

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

Quick and Simple Text Selection

A text selection extension for your VS Code editor. VS Code by default doesn't have the option to select text between the single quote or double quotes. This extension helps you eliminate that flaw of the editor. Once installed, you may assign a shortcut to the selection as per your convenience.

https://marketplace.visualstudio.com/items?itemName=dbankier.vscode-quick-select

Tailwind CSS IntelliSense

It is the extension for Tailwind CSS auto-completion, syntax highlighting, and linting as well.

https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

VS Code Icons

Ah! The famous folder icons. It is the extension that replaces the default folder with various icons depending on the name of the folder.

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

Vue - Official

Besides just Laravel, if you're also working on Vue Js, this extension is a must. It is a language support for Vue itself.

https://marketplace.visualstudio.com/items?itemName=Vue.volar

VS Code - settings.json

These are the settings that I have in my VS Code. You may copy and paste it as per your convenience.

{
  "[blade]": {
    "editor.defaultFormatter": "shufo.vscode-blade-formatter",
    "editor.formatOnSave": true
  },
  "[php]": {
    "editor.defaultFormatter": "DEVSENSE.phptools-vscode",
    "editor.formatOnPaste": true,
    "editor.formatOnSave": true,
    "editor.formatOnType": true
  },
  "bladeFormatter.format.indentInnerHtml": true,
  "bladeFormatter.format.noMultipleEmptyLines": true,
  "bladeFormatter.format.sortTailwindcssClasses": true,
  "breadcrumbs.enabled": false,
  "dotenv.enableAutocloaking": false,
  "editor.cursorBlinking": "expand",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.cursorWidth": 4,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.fontFamily": "Cascadia Code",
  "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'",
  "editor.fontSize": 16,
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.lineHeight": 48,
  "editor.minimap.enabled": false,
  "editor.stickyScroll.enabled": false,
  "editor.tokenColorCustomizations": {
    "textMateRules": [
      {
        "scope": [
          "comment",
          "constant",
          "emphasis",
          "entity",
          "invalid",
          "keyword",
          "markup",
          "meta",
          "storage",
          "string",
          "strong",
          "support",
          "variable"
        ],
        "settings": {
          "fontStyle": "italic"
        }
      }
    ]
  },
  "editor.wordWrap": "on",
  "explorer.confirmDragAndDrop": false,
  "files.associations": {
    "*.embeddedhtml": "html",
    ".env*": "dotenv"
  },
  "files.insertFinalNewline": true,
  "files.restoreUndoStack": false,
  "files.trimFinalNewlines": true,
  "files.trimTrailingWhitespace": true,
  "php.format.codeStyle": "Laravel",
  "security.workspace.trust.untrustedFiles": "open",
  "terminal.integrated.cursorBlinking": true,
  "vsicons.dontShowNewVersionMessage": true,
  "workbench.colorTheme": "Night Owl Light",
  "workbench.iconTheme": "vscode-icons",
  "workbench.startupEditor": "none"
}

Built your next profitable Laravel application using Visual Studio Code.

Courtesy Links

• Laravel SVG logo from the official Laravel website
• Visual Studio Code logo from the official Visual Studio Code website