VS Code Extensions That Actually Matter for PHP and React Devs
I’m going to save you about three hours of scrolling through the VS Code marketplace. You know that rabbit hole. You start looking for one extension, and suddenly it’s midnight and you’ve installed 47 things that promise to “revolutionize your workflow.” Spoiler: most of them just slow down your editor and add icons you’ll never click.
After years of building WordPress themes, React apps, and various unholy combinations of both, I’ve narrowed my setup down to the essentials. These are the coding tools that actually earn their keep.
The Foundation: Extensions Both Camps Need
ESLint + Prettier: The Dynamic Duo You Can’t Skip
Install both. Configure them to work together. Never think about code formatting again.
Seriously. The amount of mental energy developers waste on tabs versus spaces debates could power a small city. Let Prettier handle it. ESLint catches the actual problems. Your PR reviews get shorter. Everyone wins.
Quick tip: add "editor.formatOnSave": true to your settings. Now your code formats itself when you hit save. Magic? No. Just basic productivity that took me embarrassingly long to discover.
GitLens: Because Git Blame Shouldn’t Require a Terminal
GitLens shows you who wrote what, when, and why—right in your editor. Hover over any line and see its entire history. It’s like having X-ray vision for your codebase.
The “who broke this” feature alone justifies the installation. Sometimes that person is past-you. That’s character development.
PHP Development: Making VS Code Not Suck
Here’s a truth nobody tells you: VS Code wasn’t built for PHP. Out of the box, it treats your PHP files like slightly weird text documents. You need to fix that.
Intelephense: The One Extension That Changes Everything
Free tier or paid, Intelephense transforms VS Code into a legitimate PHP IDE. Autocomplete that actually works. Go-to-definition that doesn’t lie to you. Error detection before you even save the file.
The premium version costs $12 once. Not monthly. Once. For rename refactoring, code actions, and advanced formatting. I resisted paying for months because I’m stubborn. Don’t be me.
PHP Debug + Xdebug: Stop Using var_dump Like It’s 2005
Setting up Xdebug feels like assembling IKEA furniture without instructions. But once it’s working? Breakpoints. Step-through debugging. Variable inspection in real-time.
If you’re doing serious WordPress development—like building custom Gutenberg blocks—proper debugging isn’t optional. It’s survival.
PHP Namespace Resolver: For When You’re Drowning in Use Statements
One keyboard shortcut. Automatically imports the class you need. Sorts your use statements alphabetically. Done.
I cannot overstate how many times this extension has prevented me from rage-quitting a Laravel project.
React JS: Extensions Worth Your RAM
ES7+ React/Redux/React-Native Snippets
Type rafce. Hit tab. Get a full functional component with export. That’s it. That’s the productivity hack.
The snippet library is massive. Arrow functions, hooks, prop types—all accessible through abbreviations shorter than a tweet. Your fingers will thank you after the thousandth component.
Auto Rename Tag: Small But Mighty
Change an opening tag, the closing tag updates automatically. Sounds trivial until you’re refactoring JSX and realize you’ve been manually updating both sides like some kind of caveman.
Styled Components / Tailwind CSS IntelliSense
Pick your poison. If you’re on the Tailwind CSS train, the official extension gives you autocomplete for every utility class. Color previews. Linting for class order.
For styled-components folks, syntax highlighting inside template literals prevents the “is this CSS or JavaScript” existential crisis.
The Power User Additions
Thunder Client: Postman Without Leaving VS Code
API testing inside your editor. No context switching. No separate app eating your memory. Just clean request/response interfaces right where you’re already working.
For REST API debugging during PHP development, this thing is genuinely excellent.
Error Lens: Inline Errors That Actually Get Noticed
Shows errors and warnings directly in your code, not just in the problems panel. The red highlighting is impossible to ignore. Which is exactly the point.
Combined with proper linting, this catches issues before they become performance problems in production.
GitHub Copilot: Yes, It’s Worth It
Look. I was skeptical. An AI writing my code sounded like a recipe for disaster. But Copilot has genuinely changed how I work. It’s not replacing thinking—it’s replacing typing. Big difference.
There’s ongoing debate about Copilot versus ChatGPT for coding, but honestly? In-editor autocomplete hits different than tab-switching to a chat window.
Extensions to Avoid (Hot Takes Incoming)
Bracket Pair Colorizer? Native to VS Code now. Uninstall it.
Path Intellisense? Intelephense handles this for PHP. Built-in handles it for JavaScript.
That extension with 200 downloads and no updates since 2019? Hard pass.
Every extension adds startup time. Every extension is a potential conflict. Audit your list quarterly. Be ruthless.
My Actual Setup (Copy This If You Want)
- Intelephense (premium)
- ESLint + Prettier
- GitLens
- ES7+ React Snippets
- Tailwind CSS IntelliSense
- Auto Rename Tag
- Error Lens
- Thunder Client
- GitHub Copilot
- PHP Debug
That’s ten extensions. Not thirty. Not fifty. Ten that I actually use daily.
The Real Productivity Secret
Here’s what nobody mentions in these listicles: the best VS Code setup is the one you actually learn. Keyboard shortcuts matter more than extensions. Understanding your tools beats collecting them.
Spend an hour learning VS Code’s built-in features. Multi-cursor editing. Command palette. Integrated terminal tricks. Then add extensions to fill actual gaps, not imaginary ones.
Your future self—the one not waiting 30 seconds for VS Code to load—will appreciate it.