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

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

Enable react/self-closing-comp rule:

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

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

Add this ti vscode config:

vscode settings.json:

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

Tags:

Javascript

Visual Studio Code

Reactjs

Eslint

Prettier

Related