VS Code and Laravel Pint - 2 Methods

Laravel Pint

For those of you who are not familiar with Laravel Pint, it an opinionated PHP code style fixer.

Pint is built on top of PHP-CS-Fixer and makes it simple to ensure that your code style stays clean and consistent.

If you are using Laravel 9 or higher, Pint is automatically installed, and you can start using it right away by running:

./vendor/bin/pint 

However, running this command everytime from the terminal can be annoying. If you are using VS Code, there are two methods to automate this process.

Via Extensions

This method is the simplest of the two, but it lacks flexibility and control.

First, install the following extension Laravel Pint.

Once the extension is installed, you need to edit your settings.json file as follows:

"editor.formatOnSave": true,
"[php]": {
    "editor.defaultFormatter": "open-southeners.laravel-pint"
},

• The first option specifies that everytime you save a file, it should be formatted.
• The second option sets the default formatter for PHP files to Laravel Pint, this ensures that you don't get prompted to select a formatter, especially when working with multiple PHP extensions that have their own formatters.

And that's it, you are all set up! Everytime you save your files, Pint will fix your code styles.

Via Tasks

This method gives more control over how Pint will be run.

Some users prefer to keep their VS Code setup minimal. For example, in the first method mentioned, the extension adds itself to the status bar, which may appear red if you are not working on a Laravel project. This can be triggering for some users (I am one of them).

And as I said earlier, using the extension limits what you can do, you need to stick with the default Pint command, without the ability to pass additional arguments like specifying a directory, for example.

We can solve this by using Tasks, and I promise you, you will love it!

Start by creating .vscode/tasks.json, and paste the following content:

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Pint",
            "type": "shell",
            "command": "./vendor/bin/pint ./app",
            "presentation": {
                "reveal": "silent"
            }
        }
    ]
}

As you can see, the task configuration is self-explanatory. We have defined a command that runs the Pint executable specifically for formatting the app directory. Additionally, we have set the reveal option to silent to run the task in the background without displaying the execution details.

You can now run the task by pressing Ctrl+P, typing Tasks: Run Tasks and selecting Pint. However, we need to improve the workflow by mapping this task to a custom keybinding, otherwise, it would be just as annoying as executing it from the terminal.

To configure a keybinding, follow these steps:

1. Press Ctrl+P and type Preferences: Open Keyboard Shortcuts (JSON) to open the keybindings.json file.
2. Add the following configuration to the file:

{
    "key": "shift+s",
    "command": "workbench.action.tasks.runTask",
    "args": "Pint"
}

• You can choose any key combination that you find comfortable to use.
• The args value needs to match the label set in tasks.json.

Once you save the keybindings.json file, you can press Shift+S to run the Pint task directly without going through the menu.

And that's it, you are all set up! You have not only automated the process but learned about Tasks, a simple yet powerful tool.