60

I'm using "eslint-config-airbnb": "^6.1.0", to keep my JavaScript clean.

My linter is unhappy with what seems to be legitimate code:

enter image description here

It seems like this might be an ongoing issue. Does anyone have any suggestions for an OCD developer on how to address this in the meantime? Perhaps disabling this rule or otherwise?

2
  • 4
    why do you need { return ...} for a single statement? You could use this.state.todos.filter(filterTodo => filterTodo !== todo
    – Sarbbottam
    Mar 18, 2016 at 20:35
  • 1
    The issue page you linked to explains the situation quite well, where is the confusion? It does seem odd that it notates this as an error rather than a warning, though that can probably be configured.
    – Kevin B
    Mar 18, 2016 at 20:37

3 Answers 3

92

The block statement isn't needed for a single expression.

this.state.todos.filter(filterTodo => filterTodo !== todo);
7
  • 3
    vscode does throw an error for single line expressions as well - image.ibb.co/jUzGRx/Screen_Shot_2018_04_27_at_3_10_46_PM.png
    – A G
    Apr 27, 2018 at 9:51
  • 1
    eh, no, it throws a warning. one that you can (and probably should) configure
    – Kevin B
    Feb 21, 2019 at 21:22
  • Hmmm not sure if more legible.
    – Jonny
    Mar 4, 2019 at 3:46
  • 1
    @Jonny it isn't any more or less legible. It's just the way it is.
    – Kevin B
    Mar 4, 2019 at 3:47
  • 3
    @Jonny then you might prefer not using arrow functions at all, if you prefer verbose code over everything else. to each their own, this answer and the question it's for doesn't touch on how "legible" the code is. it's mostly irrelevant.
    – Kevin B
    Mar 4, 2019 at 4:15
4

If you really don't want to wrap arrow function inside block statement then you can turn off.

module.exports = {
  extends: "airbnb-base",
  rules: {
    "arrow-body-style": 0
  },
  "env": {
    "jest": true
  }
};
2

To add on Kevin answer, the error is related to your eslint configuration. This said, if arrow-body-style option is set to true, OP is correct. An other example would be something like this :

    return this.state.greetings.map((name) => {
        return <HelloWorld key={name} name={name} />;
    });

Without arrow-body-style option, block statement ( { return ...} ) is not needed as per Kevin answer.

This actually open a new question as to which style is more appropriate.

For further references : http://eslint.org/docs/rules/arrow-body-style

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.