告别ESLint噩梦！轻松几步解决 indent 与 react/jsx-indent-props 的 空格 冲突！

话不多说，直接上代码，下面是截取的一部分 eslint 配置。可以看到我设置了四个空格和标签属性对齐首个。

"rules": {
  "indent": ["error", 4], // 四个空格
  "react/jsx-indent-props": ["error", "first"] // 属性对齐
},

就在我满心欢喜以为就这么简单的时候。忽然发现我的 props 规则与 indent 规则冲突了！！！

然后我去找到个 issue

最后解决方案为：只需要给 indent 设置 ignore 节点就ok啦~

"rules": {
  indent: ['error', 4, { ignoredNodes: ["JSXElement", "JSXFragment", "JSXOpeningElement", "JSXClosingElement",], },], // 四个空格，忽略 jsx 节点
  "react/jsx-indent-props": ["error", "first"] // 属性对齐
},

可以看到不报错啦~