React.js用にESLintをインストールして設定、JavaScriptコードを楽に検証しよう

スポンサーリンク

ESLint は、JavaScript コードをチェックするための静的検証ライブラリです。文法エラーやコーディングスタイルなどを、プログラム実行前に検証してチェックすることができます。今回は、React.js を用いて書いた JavaScript コードを検証するための ESLint 環境を作りました。

— 環境 —
npm 4.6.1
yarn 0.24.5
macOS Sierra

npm のアップデート。

yarn のアップデート。

【お知らせ】 英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください!
画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました
スポンサーリンク

ESLint のパッケージ群をインストール

package.json が未作成の場合は、事前に npm init で作成しておきます。

対話的に回答すると、package.json が作られる。

JavaScript(React,ES6,JSX)のコードを解析するために、以下のパッケージ群をインストールします。また eslint-config-airbnb も入れて、Airbnb のコーディング規約を用いて .eslintrc を設定します。

・eslint-config-airbnb
・eslint-plugin-import
・eslint-plugin-react
・eslint-plugin-jsx-a11y
・eslint

npm でインストール
npm でパッケージをローカル(node_modules ディレクトリ)にインストールします。

–save-dev オプションを付けると、package.json の devDependencies にもパッケージが追記されます。

-g オプションを付けるとグローバルにインストールできますが、おすすめはしません。

私はグローバル環境を汚したくないので、-g オプションは付けずにローカルにインストールしました。

yarn でインストール
yarn でインストールする場合は以下。yarn を使うとパッケージのインストールが速いです。

npm 同様にローカル(node_modules ディレクトリ以下)にパッケージがインストールされます。

eslint –init で ESLint の設定ファイル(.eslintrc)を作成

eslint –init を実行して対話的に答えて、設定ファイル(.eslintrc)の作成を行います。ローカルのディレクトリ(node_modules 以下)に eslint をインストールしたので、eslint コマンドを実行するにはパスを指定する必要がある。

.eslintrc.json が以下の内容で作成されました。

.eslintrc.json

プロジェクトに合わせて、独自のルールを rules プロパティに追加してカスタマイズします。

パス指定なしで eslint コマンドを使えるようにする

ローカルのディレクトリ(node_modules)以下にインストールした ESLint で、パス指定なしで eslint コマンドを実行できるようにします。eslint-cli というパッケージをインストールすると良いです。

eslint-cli は、グローバルにインストールするため -g オプションを付けてインストール。これで、ローカルのディレクトリ(node_modules 以下)に入れた eslint コマンドをパス指定なしで実行できるようになります。

ESLint でコードをチェックする

テスト用の JavaScript ファイルを作成して、ESLint でチェックしてみます。

続いて、example.js を eslint でチェック。

エラーが2つ出ました。「文字列はシングルクォートで囲ってね」、「セミコロンが余計だよ」の2つを修正します。

もう一度チェック。

警告が出なくなりました。

ESLint でのチェック実行コマンドを npm script にする

いちいちファイルを指定して eslint でチェックを実行するのは面倒くさいので、JavaScript ファイルをいっぺんに検証できるように npm script としてまとめておきます。

package.json

これで以下のように実行して、まとめて eslint によるチェックを実行できる。

スポンサーリンク
オライリーのJavaScritp本(通称サイ本)は、昔かなり読み込みました。
 
スポンサーリンク

Leave Your Message!