【VSCode】ファイル保存時にimport文を整理する【ESLint】

## ファイル保存時にimport文を追加、削除、並べ替えをする方法
### 追加するための設定
VSCodeでファイル保存時にimport文を追加するためには`setting.json`に以下のように記述します。
```setting.json
{
  "editor.codeActionsOnSave": [
    "source.addMissingImports"
  ]
}
```

TypeScriptを使用している場合にはこれで`cmd + s`を入力すると不足しているimport文が追加されます。

しかし、JavaScriptを使用している場合には型チェックを有効にするために以下のいずれかを追加する必要があります。

#### `// @ts-check`を追記する
ファイルの先頭に`// @ts-check`を追加することで型チェックが有効になります。

#### `setting.json`で設定する
`setting.json`に以下を追記することで全ての`.js`ファイルで型チェックを有効にできます。
```setting.json
{
  "js/ts.implicitProjectConfig.checkJs": true
}
```

#### `jsconfig.json`で設定する
`jsconfig.json`を作成し、以下のように記述します。
```jsconfig.json
{
  "compilerOptions": {
    "checkJs": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}
```
するとプロジェクトの`.js`ファイルで型チェックを有効にできます。

型チェックを有効にする方法の詳細については以下のページをご参照ください。

https://code.visualstudio.com/docs/nodejs/working-with-javascript#_type-checking-javascript

### 削除する設定
使用されていないimport文を削除するためにはESLintを使用します。
まずESLintと`eslint-plugin-unused-imports`をインストールします。
```:ターミナル
$ yarn add -D eslint eslint-plugin-unused-imports
```
次に`.eslintrc.js`に以下のように記述します。
```.eslint.js
module.exports = {
  < 略 >
  plugins: ['unused-imports'],
  rules: {
    'unused-imports/no-unused-imports': 'error',
  },
}
```
すると使用されていないものがあると以下のようにエラーが出るようになります。
![スクリーンショット 2022-05-20 午前2.30.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2342443/fec3ffa6-0d7a-e48e-78e2-3cba0d6ad0fb.png)

`setting.json`に設定を追加してファイル保存時にESLintが動き、使用されていないimport文が削除されるようにします。
```setting.json
{
  "editor.codeActionsOnSave": [
    "source.fixAll.eslint"
  ]
}
```

### 並べ替える設定
import文を自動で並べ替えるには`eslint-plugin-import`を使用します。

```:ターミナル
$ yarn add -D eslint-plugin-unused-imports
```
`.eslintrc.js`に以下を追記します。
```.eslintrc.js
module.exports = {
  plugins: ['import'],
  rules: {
    'import/order': [
      'error',
      {
        groups: [
          'builtin',   // node "builtin" のモジュール
          'external',  // npm install したパッケージ
          'internal',  // パス設定したモジュール
          ['parent', 'sibling'], // 親階層と子階層のファイル
          'index',  // 同階層のファイル
          'object',  // object-imports
          'type',  // 型のみインポート
        ],
        'newlines-between': 'always',  // グループごとに空行を挿入
        alphabetize: {
          order: 'asc',  // アルファベット順
        },
      },
    ],
  },
}

```

`eslint-plugin-unused-imports`の設定については以下のページをご参照ください。

https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md

## まとめ
最終的な`setting.json`と`.eslintrc.js`の内容は以下のようになります。

```setting.json
{
  "editor.codeActionsOnSave": [
    "source.addMissingImports",
    "source.fixAll.eslint"
  ]
}
```
`"editor.codeActionsOnSave"`は配列で記述した順番に実行されます。
上記の順番で記述することで`追加` → `削除・並べ替え`の順番に実行されます。

```.eslintrc.js
module.exports = {
  plugins: ['import', 'unused-imports'],
  rules: {
    'import/order': [
      'error',
      {
        groups: [
          'builtin',
          'external',
          'internal',
          ['parent', 'sibling'],
          'index',
          'object',
          'type',
        ],
        'newlines-between': 'always',
        alphabetize: {
          order: 'asc',
        },
      },
    ],
    'unused-imports/no-unused-imports': 'error'
  },
}
```