围绕箭头体 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

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

把箭头后面的大括号改成大括号

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

它对我有用。 这是关于箭头体的话题--stylehttps://eslint.org/docs/rules/arrow-body-style.html

在箭头函数体中需要大括号（箭头体样式） 选项 该规则有一个或两个选项。第一个是字符串，可以是：

• “always”在函数体周围强制使用大括号
• “as-needed”不强制使用可以省略的大括号（默认）
• “never”在函数体周围不强制使用大括号（将箭头函数限制为返回表达式的角色） 当您根据需要进行配置时

//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找到更多详细信息

Answer 2

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

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

试试

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

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

--

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