Eslint airbnb gets enforces self closing div tag if the div is empy. How can I disable this rule?

Question

Airbnb linting rules are removing the closing div tag if the div element is empty eg:

<div></div>

Is replaced by

<div/>

My .eslintrc file is this:

{
  "extends": ["airbnb", "plugin:prettier/recommended"],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 9,
    "ecmaFeatures": {
      "impliedStrict": true,
      "jsx": true
    }
  },
  "env": {
    "node": true,
    "es6": true
  },
  "plugins": ["react"],
  "rules": {
    "react/jsx-filename-extension": ["off"],
    "react/prefer-stateless-function": ["off"],
    "arrow-body-style": ["error", "always"],
    "react/self-closing-comp": [
      "error",
      {
        "component": true,
        "html": false
      }
    ]
  }
}

Infuse

have you tried "react/self-closing-comp": [0] ? – Reikoreilly

@JulioBetta Doesn't work unfortunately – Infuse

I know that this is a dumb question, but have you tried to restart your code editor after editing .eslintrc.json? Sometimes I have to do that with VS Code to apply the changes... it's weird, but it happens =) – Reikoreilly

@JulioBetta I tried it, didn't make any difference – Infuse

Answer 1

Set "react/self-closing-comp" to "off".

 {
  "extends": ["airbnb", "plugin:prettier/recommended"],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 9,
    "ecmaFeatures": {
      "impliedStrict": true,
      "jsx": true
    }
  },
  "env": {
    "node": true,
    "es6": true
  },
  "plugins": ["react"],
  "rules": {
    "react/jsx-filename-extension": ["off"],
    "react/prefer-stateless-function": ["off"],
    "arrow-body-style": ["error", "always"],
    "react/self-closing-comp": "off"
  }
}

Forbes

I tried it; however, it doesn't work, tried putting [0] as well, no use – Infuse

Answer 2

I know this post is quiet old but for those who need, I have found a solution, which worked for me :

try :

module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended'

  ],
  rules: {

    'vue/no-unused-vars': 'error',
    'vue/multi-word-component-names': 'off',
    'vue/html-self-closing': 'off',
     indent: 'off'
  }
}

That's how my config file looks like with Vue3, maybe it can help.

Lithotomy