在jsx上用eslint缩进 [英] indentation with eslint on jsx

问题描述

我正在尝试制作简单的组件.但是，当我单击ctrl + s时，它会执行以下操作:

I'm trying to make simple component. But when I click on ctrl + s it does this:

警告和错误是这样的:

[eslint]期望的结束标记与开始的缩进匹配. (react/jsx-closing-tag-location)[eslint]预期缩进4 空格字符，但发现2.(react/jsx-indent)

[eslint] Expected closing tag to match indentation of opening. (react/jsx-closing-tag-location) [eslint] Expected indentation of 4 space characters but found 2. (react/jsx-indent)

我的.eslintrc:

{
  "extends": "airbnb",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true,
      "experimentalObjectRestSpread": true
    }
  },
  "rules": {
    "max-len": ["warn", 120],
    "indent": ["warn", 2],
    "react/jsx-indent": ["warn", 4],
    "react/forbid-prop-types": 0,
    "semi": [2, "never"],
    "no-underscore-dangle": 0,
    "no-console": 0,
    "linebreak-style": 0,
    "comma-dangle": [2, {
      "arrays": "never",
      "objects": "always",
      "imports": "never",
      "exports": "never",
      "functions": "ignore"
    }]
  },
  "globals": {
    "localStorage": true
  },
  "env": {
    "browser": true,
    "node": true
  }
}

怎么了?

推荐答案

在您的gif中，永不使用相同的缩进来关闭.应该这样做:

In your gif the never closes with the same indentation. That should do it:

const App = () => (
  <button>
    <span>asd</span>
  </button>
)

您的gif中有一个

const App = () => (
   <button>
     <span>asd</span>
     </button>
)

或

const App = () => (
     <button>
       <span>asd</span>
   </button>
)

这篇关于在jsx上用eslint缩进的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！