How to setup VSCode to work with Craft CMS

Our guide for recommendations on setting up VSCode to work as your preferred IDE with Craft CMS. Includes autocompletion, debugging and more.

Oscar de la Hera Gomez
Written by Oscar de la Hera Gomez
First published on 12/26/2022 at 12:16
Last Updated on 02/14/2023 at 10:51
Two flowers that represent Craft CMS & VSCode side by side. Beneath them sits the text "VSCode Setup."

Our guide for recommendations on setting up VSCode to work as your preferred IDE with Craft CMS. Includes autocompletion, debugging and more.

Download VSCodeDownload Open Source Craft CMS ProjectHow to create & setup a Craft CMS projectCraft CMS & DDEV: A Quick Start Guide (2022)

Setup Auto Complete

A screenshot of the VSCode Extension for Laravel Intellisense.

To setup Auto Complete functionality you must install the Laravel Intellisense extension.

Navigate to the Extension MarketPlace and search for Laravel Intellisense, select the top result and press install.

Learn more about Laravel Intellisense for VSCode

Setup Debugging with XDebug

A screenshot of XDebug.org's landing page.

To be able to debug Craft CMS with VSCode you need to download and install XDebug and set it up to function with VSCode.

Follow the tutorials linked below to install it for your OS.

Download XDebugHow to get DDEV to work with XDebug and VSCodeDebugging PHP with XDebug and PHP (Windows)Setup XDebug in MacOS

Any Questions?

We are actively looking for feedback on how to improve this resource. Please send us a note to inquiries@delasign.com with any thoughts or feedback you may have.

SubscribeInquireView All PostsView All ServicesView All Work

Partner with us

We would love to get to know you and see how we can help your organization with its goals and needs.
Let's Talk

Stay Informed

Get occasional updates about our company, research, and product launches.
Subscribe