EsLint format on save for VsCode

Venecia Calista
2 min readFeb 26, 2020


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.0

That’s all!!