更新日: 2017年5月17日
jQuery & JavaScript

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

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

— 環境 —
npm 4.6.1
yarn 0.24.5
macOS Sierra

npm のアップデート。


$ npm update -g npm
$ npm --version
4.6.1

$ npm update -g npm

$ npm --version

4.6.1

yarn のアップデート。


$ brew upgrade yarn
$ yarn --version
0.24.5

$ brew upgrade yarn

$ yarn --version

0.24.5

【お知らせ】英単語を画像イメージで楽に暗記できる辞書サイトを作りました。英語学習中の方は、ぜひご利用ください！

画像付き英語辞書 Imagict | 英単語をイメージで暗記
【開発記録】
英単語を画像イメージで暗記できる英語辞書サービスを作って公開しました

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

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


$ npm init

$ 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 ディレクトリ）にインストールします。


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

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

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

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


$ npm install -g --save-dev eslint

$ npm install -g --save-dev eslint

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

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


$ yarn add --dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint

$ yarn add --dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint

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

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

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


$ ./node_modules/.bin/eslint --init
? How would you like to configure ESLint? Answer questions about your style
? Are you using ECMAScript 6 features? Yes
? Are you using ES6 modules? Yes
? Where will your code run? Browser
? Do you use CommonJS? No
? Do you use JSX? Yes
? Do you use React? Yes
? What style of indentation do you use? Spaces
? What quotes do you use for strings? Single
? What line endings do you use? Unix
? Do you require semicolons? No
? What format do you want your config file to be in? JSON
Successfully created .eslintrc.json file in /path/to/my_project

$ ./node_modules/.bin/eslint --init

? How would you like to configure ESLint? Answer questions about your style

? Are you using ECMAScript 6 features? Yes

? Are you using ES6 modules? Yes

? Where will your code run? Browser

? Do you use CommonJS? No

? Do you use JSX? Yes

? Do you use React? Yes

? What style of indentation do you use? Spaces

? What quotes do you use for strings? Single

? What line endings do you use? Unix

? Do you require semicolons? No

? What format do you want your config file to be in? JSON

Successfully created .eslintrc.json file in /path/to/my_project

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

.eslintrc.json

{
    "env": {
        "browser": true,
        "es6": true
    },
    "extends": "eslint:recommended",
    "parserOptions": {
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true,
            "jsx": true
        },
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "unix"
        ],
        "quotes": [
            "error",
            "single"
        ],
        "semi": [
            "error",
            "never"
        ]
    }
}

{

"env": {

"browser": true,

"es6": true

"extends": "eslint:recommended",

"parserOptions": {

"ecmaFeatures": {

"experimentalObjectRestSpread": true,

"jsx": true

"sourceType": "module"

"plugins": [

"react"

"rules": {

"indent": [

"error",

"linebreak-style": [

"error",

"unix"

"quotes": [

"error",

"single"

"semi": [

"error",

"never"

]

}

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

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

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


$ npm install -g eslint-cli

$ npm install -g eslint-cli

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


$ eslint --version
v3.19.0

$ eslint --version

v3.19.0

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

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


$ vi example.js
document.write("hello world");

$ vi example.js

document.write("hello world");

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


$ eslint example.js

/path/to/my_project/example.js
  1:16  error  Strings must use singlequote  quotes
  1:30  error  Extra semicolon               semi

x 2 problems (2 errors, 0 warnings)

$ eslint example.js

/path/to/my_project/example.js

1:16 error Strings must use singlequote quotes

1:30 error Extra semicolon semi

x 2 problems (2 errors, 0 warnings)

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


$ vi example.js
document.write('hello world')

$ vi example.js

document.write('hello world')

もう一度チェック。


$ eslint example.js

$ eslint example.js

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

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

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

package.json

"scripts": {
  "lint": "eslint **/*.js"
}

"scripts": {

"lint": "eslint **/*.js"

}

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


$ npm run lint

$ npm run lint

オライリーのJavaScritp本（通称サイ本）は、昔かなり読み込みました。

JavaScript 第6版

jQuery レッスンブック jQuery2.X/1.X対応

<< 前の記事 : JavaScriptでHTMLコメント要素を取得する

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

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

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

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

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

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

Leave Your Message! コメントをキャンセル