AtomでReact/JSXのESLintを設定する

AtomでJSXのESLintを設定する

テキストエディタの「Atom」でReactのJSXを書く際にESLintを設定する方法です。ESLintとはJavaScriptコードのフォーマットなどが定義から外れていないかを検証するためのプログラムです。

どちらかというとESLintはデプロイ時やコンパイル時ではなくエディタ側で設定しておきたい派なのでAtomの保存時に検証を行うように設定を行います。

今回はフォーマットの定義に関してはairbnbの設定ファイルをカスタマイズして利用します。

Atom Packagesのインストール

まず、必要なAtom Packagesのインストールをします。

TOPメニューのPreferenceより設定画面を開き、サイドメニューのInstallからPackagesのインストール画面を開きます。

インストールするパッケージはひとまず「linter」、「linter-eslint」、「react」。

linter-eslintの設定

環境によってはlinter-eslintは設定画面を開き「Global Node Installation Path」よりNode.jsへのPathを通しておく必要があります。
私の環境だとnodebrewをインストールしているので以下の様な設定です。

/Users/nishihatakazuma/.nodebrew/node/v4.5.0

Nodeモジュールのインストール

ターミナルなどでプロジェクトのルートディレクトリに移動して必要なNodeモジュールのインストールを以下のコマンドで行います。
package.jsonなどがない場合は「npm init -y」などであらかじめ作成しておきましょう。

npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint

.eslintrcの作成

最後にESLintの設定が定義できる.eslintrcをpackage.jsonと同階層に作成しましょう。

airbnbの定義をそのまま利用したい場合は、以下のような内容を設定するとJSX/ES2015を検証してくれます。

{
    "extends": "airbnb"
}

airbnbの定義で足らない所や変更したい箇所は.eslintrcを上書いていけば問題ありません。個人的には以下のように変更しています。

{
    "extends": "airbnb",
    "env" : {
        "browser": true
    },
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true
        }
    },
    "rules": {
        "indent": [2, 'tab'],
        "comma-dangle": [0],
        "no-constant-condition": [1,{ "checkLoops": false }],
        "react/jsx-indent": 0,
        "react/jsx-indent-props": 0,
        "react/jsx-boolean-value": 0
    }
}

以上で設定は完了です。

Atomで確認

AtomでJSのコードを確認するとエラー時は以下のようにエラーが表示されます。

ESLintでエラー

これをチマチマと直していくとエラーがなくなります。

ESLintでエラー0

人によりコードを書くクセのようなものはバラバラですので、フォーマットやルールなどに関してはESLintで設定してそれを準拠するということで均一化するのが良いのではないかと思います。

スポンサードリンク

«[書評]現場のプロが本気で教えるHTML/CSSデザイン講義 | メイン | 「WordCamp Tokyo 2016 」にLTで出演します»