20 VS Code Extensions to INCREASE Productivity 2024 + Themes, Icons, & Shortcuts
Optimize your VSCode setup like a pro! In this tutorial, I reveal my top 20 vscode extensions for productivity, plus essential tips on themes, icons, and 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.