🏛️ コーディング規約の必要性
NPM パッケージを OSS として公開した場合、例えばこの本のコードではインデントにスペース２文字、クォートにはシングルクォートが使われているのに、それとは異なるスタイルで書かれたプルリクエストが送られてくることもあるでしょう。
これを防ぐためには、クォートやタブなどのスタイルの強制と、ある程度のコーティング規約の強制をしておく必要があります。
この前者を担当するのがフォーマッター prettier で、後者を受け持つのがリンター eslint です。
これらの設定ファイル、それぞれ .eslintrc と .prettierrc をレポジトリへ含めておけば、それをクローンした人にも（ほぼ）同じ制約の元でコーディングしてもらうことができます。
📥 リンターとフォーマッターの導入
prettier のインストールと設定
まず prettier からインストールしていきましょう。
% npm i -D prettier
prettier の設定ファイルは .prettierrc です。
prettier のオプションはこちらです:
オプションの種類と数があまり多くないのでとくに悩む部分はないでしょう。
プロジェクトフォルダ直下に .prettierrc.json を作成します。
{
"singleQuote": true
}
また、prettier にフォーマット（＝整形）されては困るディレクトリやファイルを .prettierignore へ指定しておきます。
node_modules/
coverage/
dist/
package-lock.json
eslint のインストールと設定
つづいて eslint をインストールしていきます。
% npm i -D eslint eslint-config-prettier
% npm i -D @typescript-eslint/{eslint-plugin,parser}
-
eslint:eslint本体です。 -
eslint-config-prettier:prettierと衝突するルールとprettierにとって不要なルールを無効化します。 -
@typescript-eslint/eslint-plugin:TypeScript でeslintを利用するためのプラグイン。 -
@typescript-eslint/parserTypeScript 構文を解析します。
設定ファイルは、prettier と同様に .eslintrc ですが、eslint の設定事項は非常に多岐にわたるため、頁数に限りがある本書では設定例を掲載するにとどめます。
{
// 適用する環境
"env": {
"es6": true,
"node": true,
"commonjs": true
},
// 構文解析（パーサー）
"parser": "@typescript-eslint/parser",
"parserOptions": {
// モジュール形式のソースコードを用います
"sourceType": "module",
// JS のバージョンは最新とします
"ecmaVersion": "latest"
},
// プラグイン
"plugins": ["@typescript-eslint"],
/**
* ルールのインポート
* ここでは基本的に 'recommended' に従います
*/
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/eslint-recommended",
"plugin:@typescript-eslint/recommended",
"prettier"
]
}
.prettierignore と同様に eslint に文法チェックされては困るファイルやフォルダを .eslintignore へ指定します。
node_modules/
coverage/
dist/
🚧 開発環境を制約する
NPM パッケージでは、コーディング規約を揃えたとしても開発環境の Node.js のメジャーバージョンが異なればライブラリの挙動が変わってしまうことがあります。
そこで開発環境をある程度揃えるため、 package.json へ engines エントリを設けます。
"engines": {
"node": ">=14"
},
さらにこの設定を強制するためには、プロジェクトフォルダ直下へ .npmrc を作成しなければいけません。
engine-strict=true
engines の強制が設定されている場合、サポートしていないバージョンの Node.js を使おうとすると以下のようなエラーメッセージが表示され、依存関係のインストールを開始できません。
% npm install
[1/5] Validating package.json...
error my-hello-lib@1.0.2: The engine "node" is incompatible with this module.
Expected version ">=14". Got "12.20.0"
error Found incompatible module.
⚙️ Visual Studio Code の設定
第１項で作成したようなコーディング規約も、利用するエディタによって自動的に改変が適用されてしまう場合があります。
コードエディタには多種多様なプロダクトが用意されていますが、本書ではほぼデファクトスタンダードとなっている Visual Studio Code （以下、VSCode） の設定方法を記載しておきます。
ESLint と Prettier の拡張機能をインストール
先の設定を VSCode に反映させるためには、eslint と prettier の拡張機能をインストールする必要があります。
.vscode ディレクトリの作成
プロジェクトフォルダ直下に .vscode フォルダを作成し、そこへ settings.json と extensions.json のそれぞれを作成します。
{
// 保存時に eslint によるリントを行います
"editor.codeActionsOnSave": {
"source.fixAll": true
},
// デフォルトのフォーマッターを prettier にします
"editor.defaultFormatter": "esbenp.prettier-vscode",
// 保存時に prettier によって整形します
"editor.formatOnSave": true,
// タブ幅を 2 とします
"editor.tabSize": 2,
// タブにはスペースを使います
"editor.insertSpaces": true,
// 改行コードは LF とします
"files.eol": "\n",
// ファイル末尾には自動的に空行を挿入します
"files.insertFinalNewline": true,
// 拡張機能のインストール推奨を非表示にできないようにします
"extensions.ignoreRecommendations": false,
}
{
// もし上記２つの拡張がインストールされていない場合、インストールの推奨を表示します
"recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
}