Table of contents
Developed and maintained by Facebook, React has gained widespread popularity in the web development community for its efficiency, flexibility, and component-based architecture.
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
Make sure you VS Code
On Fedora, it's this article.
Open a terminal
CTRL + ALT + T
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
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
Set as default formatter
Prettier - Code formatter as our VS Code default.
Visual Studio Code plugin that autocompletes npm modules in import statements.
code --install-extension christian-kohler.npm-intellisense
VSCode React refactor
This simple extension provides JSX refactor code actions for React developers.
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
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
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
It allows us to take beautiful screenshots of the code.
Quickly save screenshots of your code;
Copy screenshots to your clipboard;
Show line numbers
code --install-extension robertz.code-snapshot
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
Check all extensions installed
Let's become friends
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!