围绕箭头主体 ESlint 的意外块语句

Question

为什么这段代码给我 lint 警告？解决方法是什么？任何帮助将不胜感激。

 const configureStore = () => {
  return createStore(
      rootReducer,
      middleware
    );
};

这是我的 eslint 配置

{
  "parser": "babel-eslint",
  "extends": "airbnb",
  "plugins": [
    "react"
  ],
  "rules": {
    "comma-dangle": 0,
    "object-curly-spacing": 0,
    "no-multiple-empty-lines": [
      "error",
      {
        "max": 1
      }
    ],
    "arrow-body-style": 1,
    "newline-per-chained-call": 1
  },
  "env": {
    "browser": true,
    "node": true,
    "mocha": true
  }
}

Answer 1

在不知道您的特定 lint 配置的情况下进行调试有点困难。

我唯一的猜测是，如果您在仅包含一个表达式的箭头主体上使用块，您的 linter 配置方式会报错

尝试

const configureStore = () =>
  createStore(rootReducer, middleware);

如果这不起作用，请提供评论

--

ps，如果您将确切的代码粘贴到 repl.it，则不会出现 lint 警告

Answer 2

const configureStore = () => {
  return createStore(
      rootReducer,
      middleware
    );
};

将箭头后的大括号改为方括号

const configureStore = () => (
       createStore(
          rootReducer,
          middleware
        );
    );

对我有用。这是关于arrow-body--stylehttps://eslint.org/docs/rules/arrow-body-style.html

的话题

Require braces in arrow function body (arrow-body-style) Options The rule takes one or two options. The first is a string, which can be:

"always" enforces braces around the function body

"as-needed" enforces no braces where they can be omitted (default)

"never" enforces no braces around the function body (constrains arrow functions to the role of returning an expression) when you config as-needed

//this is a bad style    
let foo = () => {
        return {
           bar: {
                foo: 1,
                bar: 2,
            }
        };
    };
// This is good
let foo = () => ({
    bar: {
        foo: 1,
        bar: 2,
    }
});

您可以从 https://eslint.org/docs/rules/arrow-body-style.html#as-needed

中找到更多详细信息

围绕箭头主体 ESlint 的意外块语句

Unexpected block statement surrounding arrow body ESlint

javascript

reactjs

ecmascript-6

eslint

arrow-functions