How to setup self-closing when I save code on VSCode with prettier and ESLint?

Question

I use React and VSCode, I wanna setup self-closing when code is saved but I don't know how...

What I wanna do is

<Hello></Hello>

after I save code

<Hello />

Where can I setup self closing?

Thank you.

Answer 1

You need to enable the related rule and make sure VSCode is integrated to fix lint warnings/errors on saving.

1. Enable react/self-closing-comp rule:

// eslint config file (package.json / eslintrc / settings.json etc.)
{
  ...
  "rules": {
    "react/self-closing-comp": "error"
  }
}

2. Within settings.json at VSCode make sure you got auto-fix enabled (for example with vscode-eslint extension, it may be any other lint extension related):

// settings.json @ VSCode
{ 
...
  "eslint.autoFixOnSave": true,
  "eslint.run": "onSave",
}

Refer to eslint-plugin for vscode for integration.

Note that eslint-config-airbnb enables it by default (I suggest using any config).

Answer 2

Add this ti vscode config:

vscode settings.json:

"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
},