# Linter(構文チェッカー)のセットアップ
開発者として、開発過程をできるだけ合理的にする事をおすすめします。適切なツールをインストールして利用することは、作業しているすべてのプロジェクトにとって不可欠なことです。必須ではありませんが linter(構文チェッカー)を利用することで、あなたを大いに助けることになるでしょう。
# コードエディタのインストール
はじめに、適切なコードエディタを用意しましょう。メモ帳やNotepad++は、このようなプロジェクトには向いていないのでおすすめしません。これらのエディタを利用すると多くの頭痛や構文エラーが発生します、良いエディタに切り替えることでみんなが救われるでしょう。
- Visual Studio Code 高速で高性能であるため非常に人気のある選択肢です。多種多様な言語をサポートし、独自のターミナルが付属していて、JavaScriptやTypeScriptのためのインテリセンスや自動補完も備わっています。おすすめの選択肢です。
- Atom 簡単で扱いやすく、ユーザーフレンドリーです。多くの開発者が始めに使用します。
- Sublime Text もう一つの人気なエディタで、簡単にコードを書くことができます。
# Linterのインストール
適切なコードエディタがメモ帳やNotepad++より優れている大きな理由の一つはLinterを利用することができることです。Linterは構文をチェックし、あなたが利用することを選択した場合、自分で定義できる特定のスタイルに従う一貫したコードを作成するのを助けます。あなたが決めたスタイルを守れば、これは良い習慣を定着させるのを助けます。
まず、ESLintをインストールして、プロジェクトで利用できるようにします。
# ローカルインストール
npm install eslint
# グローバルインストール
npm install --global eslint
その後、エディタにあった拡張機能をインストールしてください。
- [ Visual Studio Code : ESLint ](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- Atom : Linter-ESLint (Atom : Linterが必要)
- [Sublime Text : ESLint](https://packagecontrol.io/packages/ESLint)
TIP
あなたは、これらをエディタに直接インストールすることができます。Visual Studio CodeではCtrl + Shift + X。AtomではCtrl + ,。SublimeではCtrl + Shift + P(Package Controlが必要)。その後、適切な拡張機能を見つけインストールしてください。
# ESLintルールの設定
ESLintを使い始めるとコードに対するエラーや警告がたくさん表示されると思いますが、驚く必要はありません。利用するために以下のステップに従ってください。
- ルートディレクトリに
.eslintrc.jsonというファイルを作成する(ここには、このプロジェクトのメインファイルがあります)。 - 以下のコードをファイルに貼り付ける。
{
"extends": "eslint:recommended",
"env": {
"node": true,
"es6": true
},
"parserOptions": {
"ecmaVersion": 2019
},
"rules": {
}
}
これは、ESLintファイルの基本です。rulesオブジェクトはESLintのルールを定義する場所です。例えば、セミコロンを必ず付けるようにしたい場合、ルールに"semi": ["error", "always"]を追加します。
ESLintのすべてのルールはここにあります。実際にたくさんのルールがありはじめは圧倒されると思いますが、リストをたどり一回設定してしまえばそれで済みます。
自分で設定したくなければ、このガイドで利用しているルールを利用することもできます。
{
"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に行き、変更したいルールを見つけて、それに応じて変更してください。