RAKUS Developers Blog | ラクス エンジニアブログ

株式会社ラクスのITエンジニアによる技術ブログです。

トップ > JavaScript > コードの静的解析を行うESLintについて

コードの静的解析を行うESLintについて

JavaScript

こんにちは。2年目のy_kwmtです。業務でESLintに触れる機会があったので、ESLintについてブログにまとめます。

ESLintとは

ESLintはJavaScriptのための静的検証ツールです。 ファイル内のバグを見つけたり、括弧やスペースの使い方などのスタイルが統一されているかチェックします。 自分で検証ルールを設定することができるので、プロジェクトに合わせたルールを設定することができます。

インストール

ESLintはNode8.10.0以降を利用して実行することができます。 Node.js のパッケージ管理ツールnpmを利用してインストールします。

> npm install -g eslint

バージョン確認はこちらから実行することができます。

> eslint -v
v6.3.0

実行

ESLintを実行するにあたって以下の2つのファイルを用意します。

hello.js

function helloWorld(name) {
    document.body.textContent = "Hello World. " + nama + "!"
}
helloWorld("World");

.eslintrc

{
  "root": true,                            // 親階層を見るか否か
  "parserOptions": {                        // サポートするJavaScript言語オプション
    "ecmaVersion": 6                        // ES6構文
  },
  "env": {
    "browser": true,                       // ブラウザのグローバル変数を有効にするか否か
    "commonjs": true,                      // CommonJSグローバル変数とCommonJSスコープを有効にするか否か
    "node": true,                      // nodeのグローバル変数とnode特有のルールを有効にするか否か
    "mocha": true                      // mochaのグローバル変数を有効にするか否か
  },
  "extends": ["eslint:recommended"],
  "rules": {
    "array-bracket-spacing": ["warn", "never"],           // 配列内の括弧の間隔
    "arrow-body-style": ["warn", "as-needed"],            // 矢印関数本体の周りの波括弧の使用
    "arrow-parens": ["warn", "as-needed"],            // アロー関数の括弧の一貫した使用
    "arrow-spacing": "warn",                 // アロー関数の矢印の後か前かにスペースを要求するか
    "brace-style": ["warn", "1tbs"],              // ブレーススタイルを適用
    "camelcase": "warn",                 // キャメルケース
    "comma-spacing": ["warn", {"after": true}],         // カンマ前後のスペース
    "dot-notation": "warn",                  // ドット表記スタイルの使用の奨励
    "eqeqeq": ["warn", "smart"],              // 型安全でない等価演算子を排除
    "indent": ["warn", 2, {                 // インデント
      "SwitchCase": 1,                     // ネストの深さ
      "FunctionDeclaration": {"parameters": 1},            // 関数宣言のパラメータのインデントレベル
      "MemberExpression": 1,                   // 複数行のプロパティチェーンのインデントレベル
      "CallExpression": {"arguments": 1}           // 関数呼び出し式の引数のインデントレベル
    }],
    "key-spacing": ["warn", {"beforeColon": false, "afterColon": true, "mode": "minimum"}], // オブジェクトリテラル・プロパティのキーと値の間の間隔を強制
    "keyword-spacing": "warn",                   // キーワードとキーワードの間隔
    "no-console": "off",                 // consoleを許可しない
    "no-empty": "off",                       // 空のブロックステートメントを許可しない
    "no-multi-spaces": "warn",                   // キーワード間の2つ以上のスペースを許可しない
    "no-redeclare": "off",                   // 複数回同じ変数を宣言許可しない
    "no-restricted-globals": ["warn", "Promise"],     // 指定したグローバル変数を利用しない
    "no-trailing-spaces": "warn",                // 行の末尾に空白を入れない
    "no-undef": "error",                 // 宣言していない変数を使用しない
    "no-unused-vars": ["warn", {"args": "none"}],     // 利用していない変数を警告
    "one-var": ["warn", "never"],             // ブロックスコープ内では1度の宣言で必要な変数宣言を行う
    "padded-blocks": ["warn", "never"],               // ブロック内のパディングを強制
    "object-curly-spacing": ["warn", "never"],            // 1行でオブジェクト定義する際、波括弧の前後に空白を入れない
    "quotes": ["warn", "single"],             // クォート
    "react/prop-types": "off",                   // propsの値に対してPropTypesを指定していない場合に警告
    "react/jsx-no-bind": "off",                  // jsx内でのbindを禁止する
    "semi": ["warn", "always"],                   // ASIのセミコロンの使用を許可するか否か
    "space-before-blocks": ["warn", "always"],            // ブロック前のスペースを許可しないかするか否か
    "space-before-function-paren": ["warn", "never"],     // 関数の括弧の前にスペースを許可するか否か
    "space-in-parens": ["warn", "never"],         // 括弧内のスペースを許可するか
    "strict": ["warn", "global"]              // use strict を記述すること
  }
}

こちらの.eslintrcのrulesにコーディングのルールを追加、削除することができます。

サンプルコードhello.jsに対して次のコマンドを実行します。

> eslint hello.js(ファイル名)

eslintコマンドを実行すると次のような結果が得られます。
合計で7つのエラーが発生しています。左から順に行番号と位置、警告かエラーか、警告とエラーの種類、.eslintrcに追加されているルール名が表示されています。

エラー、警告の種類

Use the global form of 'use strict'
'use strict'を省略しているので、警告が発生しています。 警告を出さないようにするにはファイルの先頭に'use strict'を追記してください。 こちらは「"strict": ["warn", "global"]」でルールを設定、解除できます。

Expected indentation of 2 spaces but found 4
インデントでスペース2個分開ける必要があるのに4個分開けているので警告が発生しています。 警告を出さないようにするにはインデントを修正してください。 こちらは「indent」でルールを設定、解除できます。

Strings must use singlequote
シングルクォートを使用しなければいけないが、ダブルクォートを使用しているので、警告が発生しています。 警告を出さないようにするにはシングルクォートを使用してください。 こちらは「"quotes": ["warn", "single"]」でルールを設定、解除できます。

nama is not defined
「nama」という変数が定義されていないと怒られています。 エラーを出さないようにするにはnamaという変数を定義するか、削除してください。 こちらは「"no-undef": "error"」でルールを設定できます。

Missing semicolon
行末にセミコロンがないので、警告が発生しています。 警告を出さないようにするにはセミコロンを追加してください。 こちらは「 "semi": ["warn", "always"]」でルールを設定、解除できます。

発生した7つの警告、エラーの修正を行い、再度eslintコマンドを実行して問題なければ、何も表示されません。

最後に

ESLintで発生した警告の改修を業務で行ったことをきっかけに、ブログにESLintについてまとめました。 JavaScriptのコーディングを行う方々の参考になればと思います。
コードを変更する際、コードが読みづらいと理解、変更に時間がかかってしまうので、 他の開発者に迷惑をかけないよう、設定されているコード規約を守り、読みやすいコードを書くことを心掛けていきます。

参考

qiita.com eslint.org

◆TECH PLAY
techplay.jp

◆connpass
rakus.connpass.com

ラクスの技術 / デザイン情報サイト
Copyright © RAKUS Co., Ltd. All rights reserved.