読者です 読者をやめる 読者になる 読者になる

Buno Journals

It's what I do that defines me.

ESLint + Airbnb JavaScript Style Guide でエラー Configuration for rule "jsx-a11y/anchor-has-content" is invalid

現在の職場で、SPA実装のためにJS記述量が増えてきてESLintを導入しました。

eslint.org

Reactも使っているので、Airbnb JavaScript Style Guideを使いました。

github.com

そこで遭遇したエラーの話です。

ESLintインストール

Web上に情報はたくさんあると思います。以下のあたり参照してもらえれば。

ESLint 最初の一歩 - Qiita

ESLint をグローバルにインストールせずに使う - Qiita

私はプロジェクトローカルにインストールしました。

npm install --save-dev eslint

eslint --initでairbnbスタイルガイド適用した場合、エラーになる

ESLintで使う設定ファイルが.eslintrc.jsonで、これはeslint --initコマンドで作成することもできます。

コマンド実行して、ターミナルに表示される質問に対し希望の回答を選択していけば、.eslintrc.jsonが作成されます。

私は以下のように答えました。

$ eslint --init
? How would you like to configure ESLint? Use a popular style guide
? Which style guide do you want to follow? Airbnb
? Do you use React? Yes
? What format do you want your config file to be in? JSON

以下のような.eslintrc.jsonが作成されました。

{
    "extends": "airbnb",
    "plugins": [
        "react",
        "jsx-a11y",
        "import"
    ]
} 

ここでeslintを実行してみるとエラーに遭遇しました。

$ eslint test.js
/...path_to_your_project.../node_modules/eslint-config-airbnb/rules/react-a11y.js:
    Configuration for rule "jsx-a11y/anchor-has-content" is invalid:
    Value "" is the wrong type.

the airbnb config requires 2.x of eslint-plugin-jsx-a11y (NOT 3.x)

'eslint --init' installs wrong versions of depencies for AirBnB · Issue #7338 · eslint/eslint · GitHub

で報告されている現象でした。

eslint --initairbnbスタイルを適用した場合、

依存関係でインストールされるプラグインeslint-plugin-jsx-a11yのバージョンが正しくならないようです。

GitHub - evcohen/eslint-plugin-jsx-a11y: Static AST checker for a11y rules on JSX elements.

ljharbさんのコメントが参考になります。

https://github.com/eslint/eslint/issues/7338#issuecomment-252785808

https://github.com/airbnb/javascript/issues/1172#issuecomment-259643396

https://github.com/evcohen/eslint-plugin-jsx-a11y/issues/119#issuecomment-259574657

airbnb style guideを適用するには、2.x系が必要なのに、eslint --initで適用した場合 3.x系が入ってしまい動かないということらしいです。

https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb

の記述通り、以下のように実行すれば私の環境では解決しました。

Linux/OSX users can simply run

(
  export PKG=eslint-config-airbnb;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

f:id:bunoacts:20161229001316p:plain

2.x系がインストールされ、ESLint + Airbnb JavaScript Style Guideで実行できるようになりました。