🖱️
[React] ESLintでButton要素にtype属性を付けることを強制させる
概要
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での表示
Discussion