ESLint 解決方法

Question

下記の構文でUnexpected block statement surrounding arrow body arrow-body-styleという LIntのエラーが出ているのですがどう直したらいいのでしょうか？

retunを取ったり、中括弧を普通のカッコに変えてみたりしたのですがエラー解決できなかったです。
わかる方がいましたら教えてください

export const getMessages = (response) => {
  return response.data.messages[0];
};

Answer 1

そもそもこのエラーが何者なのかはeslintのサイトに載っています。
Require braces in arrow function body
DeepLという超優れた翻訳ツールもあるので、頑張って理解していってください。

で、この怒られが何を指しているのかというと、
アロー関数は「1行目で即リターンする」場合は例外として
() => {return 123}を
() => 123と記述する事が可能だよという話です。

これを省略するのか！？しないのか！？
そんなの人の勝手だろうと思うレベルの話ですが、

プロジェクトのコードがあっちとこっちで書き方が違うとイライラしますよね？
そういう目的で、どっちかに揃えようぜって話です。

プロジェクトルートにはeslint.ymlみたいなファイルが存在して、
それのルールに従ったJavaScriptのコードを作るのがベストプラクティスですからね。

eslintのこのエラーは、1行目に即リターンするくせに{return 123}という記述をしているとは何事だ！と怒っている設定になっているんじゃないでしょうか？
一度エディタを再起動したりして確認してみてください。

Comments

[satodesu]

ありがとうございました

Answer 2

arrow-body-styleという LIntのエラーが出ているのですがどう直したらいいのでしょうか？

まずは、決められるのであればどう直したいのかを決めてください。

• この書き方を使うので、arrow-body-styleの方を止める、あるいは設定を変える
• arrow-body-styleに従って、(引数) => 式の形に書き直す

Comments

[satodesu]

ありがとうございました

Answer 3

arrow-body-styleの設定に違反しているからですね。eslintルール
デフォルトではアロー演算子は省略可能な時は省略するだった気がするので
おそらく```export const getMessages = (response) => response.data.messages[0];

これでいけると思います