VSCode is the most widely used text editor because of its ecosystem of extensions. Extensions in VSCode can make your text editor go from just being a text editor to serving as an IDE.
These extensions help you in productivity, efficiency, and consistency. They provide unique features which can help you work faster with technologies like Next JS, React JS, Vue, Node JS, JavasScript.
It can run all codes in a file as well as run a selected code. For example, you can select a function and run that function only. This can be very useful for debugging.
When running a selected code, you should make sure that the selected code doesn’t depend on an unselected code as this can lead to an error.
GitHub Pull Request extension helps you review and manage your GitHub pull requests and issues directly inside VSCode.
With it, you can easily list issues and pull requests from GitHub. You can comment on issues, start working on issues, review and validate pull requests and so much more.
No need to open GitHub’s website to manage pull requests or resolve issues anymore, all can be done right in VSCode.
REST Client allows you to make and manage HTTP requests and view the response directly in your editor.
With this extension, you can easily organize similar HTTP requests (GET, POST, DELETE, PUT, etc), a cool feature for working with APIs. Response from your requests can be easily saved to your local disk.
It also supports GraphQL as well as authentication. It is a great replacement for Postman, Insomnia, RapidAPI and it works right in VSCode, so no need to navigate between two apps.
These errors are generated from syntax errors or violations of the style guide. Style guides are provided by different companies including Airbnb and Google.
ESLint is easy to set up because of its documentation and it’s also very customizable. It helps you customize your style guides and be consistent with them.
But, this is where Prettier comes in, it formats our code to look good and readable. This formatting includes rightly indenting our code, breaking the code down if too long, being consistent with adding semicolons or not and so much more.
TailwindCSS is an open-source extension that gives you interesting features for maximum productivity when using Tailwind CSS.
As we know Tailwind is mostly about classes, this extension gives you a fast autocomplete of all class names in TailwindCSS. With this extension, you can view the style for a particular class name by hovering over it.
Tailwind CSS also provides linting for errors in the stylesheet or markup. So if you wrongly use a class name it will let you know. Cool right?
GitLens supercharges the Git capabilities built into VSCode. It gives you details of any git changes, author, and time of the changes at a glance.
That means while coding you can see details of git changes by the side of the code. On hover, it provides you more git info and actions about that line of code.
These actions include staging changes, committing changes, pushing commits, and much more. You really wouldn’t need the Git CLI with this extension. Also, you can easily navigate and revise git history (backward and forwards) of any file.
This extension is customizable so you can easily change the colors for each level, and you can also extend it to have more colors beyond four.
DotENV extension highlights your
.env files to look good and easy to understand. As a Node developer, this will be very useful when setting up your environment variables in a
This extension provides different colors for comments (it enables comments), strings, numbers, properties, keywords, and much more. This used to be all white in VSCode, but this extension changes that. It basically makes your
.env files look like another language file with syntax highlighting.
VSCode-Icons provides interactive and good-looking file/folder icons based on the name of the folder/file or based on the extension of the file.
With different types of folders or files having different icons you can seamlessly navigate through your project without having to read the name of the folder or file all the time. And this entails easier and faster navigation, while making your editor’s file list good-looking and approachable.
Follow me on my twitter and be notified when I’ll update this list. I’ll share more extensions!
The perfect starter kit to launch your SaaS faster and better. Focus on your business, products and customers instead of losing your time to implement basic functionalities like authentication, Stripe subscription, prebuilt landing page, prebuilt dashboard page, form and error handling, CRUD operation, layered architecture, deployment, server maintenance, etc.