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.
Code Runner
Code runner can easily runs your code and produces the results in your VSCode Output (terminal window). This extension can run codes from over 41 popular languages including JavaScript, Python, and Rust.
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 Requests
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
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.
ESLint
ESLint is a popular JavaScript open-source library by OpenJS foundation. You can now integrate the famous linter into VSCode with this extension. It detects errors based on your project configuration. Then, you can automatically fixes them or provides options for manually fixing them.
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.
Prettier
Oftentimes the format of our code can quickly be messed up: we wrongly indent our JavaScript code, we write beyond 80 characters per line, and so on. All these can make our code look really ugly and hard to read, which means hard to maintain.
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.
You can easily run prettier right inside VSCode. ESLint and Prettier can perfectly work together to help give your team a JavaScript style guide to be consistent with, very useful for maintainability.
Tailwind CSS
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
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.
Indent Rainbow
Indent Rainbow colorizes the indentations before your code. This is very useful for languages like JavaScript and Python. With each level having different colors you can easily tell what level of indentation you are.
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
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 .env file.
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
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.
Conclusion
As a ReactJS developer, an extension like ESLint, coupled with Error Lens, can help you see and fix warnings and errors. This saves time and keeps your coding session productive. Not only in React, but also in JavaScript. Be sure each of these extensions will be of great help to you and your team of developers to code in the simplest and cleanest possible way.
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.
