Supercharge Your React Native Development with These 6 Visual Studio Code Extensions. #lastone Will Blow Your Mind!

Boost Your Productivity with React Native

We all want to produce amazing work more quickly, effectively, and on schedule. Unfortunately, sometimes we spend too much effort formatting, rearranging, and keeping our code clear and clean.

When you have established principles, it is much simpler to work efficiently since you don’t have to spend time overthinking how to structure components, where to place styles or tests, how to test your functions quickly, and other issues. since I’m not alone in a project and I have defined some rules which could help me automate things as much as possible.

I use a variety of VS Code extensions, but I’d like to share ones that I find particularly useful.

Prettier — Code formatted

The Prettier VS Code extension on the marketplace

The Prettier extension is an essential tool for JavaScript developers, as it automatically formats your code so that it conforms to the prevailing style guidelines. This allows you to focus on the important aspects of writing code and avoid spending time formatting and cleaning up your code.

Prettier in action:

Prettier extension in action

Highlight Matching Tag

The Highlight Matching Tag VS Code extension on the marketplace

Whenever you want to look at a closing and opening tag in React Native components (especially in bigger components), finding the right tag takes a lot of time. Sometimes, we also end up modifying the wrong tag due to this problem. This extension is perfect in these situations, you just have to hover over a component and the closing/opening tag will be highlighted automatically.

Highlight Matching Tag in action:

Highlight Matching Tag extension in action

Auto Rename Tag

The Auto Rename Tag VS Code extension on the marketplace

However we have multi-cursor editing in VSCode, but not every time we want to scroll down to find the matching tag to rename it. This extension works like a charm in such conditions, you just have to rename a component and it will automatically rename the other closing/opening tag.

Auto Rename Tag in action:

Auto Rename Tag extension in action

VSCode React Refactor

The VSCode React Refactor VS Code extension on the marketplace

Sometimes we all need to refactor all code and it is nice to have a tool, that can help with it. With this extension, it is very easy to select code lines that should be extracted to new components and that’s all.

I usually prefer creating new components with predefined templates, but sometimes the component is so simple and small, that you just don’t need that approach.

VSCode React Refactor in action:

VSCode React Refactor extension in action

Code Spell Checker

The Code Spell Checker VS Code extension on the marketplace

Having a typo or misspelling on a comment, or even on a variable name may not break your code, but it reflects poorly on you. so why not use a Visual Studio extension to check for it?

Code Spell Checker helps you avoid typos and misspellings in your code by providing spell-checking capabilities. It also suggests alternatives, so you can easily find the correct spelling of a word without having to look it up manually.

Code Spell Checker in action:

Code Spell Checker extension in action

JavaScript Booster

The JavaScript Booster VS Code extension on the marketplace

It’s finally possible to use one of my favorite WebStorm features with VS Code. automatically suggests quick actions to refactor or enhance your code by analyzing your code and its context.

It supports multiple code actions from refactoring conditions, declarations, functions, typescript, promises, JSX, and much more.

JavaScript Booster in action:

JavaScript Booster extension in action

That’s all about my favorite extensions for increasing productivity and better coding. Hope, that these extensions will help you too.