Setting up VS Code for streamlined Laravel and Vue development

~ 4 minutes - Published on Aug 16, 2018

tl;dr: Install and configure this plugins and you’ll be good to go with Laravel/Vue development in VS Code:

If you haven’t heard of VS Code by now, you’ve probably been living under a rock. It’s a lightning-fast code editor built on the Electron framework with a massive amount of extensibility and a huge library of themes and plugins, all courtesy of Microsoft. I’ve been using it for almost two years, and for the last year full-time after a transitionary period switching frequently between it and PHPStorm.

Why’d I settle on VS Code? In all honesty, the biggest factor for me was speed. Booting up one, or multiple, instances of VS Code is a non-issue. It loads up super fast, even with all of the plugins listed above. Opening whole projects, searching via regex, finding specific blocks of code, or scrolling through massive log files, I’ve never had a hiccup in speed or responsiveness. Using it in the command line is also a breeze by typing code . in the appropriate project root folder.

While these plugins make it a formidable IDE for Laravel and Vue development, there are some caveats. Deep integration into Laravel code for things like autocompletion aren’t perfect and some facades/relationships won’t show up; a trade-off for speed and cost. With that being said, let’s dive into some plugins!

 

Laravel Blade Snippets

Code screenshot of Laravel Blade Snippets in action

This is arguably the most necessary plugin for Laravel development on VS Code. Not only does it provide appropriate html/php syntax highlighting for Laravel’s Blade templates, it also adds in emmet functionality for them as well. Typing foreach and hitting tab while in a Blade file will autocomplete into a foreach loop structure. The same works for other Blade methods like component, switch, and slot.

 

Laravel Goto View + Laravel Goto Controller

Code screenshot of Laravel goto view and Laravel goto controller in action

Not really necessary, but definitely helpful in making VS Code more IDE-like, these simple little plugins underscore view and controller names. Holding down ctrl (or cmd) and clicking on them will open up the appropriate file in a new tab. While using Goto Controller, if you include the method in your controller file (e.g. PostController@show) it’ll jump you right to the method in question.

 

PHP Intelephense

Code screenshot of PHP Intelephense in action

This is arguably the most powerful plugin for turning VS Code into a full-blown IDE. There’s a handful of highly-rated PHP Intellisense plugins all with varying degrees of speed, reliability, and code depth, but this one has taken the top spot for me when it comes to Laravel development.

Some of the basic features that you’ll get with it are basic class suggestions, hints about generic PHP methods/functions, and some limited-scope autocompletion in your app. However, to get the real full-blown experience I highly recommend that you install and configure barryvdh’s Laravel IDE helper alongside any project that you can. It provides much deeper integration into the Laravel environment (a big one being suggestions on Eloquent relationships).

Additionally, it’s recommend that you add the following to your settings.json file to prevent a ton of generic PHP suggestions from flooding your autocorrect window: "php.suggest.basic": false

 

Vetur

Code screenshot of Vetur in action

The VueJS plugin. Not just syntax highlighting for Vue components, but also emmet tab-completion, syntax/error checking, and pretty advanced autocompletion with code suggestions and method hints on all native Vue methods. For instance, in the screenshot above if you were to rollover the native transition element, you’ll be greeted with a pop-up box and the following content:

<transition> serves as transition effects for single element/component. It applies the transition behavior to the wrapped content inside.

If you include Sass/stylus in your Vue components and have the appropriate plugins installed, you’ll also have the appropriate syntax highlighting and formatting added in with the help of Vetur.

With the help of the ESLint plugin and following some basic project setup on the Vetur documentation page, you can lint your Vue components without a hassle.

 

That’s all for now! This setup has made me pretty happy over the last year developing dozens of Laravel and Vue projects. If you have any suggestions for additional plugins or settings that would make working with them in VS Code even easier, don’t hesitate to let me know!