🖱️

[React] ESLintでButton要素にtype属性を付けることを強制させる

2022/12/12に公開約1,300字

概要

Button要素のtype属性は、submitがデフォルト値になっている。指定が無い場合はsubmitの挙動になる。

submit: このボタンはフォームのデータをサーバーへ送信します。これはこの属性が <form> に関連付けられたボタンに指定されていない場合、またはこの属性が空であったり不正な値であったりした場合の既定値です。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/button#attr-type

Button要素が<form>の子要素ではない場合、submitの挙動であっても問題ない場合は多いが、親要素に<form>が入ってくるとbutton属性のつもりだった挙動が大きく変わってしまう場合もある。

こういった予期せぬ挙動の変化を防ぐため、ESLintにルールを追加して、Button要素のtype属性の指定を必須にする。

eslint-plugin-reactを利用する

導入

eslint-plugin-reactを利用する。ちなみにNext.jsを利用していて、eslint-config-nextが導入済みの場合、eslint-config-nextにeslint-plugin-reactが含まれているため、別途導入は不要[1]

インストールは以下。

npm install eslint-plugin-react --save-dev

ルールオプション

ルールオプションは以下。

"react/button-has-type": [<enabled>, {
  "button": <boolean>,
  "submit": <boolean>,
  "reset": <boolean>
}]

特定のtypeだけを無効・有効にすることも出来る(例えばsubmitだけを禁止する…など)。

.eslintrcへの設定は以下のような形で良い。

module.exports = {
  // ...省略
  rules: {
    'react/button-has-type': 'error',
  }
};

エラー時の見た目


VS Codeでの表示

脚注
  1. https://github.com/vercel/next.js/blob/canary/packages/eslint-config-next/package.json#L19 ↩︎

Discussion

ログインするとコメントできます