Chapter 06

コーディング規約を導入しよう

Kei Touge
Kei Touge
2022.02.27に更新

🏛️ コーディング規約の必要性

NPM パッケージを OSS として公開した場合、例えばこの本のコードではインデントにスペース2文字、クォートにはシングルクォートが使われているのに、それとは異なるスタイルで書かれたプルリクエストが送られてくることもあるでしょう。

これを防ぐためには、クォートやタブなどのスタイルの強制と、ある程度のコーティング規約の強制をしておく必要があります。

この前者を担当するのがフォーマッター prettier で、後者を受け持つのがリンター eslint です。

これらの設定ファイル、それぞれ .eslintrc.prettierrc をレポジトリへ含めておけば、それをクローンした人にも(ほぼ)同じ制約の元でコーディングしてもらうことができます。

📥 リンターとフォーマッターの導入

prettier のインストールと設定

まず prettier からインストールしていきましょう。

zsh
% npm i -D prettier

prettier の設定ファイルは .prettierrc です。

prettier のオプションはこちらです:

https://prettier.io/docs/en/options.html

オプションの種類と数があまり多くないのでとくに悩む部分はないでしょう。

プロジェクトフォルダ直下に .prettierrc.json を作成します。

.prettierrc.json
{
  "singleQuote": true
}

また、prettier にフォーマット(=整形)されては困るディレクトリやファイルを .prettierignore へ指定しておきます。

.prettierignore
node_modules/
coverage/
dist/
package-lock.json

eslint のインストールと設定

つづいて eslint をインストールしていきます。

zsh
% npm i -D eslint eslint-config-prettier
% npm i -D @typescript-eslint/{eslint-plugin,parser}

設定ファイルは、prettier と同様に .eslintrc ですが、eslint の設定事項は非常に多岐にわたるため、頁数に限りがある本書では設定例を掲載するにとどめます。

.eslintrc.json
{
  // 適用する環境
  "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 へ指定します。

.eslintignore
node_modules/
coverage/
dist/

🚧 開発環境を制約する

NPM パッケージでは、コーディング規約を揃えたとしても開発環境の Node.js のメジャーバージョンが異なればライブラリの挙動が変わってしまうことがあります。

そこで開発環境をある程度揃えるため、 package.jsonengines エントリを設けます。

package.json
  "engines": {
    "node": ">=14"
  },

さらにこの設定を強制するためには、プロジェクトフォルダ直下へ .npmrc を作成しなければいけません。

.npmrc
engine-strict=true

engines の強制が設定されている場合、サポートしていないバージョンの Node.js を使おうとすると以下のようなエラーメッセージが表示され、依存関係のインストールを開始できません。

zsh
% 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 の設定

第1項で作成したようなコーディング規約も、利用するエディタによって自動的に改変が適用されてしまう場合があります。

コードエディタには多種多様なプロダクトが用意されていますが、本書ではほぼデファクトスタンダードとなっている Visual Studio Code (以下、VSCode の設定方法を記載しておきます。

ESLint と Prettier の拡張機能をインストール

先の設定を VSCode に反映させるためには、eslintprettier の拡張機能をインストールする必要があります。

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

.vscode ディレクトリの作成

プロジェクトフォルダ直下に .vscode フォルダを作成し、そこへ settings.jsonextensions.json のそれぞれを作成します。

.vscode/settings.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,
}
.vscode/extensions.json
{
  // もし上記2つの拡張がインストールされていない場合、インストールの推奨を表示します
  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
}