在 jsx 上使用 eslint 缩进

Posted 2023-02-21

【中文标题】在 jsx 上使用 eslint 缩进

【英文标题】：indentation with eslint on jsx

【发布时间】：2018-09-12 22:47:28

【问题描述】：

我正在尝试制作简单的组件。但是当我点击ctrl + s 时，它会这样做：

警告和错误是这样的：

[eslint] 预期的结束标记以匹配开头的缩进。 (react/jsx-closing-tag-location) [eslint] 预期缩进 4 空格字符但找到 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
  

怎么了？

【参考方案1】：

在您的 gif 中，从不以相同的缩进结束。应该这样做：

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

在你的 gif 中你有一个

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

或

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