React.js
React, also known as React.js or ReactJS, is an open-source JavaScript library for building user interfaces (UIs) and web applications.
Developed and maintained by Facebook, React has gained widespread popularity in the web development community for its efficiency, flexibility, and component-based architecture.
Note
My articles are constantly evolving, and I welcome any feedback, corrections, broken links, or suggestions you may have. Please don't hesitate to share them with me, and I'll be grateful for your input.
Give me a shout or add me:
Let's get down to business
shall we?
Make sure you VS Code
In this article, you can check its installation process with a Debian file format. Check it out.
On Fedora, it's this article.
Open a terminal
CTRL + ALT + T
ESLint
The extension uses the ESLint library installed in the opened workspace folder. If the folder doesn't provide one the extension looks for a global install version.
code --install-extension dbaeumer.vscode-eslint
Output
Configure it on save
Prettier - Code formatter
Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
code --install-extension esbenp.prettier-vscode
Output
Set as default formatter
Configure Prettier - Code formatter as our VS Code default.
Npm intelissense
Visual Studio Code plugin that autocompletes npm modules in import statements.
code --install-extension christian-kohler.npm-intellisense
Output
VSCode React refactor
This simple extension provides JSX refactor code actions for React developers.
Features
Extract JSX code parts to a new class or functional component
Supports TypeScript and TSX
Works with classes, functions and arrow functions
Handles key attribute and function bindings
Compatible with React Hooks API
Preview
code --install-extension planbcoding.vscode-react-refactor
Material Icon Theme
Files and folder icons for Visual Studio Code. The repo can be found here
code --install-extension pkief.material-icon-theme
Output
Auto REname TAG
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does. The repo can be found here.
code --install-extension formulahendry.auto-rename-tag
Output
Code Snap
It allows us to take beautiful screenshots of the code.
Main Features:
Quickly save screenshots of your code;
Copy screenshots to your clipboard;
Show line numbers
code --install-extension robertz.code-snapshot
Output
Import Cost
This extension will display inline in the editor the size of the imported package. The extension utilizes webpack in order to detect the imported size.
code --install-extension wix.vscode-import-cost
Output
Check all extensions installed
code --list-extensions
Output
Done
Celebrate
Let's become friends
Final thoughts
Thank you for reading this article.
If you have any questions, thoughts, suggestions, or corrections, please share them with us.
We appreciate your feedback and look forward to hearing from you.
Feel free to suggest topics for future blog articles. Until next time!