How to become a VSCode power user
At bene : studio we love knowledge sharing to help the community of professionals. With 10+ years and over 100 projects behind us, we have a vast amount of experience. This is why we have launched a knowledge base on our blog with regular updates of tutorials, best practices, and open source solutions.
These materials come from our internal workshops with our team of developers and engineers.
Pardon the interruption, we have an important message!
We are looking to expand our team with talented developers. Check out our open positions and apply.
Introduction
VSCode is one of the most commonly used IDE amongst developers, let them be full-time or hobby coders. As simple it is – compared to its big brother, Visual Studio – all the more complex things you can do with it. And you are normally doing these complex actions (or not) and wonder why everything takes so much time. Yes, time is the most valuable asset for you, so it’s crucial to effectively work and save as much time as you can.
In this article, we are going through some of our most commonly used extensions, key bindings, and best practices, that save us a lot of time, headache, and mess. As you may have guessed, the focus is on JavaScript and React, but we are also sharing some general tips.
VSCode extensions
Extensions are simple “applications” that can be installed into VSCode. They provide you with usable actions, extra information about your project, or … well, there is most probably an extension for everything. Like this one: Coins lets you check up on the latest crypto prices INSIDE VSCode.
So let’s dive into a categorized list of our favorite extensions:
React
Working with React often comes with small headaches and troubles. Imagine that you want to rename one of the JXS elements from a div to an h1. You rename the starting tag, then scroll down and search for the closing tag. You rename one of the many divs, hoping it’s the right one. You missed it. We feel your frustration. There comes help from Auto Complete Tag. This actually combines 2 separate extensions (Auto Rename Tag and Auto Close Tag).
The next one is Fullstack React/React Native snippets. Need I say more? It has virtually every code snippet that you will ever need. Contains snippets for React, Redux, Styled-Components, Hooks, Testing, and general ES7.
JavaScript
In this group, we are talking more generally about helpful JavaScript extensions. If you are using React and ES201x features then you will need Babel JavaScript, an essential syntax highlighting tool. And we could not miss out Color highlight as well.
We now see a beautiful, colored syntax in front of us, but it doesn’t really help with deeply nested code structures. That’s why we use an extension to Indent[icator] the code blocks.
If you are using TypeScript with moderately sized JSON schemes (like an API response) you can use this extension to Paste JSON as Code. Debugging JS code can be cumbersome but with the help of Turbo Console Log, your work will be easier. And here are the last two for this section:
Other extensions
Now we have come to the general section where we discover utility, cosmetics, and other kinds of useful extensions.
Code cosmetics
These types of extensions are visually helping us either by formatting the code in a conventional way, coloring brackets and grouping them by colors, or highlighting any TODO comment that we left in the code to not forget them.
Git
Every developer must be familiar with Git. By fully incorporating into our working style, these extensions help us see who made what changes and when.
Utility
By utility extensions, we mean these general ones that don’t particularly help with a problem, but rather elevating your DX (Developer Experience). If I have to pick one, the most crucial in my opinion is Settings sync. Have you ever switched computers and faced the situation to find and reinstall all your favorite extensions, workspace/user settings in VSCode? This helps by saving a snapshot of ALL of your settings in a private GitHub Gist. On your new computer, you just sync with that, and you are good to go.
Key bindings
Key bindings are a set of 2-3 (3+) keys pressed together to achieve a functionality that you would have made by navigating around with your cursor in menus/options clicking on buttons etc. Because during coding both your hands are on the keyboard the amount of time saved by pressing some buttons instead of navigating directly to a menu is insane. Of course, these are best to be memorized and you are going to notice the effectiveness over the long run. These are for Mac, but the whole setup can be found for those who use Windows or Linux
Opt + left or right: jump between words
Opt + up or down: move line down/up
Cmd + left or right: start/end of line
Cmd + up or down: go to beginning/end of file
Shift + opt + up/down: copy line down/up
Shift + (opt) + left/right: select characters (by words)
Cmd + click: go to reference
Opt + click: insert cursor
Opt + cmd up/down: multiple vertical cursors
F2: rename symbol
Cmd + P
- Search file
- :<row>:<char>: jump to position in code
Cmd + dot: import missing
Suggestions
Peek reference (Cmd + R)
- Right-click > peek references
Open terminal (Cmd + ö) or (Cmd + 0, on QWERTY)
This last part is a workspace/user preference to use single quotes (‘) for TypeScript. Put this line into settings.json.
- “typescript.preferences.quoteStyle”: “single”
These were our best practices regarding VS Code. Do you want to ask some questions or do you have suggestions to extend this article? Share them with us via e-mail to partner@benestudio.co. If you liked it please share it with your peers.
Looking for a partner for your next project? Check out our services page to see what we do and let’s set up a free consultation.
Join our team, we are hiring!
