20 VS Code Extensions to INCREASE Productivity 2024 + Themes, Icons, & Shortcuts
Code editor is where you’ll spend most of your time as a developer. Therefore, you need to make sure it is set up properly and is visually appealing to make you as efficient as possible.
That’s why, in this article, I will show you my VS Code setup, which I’ve been using in my day-to-day work as a full-time developer.
I’ll share with you a list of the top 20 extensions, as well as themes and icons that I use to enhance the appearance and the most commonly used shortcuts.
You will discover at least one new cool extension here.
Step 1: Get VS Code
If you don’t have VS Code installed yet, head to code.visualstudio.com and download the stable version. Once installed, it’ll look pretty basic. Let’s change that because… yikes.
Meet Your New Best Friend: The Navigation Bar
Let’s get familiar with that left-hand navigation bar:
- File Explorer: This tab is for browsing through your project files
- Search: Here, you can search for specific lines of code within the project
- Source Control: This is for source control and allows you to stage, commit, and track code changes
- Debugger: Here, you can set breakpoints, inspect variables, and step through your code to zero in on issues fast.
- Extensions: This is where the magic happens — more on this in a sec
Extensions: My Top Picks
If you hit the Extensions tab, you can search for an extension by name and hit Install. Don’t forget to enable them afterward if needed. Okay, here’s what I consider essential:
- Auto Close Tag: No more fumbling with closing HTML tags; this one does it for you.
- Auto Import: Hassle-free import of TypeScript (or JavaScript) modules. Detects what you need and does the rest.
- Auto Rename Tag: Rename an HTML tag, and its mate updates it instantly.
- Code Spell Checker: Grammar police for your code. It catches typos in variable names.
- DotEnv: Adds color and sanity to your environment variable files.
- Docker: This adds a tab for super easy container work if you work with Docker.
- ESLint: Catches code issues on the fly, like formatting or potential bugs.
- Figma: Embed and view Figma design files right within VS Code.
- GitHub Copilot (and Copilot Chat): AI-powered suggestions as you type and a ChatGPT-style chat window right in your editor.
- GraphQL: Several extensions here that make GraphQL life simpler.
- Import Cost: See the size of imported packages– catches potential bloat.
- Indenticator: This makes it easier to track where you are in deeply nested code visually.
- Live Server: Launches a local server with auto-reload, which is great for previewing changes.
- Live Share: Pair program with others seamlessly, both of you coding in the same editor in real-time.
- Markdown Preview Enhanced: Live preview of your Markdown files as you edit.
- Notes: Keep a handy scratchpad for project notes, setup instructions, etc.
Let’s Make it Pretty: Themes and Icons.
Let’s fix VS Code’s default look. You need these two extensions for it:
After installation, hit Cmd + Shift + P (Ctrl + Shift + P on Windows), search for “theme” and open “Preferences: Color Theme”. Here, you’ll see all the available themes. The ones starting with Material Theme are the ones we installed via extensions.
My preferred themes are:
- Material Theme High Contrast
- Material Theme Darker High Contrast
- Material Theme Palenight High Contrast
Pro-tip: Search “Accent Color” in settings to pick the color for highlighting active files (mine is Bright Teal).
Most useful Shortcuts
Master a few shortcuts, and you’ll code at warp speed. Check the official list for your OS (Windows / macOS), but here’s what I use NON-STOP:
Navigation
- Cmd + B: Toggle file explorer
- Cmd + P: Search for a file by name
- Cmd + Shift + P: Access any setting fast
- Ctrl + `: Toggle the terminal on/off
Editing
- Cmd +/-: Zoom in/out
- Cmd + Shift + F: Find a word or phrase across the project
- Cmd + W: Close the active file
- Cmd + Shift + T: Open a recently closed file
- Cmd + D: Select the next occurrence of the current word for multi-edit
- Option + up/down: Move the current line up/down
- Option + Shift + up/down: Duplicate the current line
- Cmd + X: Cut the current line
- Cmd + left/right: Go to the start/end of the line
- Option + left/right: Go one word left/right
Finder/Explorer Integration
- Right-click on a folder: Select “Find in folder” to search within a specific directory only.
- Right-click on a file: Choose “Reveal in Finder” (or its OS equivalent) to open the file’s location.
Your Turn!
That’s how my VS Code is set up. And hey, if you have a favorite extension, theme, or shortcut I haven’t mentioned, drop it in the comments!
Check out our Free Web Developers Community for more helpful tips like this.
