react-routerとESLintのjsx-a11y/anchor-is-validが衝突した時の対応メモ
ESLintのjsx-a11y/anchor-is-validは「リンクタグならちゃんとhref属性つけろ」というルールです。 詳細:eslint-plugin-jsx-a11y/docs/rules/anchor-is […]
広告ここから
広告ここまで
目次
ESLintのjsx-a11y/anchor-is-valid
は「リンクタグならちゃんとhref
属性つけろ」というルールです。
詳細:eslint-plugin-jsx-a11y/docs/rules/anchor-is-valid.md
しかしreact-routerのLinkコンポーネントではto
属性を使うので、ESLintのチェックに引っかかる時があります。
たとえばこんな感じ
$ git commit -m "do something"
husky > npm run -s precommit (node v6.10.0)
❯ Running tasks for *.{js,jsx}
✔ prettier-eslint --write
✖ eslint
git add
✖ eslint found some errors. Please fix them and try committing again.
/path/to/your/project/src/example.jsx
38:15 error The href attribute is required on an anchor. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid
対応
.eslint.yaml
などにto
属性でもOKだということをルールに追記してあげてください。
rules:
jsx-a11y/anchor-is-valid:
- error
- components:
- Link
specialLink:
- to
- hrefLeft
- hrefRight
aspects:
- noHref
- invalidHref
- preferButton
参考:https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/339