【npm】`prettier`と`eslint`の導入 #npm

前提条件

以下手順を実施済み

1. プロジェクトの初期化

プロジェクトの初期化は、まず任意のディレクトリを作成して、npm initコマンドを実行します。

mkdir sample
cd sample

npm init --yes

2. `prettier`の導入

prettierは、独自のコーディング規約に則り、ソースコードを整形してくれるコードフォーマッタです。
これを利用することで、ソースコードが自動で整形され、コードスタイルの一貫性を保ちやすくなります。

npm i -D prettier

プロジェクト直下に設定ファイル.prettierrc.jsonを作成することで、フォーマットオプションをカスタマイズできます。
"singleQuote": trueを指定した場合、二重引用符を一重引用符に変換します。

.prettierrc.json

{
  "singleQuote": true
}

ファイル形式をjsonとしていますが、実際にはjs・jsonのどちらも使用できます。

使用できるオプションは、公式のドキュメントで確認できます。

また、prettierにフォーマットされては困るディレクトリやファイルがある場合は、.prettierignoreへ指定しておきます。

.prettierignore

node_modules/
coverage/
dist/
package-lock.json

これも設定ファイルと同様に、プロジェクト直下に作成します。

2. `eslint`の導入

eslintは、Javascript の為の静的検証ツールです。
コードを実行する前に明らかなバグを見つけたり、コーディング規約に反している箇所を見つけるのに役立ちます。

npm i -D eslint eslint-config-prettier

eslint-config-prettierは、不要な、またはprettierと競合する可能性のあるルールをオフにします。

prettierと同様、設定ファイル.eslintrc.jsonはプロジェクト直下に作成します。

.eslintrc.json

{
  // 適用する環境
  "env": {
    "node": true, // Nodejs グローバル変数と Nodejs スコープを検証
    "es6": true, // モジュールを除くすべての ECMAScript 6 機能を有効
    "commonjs": true // CommonJS グローバル変数と CommonJS スコープ を検証
  },
  // 構文解析（パーサー）
  "parserOptions": {
    // モジュール形式のソースコードを用います
    "sourceType": "module",
    // JS のバージョンは最新とします
    "ecmaVersion": "latest"
  },
  // プラグイン
  "plugins": [],
  /**
   *  ルールのインポート
   */
  "extends": [
    "eslint:recommended",
    "prettier" // eslint-config-prettier
  ]
}

prettierは、必ずextends配列の最後尾に配置します。

prettierと同様に、eslintで文法チェックする必要のないディレクトリやファイルは、.eslintignoreへ指定しておきます。

.eslintignore

node_modules/
coverage/
dist/

3. 開発環境の制約

Nodejsのメジャーバージョンを指定するため、package.jsonへenginesエントリを追加します。

package.json

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

また、この設定を強制する為、.npmrcファイルをプロジェクト直下に作成します。

.npmrc

engine-strict=true

これにより、仮にサポートされていないNodejsがインストールされていた場合、npm installを実行した際にエラーメッセージが表示され、依存関係を解決できなくなります。

4. Visual Studio Code の設定

ここまでで設定したコーディング規約をVisual Studio Code（以下 vscode）に反映する為に、まずは拡張機能をインストールします。

次に、プロジェクト直下に.vscodeディレクトリを作成して、その下にsettings.jsonとextensions.jsonを作成します。

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.json

{
  // 拡張機能がインストールされていない場合、インストールの推奨を表示
  "recommendations": ["esbenp.prettier-vscode", "dbaeumer.vscode-eslint"]
}

※ Typescript を使用している場合

プロジェクトに Typescript を含む場合、パッケージの追加と設定が必要になります。

npm i -D @typescript-eslint/parser @typescript-eslint/eslint-plugin

@typescript-eslint/parser: TypeScript 構文を解析
@typescript-eslint/eslint-plugin: TypeScript で eslint を利用するためのプラグイン

追加したパッケージを、eslintの設定ファイルに加えます。