The Three Most Useful Visual Studio Code Extensions For Beginners That Will 2x Your Productivity
I started learning JavaScript just over a year ago and just launched my second startup. I wanted to write this down before I forget how it was to start programming from zero and what helped the most.
GitHub Copilot
GitHub Copilot predicts what code (and comments) you are going to write and autocompletes it for you.
It’s crazy how good it is. Not using it for my first startup was clearly a mistake.
Probably around 50% of my last startup’s codebase is written by Copilot. Influenced by AI? Even more!
I’m keeping Chat GPT open in parallel as well. It acts as a kind of AI mentor — I’ve asked for everything from regex expressions to DOM node manipulation to Chrome extension-specific functions. Usually, it comes back with a pretty reliable answer if you are specific enough with the prompt.
I’ve written about the importance of having mentors before but the problem with human mentors is that they are not always available. I can’t just shoot questions to them all day long. But I can with AI. ChatGPT has been a great help.
ChatGPT takes a while to respond and may be down from time to time due to demand. So, here’s a neat little trick I discovered to save time for simpler questions — you can ask Copilot questions inside the VS Code editor and get instant answers back:
Copilot has a very generous 2-month trial period. I didn’t even double-check the price when the trial ended. Paying for Copilot was probably the easiest buying decision I’ve recently made. It just saves so much time and frustration. No other extension comes even close in terms of utility.
Restore terminals
This is most helpful for full-stack developers probably. My last startup, Lingo Champion, is a Chrome extension for learning languages with a web app attached to it. This means that at any given time I had open at least 4 terminals:
- Chrome extensions directory to push changes to GitHub
- Webapp directory to push changes to GitHub
- Front-end server for web application
- Back-end server for web application
It’s pretty annoying having to open up 4 terminals each time and put them in the correct state.
This is exactly where Restore Terminals helps. Open terminals and run commands in them when you open a workspace in VS Code.
Essentially you just have to create a directory called .vscode/ with restore-terminals.json inside it and put the settings inside it in JSON.
You can even split the terminals neatly. I’ve got servers in one split and terminals for pushing changes in another split.
PS: Don’t forget to add the directory to .gitignore if you don’t want to push it to GitHub.
Highlighting comments
Have you ever written something like this in code comments?
// POSSIBLE BUG!!! - DOUBLE CHECK!!!I used to do it a lot when I didn’t have time to double-check the code immediately at the time of writing. It got messy pretty quickly.
An easier and more elegant way is to use TODO Highlight. It lets you highlight any text patterns in the comments.
Here is the actual setup I use:
It helps to draw my attention to bugs and todo-s immediately which in turn has helped me to keep the code in a better state.
I set different colors for different things like bugs, notes, todos, etc.
Here’s how a file will look like when the extension is active:
Note that you can see immediately on the vertical scrollbar on the right whether there are any highlighted items anywhere in this file. It’s hard to forget about possible bugs when they are highlighted.
Bonus — Two Useful Keyboard Shortcuts
Although not strictly extensions, these shortcuts save me time every single day of coding.
Commenting
CTRL + /
This allows you to quickly comment out a line of code. Or if you’re selecting multiple lines of code, it works there as well. Using the shortcut again will uncomment the line(s).
Moving lines of code up or down
ALT + Up
ALT + Down
Sometimes you need to move a line up or down (usually into or out of the function). The dumb solution for this is to cut and paste, but then you also have to use the mouse, delete the empty line, etc. This shortcut will remove this little annoyance.
Are there any extensions that helped you a lot as a beginner? Please let me know in the comments.
