ESLint のお勉強

2019年4月15日2023年6月5日

はじめに

ESLintはJavascriptの静的に検証するツールです。実行する前にバグや括弧・スペースのスタイル統一することができます。

類似するツール

JSLint
JSHint

早速使ってみよう

インストール

ESLintはnpmを使用してインストールを行います。npmは事前にインストールされているものとします。

npm install eslint

インストール完了後、バージョンの確認を行います。

npm install eslint -v

eslint init

初期化して設定を行います。

eslint --init

どのようにESLintを使用しますか？文法チェック、問題を見つける、コードスタイルを守るために使用します。
モジュールのタイプは何を使用しますか？何も
どのフレームワークを使用しますか？何も
どこでコードを実行しますか？ブラウザとノード
どのようなスタイルにしますか？質問に答えて設定します
フォーマットはどうしますか？JavaScript
インデントのスタイルはどうしますか？スペース
文字列の引用符は何を使用しますか？ダブルコーテーション
改行のスタイルは何を使用しますか？Windows
セミコロンは必要ですか？はい
フォーマットはどうしますか？JavaScript

すると設定内容が反映された .eslintrc.js のファイルが追加されています。

module.exports = {
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": "eslint:recommended",
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018
    },
    "rules": {
        "indent": [
            "error",
            4
        ],
        "linebreak-style": [
            "error",
            "windows"
        ],
        "quotes": [
            "error",
            "double"
        ],
        "semi": [
            "error",
            "always"
        ]
    }
};