# Linter(構文チェッカー)のセットアップ

開発者として、開発過程をできるだけ合理的にする事をおすすめします。適切なツールをインストールして利用することは、作業しているすべてのプロジェクトにとって不可欠なことです。必須ではありませんが linter(構文チェッカー)を利用することで、あなたを大いに助けることになるでしょう。

# コードエディタのインストール

はじめに、適切なコードエディタを用意しましょう。メモ帳やNotepad++は、このようなプロジェクトには向いていないのでおすすめしません。これらのエディタを利用すると多くの頭痛や構文エラーが発生します、良いエディタに切り替えることでみんなが救われるでしょう。

  • Visual Studio Code (opens new window) 高速で高性能であるため非常に人気のある選択肢です。多種多様な言語をサポートし、独自のターミナルが付属していて、JavaScriptやTypeScriptのためのインテリセンスや自動補完も備わっています。おすすめの選択肢です。
  • Atom (opens new window)簡単で扱いやすく、ユーザーフレンドリーです。多くの開発者が始めに使用します。
  • Sublime Text (opens new window)もう一つの人気なエディタで、簡単にコードを書くことができます。

# Linterのインストール

適切なコードエディタがメモ帳やNotepad++より優れている大きな理由の一つはLinterを利用することができることです。Linterは構文をチェックし、あなたが利用することを選択した場合、自分で定義できる特定のスタイルに従う一貫したコードを作成するのを助けます。あなたが決めたスタイルを守れば、これは良い習慣を定着させるのを助けます。

まず、ESLint (opens new window)をインストールして、プロジェクトで利用できるようにします。

# ローカルインストール
npm install eslint

# グローバルインストール
npm install --global eslint

その後、エディタにあった拡張機能をインストールしてください。

TIP

あなたは、これらをエディタに直接インストールすることができます。Visual Studio CodeではCtrl + Shift + X。AtomではCtrl + ,。SublimeではCtrl + Shift + P(Package Control (opens new window)が必要)。その後、適切な拡張機能を見つけインストールしてください。

# ESLintルールの設定

ESLintを使い始めるとコードに対するエラーや警告がたくさん表示されると思いますが、驚く必要はありません。利用するために以下のステップに従ってください。

  1. ルートディレクトリに.eslintrc.jsonというファイルを作成する(ここには、このプロジェクトのメインファイルがあります)。
  2. 以下のコードをファイルに貼り付ける。
{
    "extends": "eslint:recommended",
    "env": {
        "node": true,
        "es6": true
    },
    "parserOptions": {
        "ecmaVersion": 2019
    },
    "rules": {

    }
}

これは、ESLintファイルの基本です。rulesオブジェクトはESLintのルールを定義する場所です。例えば、セミコロンを必ず付けるようにしたい場合、ルールに"semi": ["error", "always"]を追加します。

ESLintのすべてのルールはここ (opens new window)にあります。実際にたくさんのルールがありはじめは圧倒されると思いますが、リストをたどり一回設定してしまえばそれで済みます。

自分で設定したくなければ、このガイドで利用しているルールを利用することもできます。

{
    "extends": "eslint:recommended",
    "env": {
        "node": true,
        "es6": true
    },
    "parserOptions": {
        "ecmaVersion": 2019
    },
    "rules": {
        "brace-style": ["error", "stroustrup", { "allowSingleLine": true }],
        "comma-dangle": ["error", "always-multiline"],
        "comma-spacing": "error",
        "comma-style": "error",
        "curly": ["error", "multi-line", "consistent"],
        "dot-location": ["error", "property"],
        "handle-callback-err": "off",
        "indent": ["error", "tab"],
        "max-nested-callbacks": ["error", { "max": 4 }],
        "max-statements-per-line": ["error", { "max": 2 }],
        "no-console": "off",
        "no-empty-function": "error",
        "no-floating-decimal": "error",
        "no-inline-comments": "error",
        "no-lonely-if": "error",
        "no-multi-spaces": "error",
        "no-multiple-empty-lines": ["error", { "max": 2, "maxEOF": 1, "maxBOF": 0 }],
        "no-shadow": ["error", { "allow": ["err", "resolve", "reject"] }],
        "no-trailing-spaces": ["error"],
        "no-var": "error",
        "object-curly-spacing": ["error", "always"],
        "prefer-const": "error",
        "quotes": ["error", "single"],
        "semi": ["error", "always"],
        "space-before-blocks": "error",
        "space-before-function-paren": ["error", {
            "anonymous": "never",
            "named": "never",
            "asyncArrow": "always"
        }],
        "space-in-parens": "error",
        "space-infix-ops": "error",
        "space-unary-ops": "error",
        "spaced-comment": "error",
        "yoda": "error"
    }
}

この設定の主なポイントは以下のとおりです。

  • console.log()でデバッグできるようにします。
  • varを禁止し、varやletではなくconstを最優先で使うようにします。
  • コールバック内で同じ名前の変数を許可しません。
  • ダブルクオート(")ではなくシングルクオート(')を利用するようにします。
  • セミコロンを要求します。JavaScriptでは必須ではありませんがつけるほうが良いとされています。
  • プロパティへのアクセスを同じ行にする必要があります。
  • タブでインデントすることを要求します。
  • ネストしたコールバックを4つに制限します。このエラーが発生した場合は、コードのリファクタリングを検討することをお勧めします。

現在のコードスタイルと少し違う場合や、これらの規則のいくつかが気に入らない場合は、それで問題ありません。ESLint docs (opens new window)に行き、変更したいルールを見つけて、それに応じて変更してください。

← Setting up a bot application →