ESLintがとても有難いツールであることに間違いはないと思いますが、プロジェクトの途中から導入するとなかなかツラいものがありますよね・・・。

例えば、こんな箇所に・・・

foo.tsx

const MyIcon = (name: Name) => <span uk-icon={`icon: ${name}`} />

こんなエラーが出ます

/Users/matoruru/my_project/foo.tsx
  32:38  error    Unknown property 'uk-icon' found     react/no-unknown-property

これは「uk-iconなんてプロパティはspanタグにはないよ。間違ってるよ。」というありがたいメッセージなんですが、UIkitを使ってるとuk-から始まるプロパティを使う必要が出てくるので、今回はただのお節介でした。我々は間違っていません😡

.eslint.jsonに以下のルールを加えて黙らせます。

.eslint.json

    "rules": {
        "react/no-unknown-property": ["error", { "ignore": ["uk-icon"] }]
    }

他のプロパティも追加したい場合はignoreの配列にどんどん足していってください。

.eslint.json

    "rules": {
        "react/no-unknown-property": ["error", { "ignore": ["uk-icon", "uk-nav", "uk-offcanvas"] }]
    }

記事を読んでくださってありがとうございます！