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

## 前提条件

以下手順を実施済み

[【npm】Nodejsプロジェクトの準備](https://qiita.com/onkz/items/de3ec36724ee8956922c)

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

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

```bash
mkdir sample
cd sample

npm init --yes
```

## 2. `prettier`の導入

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

```bash
npm i -D prettier
```

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

```json:.prettierrc.json
{
  "singleQuote": true
}
```

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

使用できるオプションは、[公式のドキュメント](https://prettier.io/docs/en/options.html)で確認できます。

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

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

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

## 2. `eslint`の導入

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

```bash
npm i -D eslint eslint-config-prettier
```

:::note
[`eslint-config-prettier`](https://github.com/prettier/eslint-config-prettier)は、不要な、または`prettier`と競合する可能性のあるルールをオフにします。
:::

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

```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
  ]
}
```

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

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

```:.eslintignore
node_modules/
coverage/
dist/
```

## 3. 開発環境の制約

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

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

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

```:.npmrc
engine-strict=true
```

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

## 4. Visual Studio Code の設定

ここまでで設定したコーディング規約を[Visual Studio Code（以下 `vscode`）](https://code.visualstudio.com)に反映する為に、まずは拡張機能をインストールします。

- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)

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

```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
}
```

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

## ※ Typescript を使用している場合

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

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

- [@typescript-eslint/parser](https://www.npmjs.com/package/@typescript-eslint/parser): TypeScript 構文を解析
- [@typescript-eslint/eslint-plugin](https://www.npmjs.com/package/@typescript-eslint/eslint-plugin): TypeScript で eslint を利用するためのプラグイン

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

```json:.eslintrc.json
{
  ...,
  "parser": "@typescript-eslint/parse",
  ...,
  "plugins": ["@typescript-eslint"],
  "extends": [
    ...,
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ]
}
```