Prettier makes your life easier by automatically formatting code for you. This helps you maintain a consistent coding style across your various projects and is especially helpful when working in a team or in an open source project where coding styles often conflict.
Now, you can just agree on a specific style with your team members and configure Prettier to enforce your guidelines. You can use Prettier via the command line, but there’s a nifty extension for VSCode that integrates the tool with your editor making it easy to format your code when you save the file you’re working with.
Quokka.js brings an alive playground to your editor which is handy for a quick experimentation or when teaching others. It runs your code immediately you type it in and shows you the various execution results inline in your editor without having to open the console.
Snippets are an important feature that developers commonly take advantage of to make writing repetitive code much faster. For example, you can type
clg and hit the Tab key to produce
thenCatch is expanded to a
.then() and a
.catch() declaration to a Promise.
You can find more snippet extensions for other languages and libraries on the Visual Studio Code Marketplace.
Import Cost shows you the size of an imported third-party package inline in your editor to help you make better decisions about what packages to include in your application so as to avoid shipping massive bundles to your customers.
Auto Import finds all the imports in your file and provides code actions and completion for each one. When working with TypeScript, you can just start using the module and this extension will add the appropriate import statement for you at the top of the file.
Auto Rename Tag
Auto Rename Tag helps you automatically rename paired HTML/XML tags in your project. As soon as you change one tag, the other is updated to match the change. This also works with JSX and TSX so it will prove a very handful for you if you use either syntax to describe the UI of your application.
Auto Close Tag
It is often useful to maintain the same configuration for your editor across all machines to keep things consistent. Even if you use just one machine, it is useful to have a process for backing up all your settings so that if something goes wrong, or if you move to a new machine, you can easily restore your preferences with one click.
This is where an extension like Settings Sync helps. It synchronizes your Visual Code settings across multiple instances. This includes your preferences, themes, snippets, extensions and keybindings. It is very easy to use and won’t take you much time to set it up so I highly recommend that you check it out.
Live Server helps you spin up a quick development server that automatically reloads your project in the browser as you make changes. This extension not only works with static files, it also auto reloads the browser when you make changes in your server-side code which is super handy for all you Node.js developers.
Wallaby.js costs $100 for a single user license, but it offers a free trial period for you to test and evaluate the product.