Setting up VS Code for Vue and Laravel development

05Sep

Why use VS code?

If you’re a part of the developer universe, there was no getting around hearing about how fast, light and flexible VS code is over the past few years.
A bit of research about its growth spurt proves what we implicitly know – the VS code rise is undeniable, especially in hands-on programming.
It’s only in 2018 that official data came out showing that it is now the no.1 editor.
According to Triplebyte’s data (a giant in technical hiring sphere), 16.8 % of their interviewees used it.
Furthermore, there was no close second, with Vim, IntelliJ and Sublime text sharing the title of the runner-up with around 10% each.

What you’ll need and what to expect

Let’s dive right in and start with the basics – the plugins you’ll need for Vue/Laravel development in VS code:

  • Laravel Blade Snippets
  • Laravel-goto-controller
  • Laravel goto view
  • PHP Intelephense
  • ESLint
  • Vetur

With the VS code being a relatively young editor, there are still some kinks to iron out in the integration.
You might, for example, find that deep integration with Laravel is anything but perfect. Still, the upside of speed alone is worth it.
With that said, let’s get to the nitty-gritty and go through a rundown of plugins you’ll need.

A closer look at the plugins

Laravel Blade Snippets

Arguably, the plugins we’ll go through can be grouped into two categories, the essentials and the optionals.
Blade snippets belongs to the former.
Primarily, you’ll need it to provide suitable PHP/HTML secondary notation (syntax highlighting) for Laravel Blade templates.
As a secondary function, it saves time by offering emmet functionality/autocomplete for the templates.

Laravel Goto Controller + Laravel Goto View

These two belong to the later of the above-mentioned plugin groups – the optionals.
They make the job much easier and certainly make the code more IDE-like by underscoring view and controller names.
If you click on the underscored sections and hold command or ctrl, the file will automatically open in a new tab.
A huge time saver if you ask us.

PHP Intelephense

Intelephense is a powerhouse at your disposal if you want to efficiently turn VS code into IDE.
Granted, it’s not the only PHP Intellisense plugin that can do the job. As you surely know, there is a plethora of these little helpers and they vary in speed and code depth.
But when it comes to Laravel development, Intelephense is the king of the hill.
Pro tip: Make sure that you install barryvdh’s Laravel IDE helper.
The two are a great fit and “feed” off each other’s functionalities.
The Intelephense does a range of smaller jobs, from class suggestions and recommendations on PHP functions/methods to a limited range of autocomplete.
On the other hand, the IDE helper allows for deep but seamless integration with the Laravel.
A caveat: In the environment we described above, you might see a flood of generic PHP suggestions in your autocorrect window. To avoid it, just add the following piece of code to your settings.json file – “php.suggest.basic”: false

Vetur

Vetur is a beast among VueJS plugins. It does duch more than syntax highlighting.
Vetur can even recognize the type of code that’s in a file just by interpreting the extension.
A range of its capabilities can help with the job we’re analyzing today. Anything from emmet tab-completion and checking for errors in the syntax, through code suggestions to Vue method hints.
On top of all that, Vetur can also help by adding highlighting and formatting, given of course that you have the needed setup (the right plugins installed and Sass/stylus included).

Outro

It can be overwhelming if it’s your first time setting up VS Code for Laravel and Vue development.
In reality, once you get the basics in place, you’ll be up and running in no time.
So, our final tip would be to take your time from the get-go and get all the basics running smoothly.
That extra bit of time invested will pay long-term dividends in productivity.