JSX 代码无法被自动修复

[luhc228]

原始代码

function Home() {
  return (<Select
    style={style}
    showSearch
    placeholder={placeholder}
    filterLocal={false}
    value={value}
    itemRender={itemRender}
    valueRender={itemRender}
    dataSource={dataSource}
    onChange={onChange}
    onVisibleChange={onVisibleChange}
    onSearch={handleSearch}
    {...others}
          />);
}

第一次自动修复后还是有点问题：

暂时的解决方案是括号后面先换行：

[luhc228]

修改 react-eslint 规则选项为：'react/jsx-closing-bracket-location': ['error', 'line-aligned']

[luhc228]

原来的规则是 'react/jsx-closing-bracket-location': ['error']，自动修复后结束标签和开始标签对齐，这时候会跟 indent 缩进的规则产生冲突：

function Home() {
  return (<Select
    style={style}
    showSearch
    placeholder={placeholder}
    filterLocal={false}
    value={value}
    itemRender={itemRender}
    valueRender={itemRender}
    dataSource={dataSource}
    onChange={onChange}
    onVisibleChange={onVisibleChange}
    onSearch={handleSearch}
    {...others}
          />);
}

把规则改成 'react/jsx-closing-bracket-location': ['error', 'line-aligned']，结束标签会跟与包含开始标签的行对齐：

function Home() {
  return (<Select
    style={style}
    showSearch
    placeholder={placeholder}
    filterLocal={false}
    value={value}
    itemRender={itemRender}
    valueRender={itemRender}
    dataSource={dataSource}
    onChange={onChange}
    onVisibleChange={onVisibleChange}
    onSearch={handleSearch}
    {...others}
  />);
}