React集成Ant Design项目中ESLint错误arrow-body-style的解决方法

这个错误是ESLint的arrow-body-style规则在提醒你优化箭头函数的写法哦！当箭头函数只有一个返回表达式时，该规则建议省略包裹的大括号和return关键字，让代码更简洁。

针对你的代码，有几种实用的解决方式：

方式一：修改代码符合规则（推荐） #

直接去掉箭头函数的大括号和return，用圆括号包裹JSX内容即可，既满足ESLint规则，代码也更清爽：

/* eslint-disable eol-last */
import React from "react";
import "antd/dist/antd.css";
import { Row, Col } from "antd";
import "./Walkin.css";

const Walkin = () => (
  <div className="mainDiv">
    <Row>
      <Col className="main" span={6}>
        <h1 className="hai">Hi</h1>
      </Col>
    </Row>
  </div>
);

export default Walkin;

方式二：临时禁用该规则（适合需保留原有结构的场景） #

如果你之后可能要在箭头函数里添加其他逻辑，不想修改现有结构，可以单独给这一行禁用arrow-body-style规则：

/* eslint-disable eol-last */
import React from "react";
import "antd/dist/antd.css";
import { Row, Col } from "antd";
import "./Walkin.css";

// 在箭头函数后添加注释禁用该规则
const Walkin = () => { // eslint-disable-line arrow-body-style
  return (
    <div className="mainDiv">
      <Row>
        <Col className="main" span={6}>
          <h1 className="hai">Hi</h1>
        </Col>
      </Row>
    </div>
  );
};

export default Walkin;

方式三：全局调整ESLint规则（不推荐） #

如果你整个项目都不想遵循这个规则，可以在项目的.eslintrc（或.eslintrc.json）配置文件中修改规则：

{
  "rules": {
    "arrow-body-style": ["error", "always"]
  }
}

不过不太建议这么做，毕竟这个规则的初衷是让代码更简洁易读。

内容的提问来源于stack exchange，提问作者Vamsi