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

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark