React Devtools come in quite handy. They are available for Chrome, Edge and Firefox. Chrome is:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Clean Code Blog – www.harder-it-consulting.de
Clean Code – Tipps, Tricks for Fullstack React / Java / JavaScript / HTML 5 and more…
React Devtools come in quite handy. They are available for Chrome, Edge and Firefox. Chrome is:
https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi
Java Developers know it as Checkstyle – JavaScript has similar things, one of them I highly recommend is prettier.
From the Marketplace PlugIns, just install Node and the Prettier PlugIn.
In your terminal or shell, type:
npm install --save-dev --save-exact prettier
npm install --global prettier
prettier
installation to use.prettier
package itself and the field is filled in automatically.Prettier will now also format your files on save.
In you package.json you can specify prettier:
In the project where Prettier is enabled, open package.json and click Yes in the pane at the top of the tab. Sometimes it is shown in the context menu, right click and bottom of the options in the list.
Example of a .prettierrc.json:
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": false,
"singleQuote": true,
"overrides": [
{
"files": "*.test.js",
"options": {
"semi": true
}
},
{
"files": ["*.html", "legacy/**/*.js", "*.tsx"],
"options": {
"tabWidth": 4
}
}
]
}
I select the lines of Code and just press CMD+ALT+SHIFT+P
The Code will be reformatted instantly.
Link to Prettier: https://prettier.io/docs/en/configuration.html