VSCode is the most widely used text editor because of its ecosystem of extensions. Extensions in Visual Studio Code 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 testing. It's the perfect extension for playground with instant preview and understand how your code behave in runtime.
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 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. You can also view the response directly in your editor.
All HTTP requests (GET, POST, DELETE, PUT, etc) are supported with this extension. So, you can make any requests without any limitation. Then, responses from your requests can be easily saved to your local disk if needed.
It also supports GraphQL as well as authentication. It is a great replacement for Postman and Insomnia. 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. You can configure ESLint yourself or style guides 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.
Tailwind CSS 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 Tailwind CSS. 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 inside your 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 git information right next to the 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.
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, 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 nicer 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 all the time the name of the folder or file. And this entails easier and faster navigation, while making your editor's file list good-looking and stylish.
Follow me on my twitter and be notified when I'll update this list. I'll share more extensions!
React SaaS is 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.