In this article · 9 sections
- PHP
- PHP Intelephense
- PHP Debug (Xdebug)
- Formatting and code quality
- Prettier
- ESLint
- EditorConfig
- HTML and CSS
- Live Server / Live Preview
- Auto Rename Tag
- Tailwind CSS IntelliSense
- Color highlight
- Git and collaboration
- GitLens
- Live Share
- Productivity
- Path Intellisense
- Error Lens
- Todo Tree
- REST Client or Thunder Client
- Database clients
- Remote development
- Remote – SSH
- Setup tips
- Recommended starter set
- FAQs
- Is VS Code free for commercial use?
- Do these extensions slow down VS Code?
Visual Studio Code is the most popular free code editor for web developers. On its own it's good; with the right extensions it becomes excellent. Here are the best VS Code extensions for web development, focused on PHP, HTML, CSS and JavaScript, the stack behind most business websites.
Extension names and features change; check the marketplace for the current version and publisher.
PHP
PHP Intelephense
Fast autocomplete, go-to-definition, error detection and documentation for PHP. One of the most useful extensions for PHP developers.
PHP Debug (Xdebug)
Step through PHP code with breakpoints instead of guessing with var_dump().
Formatting and code quality
Prettier
Automatically formats HTML, CSS, JavaScript, JSON and Markdown consistently. Turn on "format on save".
ESLint
Finds JavaScript errors and bad patterns as you type.
EditorConfig
Keeps indentation and line endings consistent across a team.
HTML and CSS
Live Server / Live Preview
Opens a local preview that reloads when you save, ideal for static HTML/CSS work.
Auto Rename Tag
Rename an opening HTML tag and the closing tag updates automatically.
Tailwind CSS IntelliSense
Autocomplete and previews for Tailwind classes, if you use Tailwind. See Tailwind vs Bootstrap.
Color highlight
Shows colour previews next to hex and rgb values.
Git and collaboration
GitLens
Shows who changed each line and why, plus rich history views. See Git and GitHub basics.
Live Share
Edit and debug together in real time, useful for pair programming or remote help.
Productivity
Path Intellisense
Autocompletes file paths in src and href attributes.
Error Lens
Shows errors and warnings inline, right on the line.
Todo Tree
Collects TODO and FIXME comments into one list.
REST Client or Thunder Client
Test APIs from inside VS Code.
Database clients
Several extensions let you browse MySQL databases directly in VS Code.
Remote development
Remote – SSH
Edit files on a VPS directly over SSH, with full editor features. Use carefully on live servers; prefer staging.
Setup tips
- Don't install everything. Too many extensions slow the editor
- Use Settings Sync to keep the same setup on all computers
- Add a
.vscode/extensions.jsonto projects to recommend extensions to teammates - Turn on format on save and trim trailing whitespace
Recommended starter set
| Purpose | Extension |
|---|---|
| PHP intelligence | PHP Intelephense |
| Formatting | Prettier |
| JS quality | ESLint |
| Git | GitLens |
| Inline errors | Error Lens |
| Preview | Live Server |
FAQs
Is VS Code free for commercial use?
Yes, VS Code is free, including for commercial work. Individual extensions have their own licences.
Do these extensions slow down VS Code?
A few won't. Disable extensions you don't use, or enable some only per project.
Joboo Web's developers use a modern workflow (Git, code formatting, staging) for every project. See what we can build.