Nuxt.jsをはじめよう - ESLint+Prettierでコードをフォーマットする

javascript
Nuxt.jsをはじめよう - ESLint+Prettierでコードをフォーマットする
目次

前回の記事 ではTypeScriptで Nuxt.js のコードを書き直しました。 今回は ESLint と Prettier によってコードフォーマットを適用します。

コードをきれいに保つ

コードフォーマッターやLinterの利用はJavaScriptのプロジェクトでは一般的になってきました。 今まで作ってきた Nuxt.js のプロジェクトにおいても、コードフォーマッターやLinterの設定を施したいと思います。

ESLint はソースコード静的解析し、良くない書き方を警告してくれるLinterです。 また、Prettier はルールに則ってソースコードを整形してくれるコードフォーマッターです。

Linterとコードフォーマッター間の設定ルールを統一しておくことで、特に複数人で開発するシーンでは、個々人のソースコードの書き方の差分を補正してくれるため大変重宝します。 逆にLinterとコードフォーマッター間のルールがずれていると、常にLinterから警告が出続けることとなり開発スピードを落とすことになりかねませんので注意しましょう。

それではさっそく設定していきます。

ESLintとPrettierのルールをインストール

まずは、ESLint と Prettier をインストールします。

npx create-nuxt-app コマンドでプロジェクト初期化時する際に ESLint と Prettier を選択していると、必要なファイルやライブラリがインストールされた状態でスタートできます。

1? Choose linting tools
2❯◉ ESLint
3 ◉ Prettier
4 ◯ Lint staged files

プロジェクト初期化時に設定をしておらず、後から追加したい場合には以下を実行すると良いでしょう。

1npm install --save-dev babel-eslint eslint eslint-config-prettier eslint-loader eslint-plugin-vue eslint-plugin-prettier prettier

次にルール適用に使うPluginをインストールします。

まずは ESLint をTypeScriptやPrettierと組み合わせて使うためのモジュールをインストールします。

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

次にTypeScriptの型定義をインストールします。

1npm i -D @types/prettier @types/eslint-plugin-prettier @types/eslint @types/babel-core

最後にルールをインストールします。

1npm i -D @vue/eslint-config-prettier @vue/eslint-config-typescript

設定ファイルの編集

次にインストールしたモジュールを使うための設定を行います。 .eslintrc.json に設定を行います。 parser に vue-eslint-parser、 parserOptions に @typescript-eslint/parser を追加し、 extends に外部のルールを設定していきます。個別にカスタマイズしたいルールは rules プロパティに記載していきます。

 1{
 2  "root": true,
 3  "env": {
 4    "browser": true,
 5    "node": true
 6  },
 7  "parser": "vue-eslint-parser",
 8  "parserOptions": {
 9    "parser": "@typescript-eslint/parser"
10  },
11  "extends": [
12    "prettier",
13    "plugin:@typescript-eslint/recommended",
14    "prettier/@typescript-eslint",
15    "plugin:prettier/recommended",
16    "plugin:vue/recommended",
17    "@vue/prettier",
18    "@vue/typescript"
19  ],
20  "plugins": ["vue"],
21  "rules": {
22    "semi": [2, "never"],
23    "no-unused-vars": ["error", { "args": "none" }],
24    "prettier/prettier": [
25      "error",
26      {
27        "singleQuote": true,
28        "semi": false
29      }
30    ]
31  }
32}

Linterの実行

package.json ファイルに lint lintfix コマンドを追加します。

1  "scripts": {
2    "lint": "eslint --ext .ts,.js,.vue --ignore-path .gitignore .",
3    "lintfix": "eslint --fix --ext .ts,.js,.vue --ignore-path .gitignore .",
4  }

Lintを実行してみます。

 1npm run lint
 2
 3/XXXXXXXXXX/api/routes/users.ts
 4   9:22  warning  Missing return type on function   @typescript-eslint/explicit-function-return-type
 5   9:33  warning  'next' is defined but never used  @typescript-eslint/no-unused-vars
 6  14:26  warning  Missing return type on function   @typescript-eslint/explicit-function-return-type
 7  14:37  warning  'next' is defined but never used  @typescript-eslint/no-unused-vars
 8
 9/XXXXXXXXXX/nuxt.config.ts
10  60:11  warning  Missing return type on function     @typescript-eslint/explicit-function-return-type
11  60:12  warning  'config' is defined but never used  @typescript-eslint/no-unused-vars
12  60:20  warning  'ctx' is defined but never used     @typescript-eslint/no-unused-vars
13
14/XXXXXXXXXX/store/modules/user.ts
15  28:20  warning  Missing return type on function  @typescript-eslint/explicit-function-return-type
16
17✖ 8 problems (0 errors, 8 warnings)

eslint --fix をラップした npm run lintfix コマンドによって、機械的に修正可能な警告は自動で修正できます。

Visual Studio Codeの設定

Visual Studio Code では拡張機能を使うことで保存時に自動フォーマットをかけたり、 エディタ上で警告を出すこともできます。ここでは設定方法を紹介します。

拡張機能のインストール

Visual Studio Code のコマンドパレットを開き（Cmd + Shift + P） 拡張機能のビューを開きます。その後、 ESLintとPrettierの拡張機能をインストールします。

eslint_extention

prettier_extention

インストール終了後、Visual Studio Code を再起動して拡張機能を有効にします。

settings.json の修正

プロジェクト直下の .vscode/settings.json を編集し、エディタの設定を定義します。

 1{
 2  "prettier.eslintIntegration": true,
 3  "eslint.autoFixOnSave": true,
 4  "eslint.options": { "configFile": "./.eslintrc.json" },
 5  "eslint.validate": [
 6    "javascript",
 7    { "language": "typescript", "autoFix": true },
 8    { "language": "vue", "autoFix": true }
 9  ]
10}

eslint.autoFixOnSave: ファイル保存時にESLintのルールを自動で適用する prettier.eslintIntegration: ESLint実行時にPrettierも適用する eslint.options:{ "configFile": "./.eslintrc.json" }: .eslintrc.json を適用ルールとする eslint.validate: 検証対象の言語を指定し、ついでに自動で修正する

重要なのは configFile の設定でVisual Studio Codeと npm run lint コマンド実行時のルールを共有することです。 ここの設定がずれてしまうとファイルを保存する度にLinterからエラーメッセージが表示されストレスフルになります。

参考サイト