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 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:
Highlight Matching Tag
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:
Auto Rename Tag
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:
VSCode React Refactor
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:
Code Spell Checker
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:
JavaScript Booster
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:
That’s all about my favorite extensions for increasing productivity and better coding. Hope, that these extensions will help you too.
Top comments (0)