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

admin管理员组

文章数量:1312658

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/remended"],
  "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-p": [
      "error",
      {
        "ponent": true,
        "html": false
      }
    ]
  }
}

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/remended"],
  "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-p": [
      "error",
      {
        "ponent": true,
        "html": false
      }
    ]
  }
}

• javascript
• visual-studio-code
• eslint
• eslint-config-airbnb
• eslintrc

Share Improve this question Follow asked Oct 22, 2018 at 23:40 Kaan YaltiKaan Yalti 12322 silver badges99 bronze badges 4

• have you tried "react/self-closing-p": [0] ? – Julio Betta Commented Oct 23, 2018 at 0:07
• @JulioBetta Doesn't work unfortunately – Kaan Yalti Commented Oct 23, 2018 at 1:21
• 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 =) – Julio Betta Commented Oct 23, 2018 at 1:26
• @JulioBetta I tried it, didn't make any difference – Kaan Yalti Commented Oct 23, 2018 at 1:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

 {
  "extends": ["airbnb", "plugin:prettier/remended"],
  "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-p": "off"
  }
}

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:remended',
    'plugin:vue/vue3-remended'

  ],
  rules: {

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

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

本文标签：