Next.js環境にESLint＋Prettierを導入する方法

next 2022.04.19 ichikawa

ブログメインビジュアル こんにちは！フロントエンドエンジニアの市川です。
今回は、Next.js環境にESLint＋Prettierを導入する方法ご紹介したいと思います。

目次

ESLintとPrettierって何？

ESLintとは

ESLintは、JavaScriptのための静的検証ツールです。コード内のバグや構文エラーをチェックしてくれます。

Prettierとは

Prettierは、ソースコード整形のためのツール（コードフォーマッター）です。ソースコードの一貫性を保つことができます。


ESLint＋Prettierを組み合わせて導入することで、コードの構文チェック〜自動整形を一貫して行うことができます。

何に役立つか？

1番のメリットは、「コードを綺麗に保つことができる」という点だと思います。具体的には、

・早期にバグを発見できる
・複数人での開発時に、メンバー間でのコード記述ルールが統一できる
・コードレビューの時間が短縮できる
・作業スピードが向上する

正直、デメリットは無いと思います。
品質や作業効率の向上に非常に有用なので、特に複数人で開発するときは、導入することを強くオススメします！


ESLintの導入

1. ESlint導入

下記のコマンドを入力します。 yarn add --dev eslint

2. .eslintrcファイルの作成

package.jsonと同階層に.eslintrcファイルを作成し、下記の設定を追加して下さい。

{
  "parserOptions": {
      "ecmaVersion": 2019
    },
    "rules": {}
  }

3. ESlintの実行

下記のコマンドを入力します。
yarn eslint src

ESLintの設定は以上です。

Prettierの導入

1. Prettier導入

下記のコマンドを入力します。
yarn add prettier --dev --exact

prettierコマンドを実行できるようにするためのPATHを通します。
export PATH=$PATH:./node_modules/.bin

2. package.jsonの設定

package.jsonのscriptsにコマンドを定義します。

"scripts": {
  "fmt": "prettier --write src/**/*.js"
}

こちらを定義すると、yarn run fmtコマンドでPrettierが実行されます。

3. .prettierrcの設定

package.jsonと同階層に、.prettierrcファイルを作成します。
このファイルは、Prettierのデフォルト設定を上書きできます。オリジナルのルールを適用したい場合にご使用下さい。

{
   "singleQuote": true
 }



以上で設定は完了です！

おわりに

いかがでしたでしょうか。今回は基本的な設定方法のみご紹介しましたが、ESLintでチェックする項目や、Prettierのフォーマットルールをカスタマイズすることも可能です。これから Next.jsで環境構築を始める方の参考になれば幸いです。


今回は以上になります。最後までお読み頂きありがとうございました！

この記事を書いた人 ichikawa 2014年新卒入社のフロントエンドエンジニア。CSSが得意です。
TOP