CODEWITHSUNDEEP
javascriptreactjsecmascript-6eslintarrow-functions
Umair Sarfraz
Umair Sarfraz

Reputation: 5953

Unexpected block statement surrounding arrow body ESlint

Why is this piece of code giving me lint warnings? What's the workaround? Any help would be appreciated.

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

That's my eslint configuration

{
  "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
  }
}

Upvotes: 2

Views: 5996

Answers (2)

zy Su
zy Su

Reputation: 11

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

change the brace after arrow to bracket 

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

It works to me. This is the topic about 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,
    }
});

You can find more detail from https://eslint.org/docs/rules/arrow-body-style.html#as-needed

Upvotes: 1

Mulan
Mulan

Reputation: 135227

It's a little hard to debug not knowing your particular lint config.

My only guess is that your linter is configured in a way that complains if you use a block on an arrow body which contains only a single expression

Try

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

If that doesn't work, please provide a comment

--

ps, if you paste your exact code in repl.it, there are no lint warnings

Upvotes: 1

Related Questions