ESLint使ってるけど意外に知らない、「no-restricted-syntax」が地味に便利だった話

ESLintは使ってるけど、「なんかESLint通ってる割に、このコード気持ち悪いな……」ってことありません？特に最近、AIが生成したコードでありがちなやつ。letが無駄に多かったり、ちょっと危なっかしい書き方をしたり。

そんな地味〜な悩みを抱えながら、夜な夜なコードレビューでモヤモヤしていた私が見つけたのが「no-restricted-syntax」。これ、意外に知らない人多いけど、実は超便利なESLintルールかも。

そもそも「no-restricted-syntax」ってなに？

一言で言えば「自分の好きなように、コードの書き方を禁止できる」という超柔軟なルールです。普通のESLintルールにない、自分だけの細かいこだわりを守らせたいときに最適。既存のESLintのルールでうまく防げない、ちょっとした「クセ」をコードから排除できます。

「ESLintは使ってるけど、このルール知らなかったわ〜」って人、実は結構多いんじゃないでしょうか。

ESLint導入済みのあなたにぴったりのカスタム設定例

① JSX内のインラインスタイルって微妙ですよね？

{
  selector: 'JSXAttribute[name.name="style"]',
  message: 'インラインスタイルは禁止！CSSクラス使おう！'
}

② dangerouslySetInnerHTMLって名前の時点でやばい

{
  selector: 'JSXAttribute[name.name="dangerouslySetInnerHTML"]',
  message: '危険すぎるので禁止！HTMLのサニタイズは慎重に！'
}

③ 三項演算子をネストすると脳が拒否る件

{
  selector: 'ConditionalExpression > ConditionalExpression',
  message: '三項演算子のネストは読みにくいので禁止！シンプルにif文で書きましょう。'
}

④ catchが空だと絶対事故る

{
  selector: 'CatchClause[body.body.length=0]',
  message: '空のcatchって事故る未来しか見えないんだよなぁ……ちゃんと書こう！'
}

⑤ propsやstateをうっかり再代入してしまう事故防止

{
  selector: 'AssignmentExpression[left.type="Identifier"][left.name=/^(props|state)$/]',
  message: 'propsやstateの直接再代入は禁止！Reactが悲しみます。'
}

⑥ parseIntは基数指定が常識

{
  selector: 'CallExpression[callee.name="parseInt"][arguments.length<2]',
  message: 'parseIntは基数必須！これ常識ね！'
}

⑦ moment.jsはもう過去の遺物

{
  selector: 'CallExpression[callee.object.name="moment"]',
  message: 'moment.jsは令和の時代に使うもんじゃない！dayjsにしよう！'
}

導入方法（超簡単！）

いつものESLint設定ファイル（.eslintrc.jsなど）にサクッと追加するだけ。

module.exports = {
  rules: {
    'no-restricted-syntax': ['error',
      {
        selector: 'JSXAttribute[name.name="style"]',
        message: 'インラインスタイルは禁止！CSSクラス使おう！'
      },
      // 他のルールも好きに追加してね
    ]
  }
};

結論：小さな不満は「no-restricted-syntax」で一掃しよう

ESLintを使っていてもちょっとしたモヤモヤが残るあなた。これを機に「no-restricted-syntax」を導入してみてはどうでしょう？地味ですが効果絶大。「こんな便利なもの知らなかった……！」とちょっと得した気分になれるはずです。

あとがき　（ここから人間パートｗ）

最近はずっとBiomeを使っていたんですけど、ルールを厳しくしたくてESLintに出戻り。
no-restricted-syntaxを入れてみたので、AIに書かせてみました。

実際に使っているのはlet禁止だけなんですけど、特定のライブラリを禁止するとかは良さそう..！
普通にESLintのルールで設定できるものも多いんですが、選択肢を知っておくと幅が広がりますね。

個人的には三項演算子のネストは大歓迎です。
formatter使えば読みやすいだろ！！（宗教）

宣伝

Toolpodsというたくさんの便利ツールが無料で使えるサービスを開発しています。
フリーランスや副業してる人とかは請求書とか使ってくれると嬉しいです。
https://toolpods.io/invoice