EsLint format on save for VsCode
Simple tutorial to help you configure eslint extentions on vsCode :)
EsLint is important to ensure code consistency for those who work in a team. For people who have different coding style it take time to adjust, or you can just automatically format it every time you save. It save times and effort.
First , find the EsLint extentions on the left sidebar and install it
Sec, find preference settings setting or “Command + , ” for mac
Third , find setting json on the third icon from top right corner
Previously, you can just add
“eslint.autoFixOnSave”: true,
and it’s done, but sadly :
So, you can add a few things :
"editor.codeActionsOnSave": { "source.fixAll.eslint": true},"eslint.format.enable": true,"eslint.enable": true,"editor.formatOnSave": true,"eslint.validate": [ "javascript", "javascriptreact"],
You can also custom a few rule if you like, for me personally I use these:
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,"javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,"javascript.format.insertSpaceAfterConstructor": true,"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,"javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyParenthesis": true,
And voila ✨ ✨ ✨ it’s done!
Ps.please checkout your Prettier config sometimes it conflict with eslint. And if you found this error :
[eslint-config-react-app] — Property “overrides” is the wrong type
Try downgrading your esLint to 5+ version by :
npm i eslint@5.16.0That’s all!!
