5 React & Web Dev Extensions! VS-Code 2022
Now, most(all) programmers can’t code without the editor extensions. Because extensions create amazing feasibility for coding. Some extensions fix bugs some create templates some change designs some help your code improve and so on! There are tons of extensions on many editors but now we will look to VsCode extensions.
Actually using extensions is not necessary but very important so if you are in a job you must code fast and clear and extensions make this for you.
So if you are a junior developer or a senior developer or just a beginner(no matter) this article is for you.
Before we dive in let’s learn what is Vscode.
VsCode
Visual Studio Code combines the simplicity of a source code editor with powerful developer tooling, like IntelliSense code completion and debugging.
First and foremost, it is an editor that gets out of your way. The delightfully frictionless edit-build-debug cycle means less time fiddling with your environment, and more time executing on yourght to the list.
Also available on macOS, Windows, and Linux
You can download it from the link upside!
# Let's Get In!
1. ES7+ React/Redux/React-Native snippets
Extensions for React, React-Native and Redux in JS/TS with ES7+ syntax. Customizable. Built-in integration with prettier.
2. Auto Rename Tag
Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.
3. Auto Close Tag
Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text does.
4. ESLint
Integrates ESLint into VS Code. If you are new to ESLint check the documentation.
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. If you haven’t installed ESLint either locally or globally do so by running npm install eslint it in the workspace folder for a local install or npm install -g eslint for a global install.
On new folders, you might also need to create a .eslintrc configuration file. You can do this by either using the VS Code command Create ESLint configuration or by running the eslint command in a terminal. If you have installed ESLint globally (see above) then run eslint --init in a terminal. If you have installed ESLint locally then run .\node_modules\.bin\eslint --init it under Windows and ./node_modules/.bin/eslint --init under Linux and Mac.
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.
Closing
That was all for today for learning and reading more about React, web dev, web3.0, blockchain, chrome dev and more don’t forget to follow me on LinkedIn & Medium!
