This section describes the tools and plugins that are used for development.
Visual Studio Code is the default IDE for development. It is technically not an IDE, but a modern text-editor that is powered with extensions. VS Code by default has support for Typescript and NodeJS IntelliSense, and is made more powerful with the help of extensions.
Extensions help us organize, test, and understand the code better. Here are some extensions and how they help during development:
Not only does this extension help highlight TODOs and NOTEs, it can even be customized to highlight other keywords. A customized version of this extension helps divide a file visually to aid readability. The custom settings to add to the extension (once downloaded to VS Code) can be found here.
GitLens provides a way to see inline Git contributions, helping developers understand and review code better.
ART speeds up development by automatically renaming the ending tags when writing JSX. The speed boost, while minimal, adds up in the long run.
Color Highlight shows color codes (HEX, RGB, HSL, etc.) within the code editor itself.
This extension brings on board a bunch of useful snippets that save a lot of boilerplate work. Creating a new functional arrow component becomes as simple as typing rafce - the developer is requested to go through the list of all available snippets here.
Optional - This extension turns VS Code transparent. It has been observed to give a slight boost in performance as it minimizes tab-switching during development. The developer is invited to test this extension.
In some cases, JSX trees may be difficult to read due to multiple indentations. Indent Rainbow helps make indentation more readable. However, over-reliance on Indent Rainbow may suggest that the code itself is too complex and might need to be broken down into multiple smaller files to aid readability and improve the separation of concerns.