bene : studio is a global consultancy, helping startups, enterprises and HealthTech companies to have better product
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.
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.
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:
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.
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:
Now we have come to the general section where we discover utility, cosmetics, and other kinds of useful extensions.
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.
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.
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 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
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 firstname.lastname@example.org. 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!
Read moreSee all open source
Using Schedulers and Cron in Node.JS
Follow out tutorial and learn about scheduling in Node JS
Principles of wiriting clean code
Lessons we learned from our favourite book on software development.
Why we love Next.js and server-side rendering
You should use Next.js because of its benefits in SEO, Integrated routing, pre-rendering and styling.
Integrating Garmin into a running app
Learn how we integrated Garmin library into the Coopah running companion app and what challenges we came accross.
Functional programming in Java with examples
See examples if this style of programming, to make code more concise and less complex.
Let bene : studio enhance
your digital product!