Zenn
🛠

Next.js(Typescript) + Prettier + ESLintを用いた環境構築①【vscode】

2022/01/31に公開
JavaScript
Next.js
React
TypeScript
環境構築
tech

はじめに

株式会社var でインターンをしているひらはらです。

先日新しいプロジェクト立ち上げに伴ってNext.js(TypeScript)とPrettier、ESLintの環境構築を行いました。その際の手順についてこちらにまとめます。

  • Next.js
  • Typescript
  • ESLint
  • Prettier

フロントエンドの開発においてESLintとPrettierの環境構築は必須なため、是非ご閲覧下さい。

環境

作成環境は以下のとおりです。

- OS: Mac(m1)
- ブラウザ: Google Chrome
- Node.js: v16.13.0
- エディター: vscode

前提

Next.jsを使用する時は下記の2つをコンピュータにインストールしておきます。

- Node
- npm or yarn

Next.jsを使うにはNodeの環境が必須です。ターミナルで下記のコマンドを実行し、数字のバージョンが返ってくればインストールは完了しています。

node -v

エラーメッセージが返ってきた場合はこちらからインストールします。

npmかyarnはnodeパッケージを操作する際のパッケージマネージャーです。ubuntuでのaptやdebianでのyum、pythonでのpipのようなパッケージ管理が可能です。下記のコマンドで確認し、npmかyarnのどちらかで数字のバージョンが返っていればOKです。

# npmの場合
npm -v
# yarnの場合
yarn -v

もしインストールしていなければ、npmかyarnのどちらかをインストールして下さい。

手順

Next.jsのプロジェクト構築

それでは早速Next.jsの環境を構築していきます。下記のコマンドでNext.jsとTypeScriptの環境を構築します。

# npmの場合
npx create-next-app@latest --ts
# yarnの場合
yarn create next-app --typescript

下記のようにプロジェクトの名前を聞いてくるので、作成するプロジェクトの名前を入力します。

✔ What is your project named? … プロジェクト名

インストールが完了したら、該当のプロジェクトのディレクトリに移動します。

cd プロジェクト名

次に下記コマンドを実行することでNext.jsが起動します。ブラウザでlocalhost:3000にアクセスすると、実際にブラウザで確認できます。

# npmの場合
yarn dev

ESLintの設定

次にリンターであるESLintの設定をします。Next.jsではバージョン11からデフォルトでESLintがインストールされており、最初からリンターを実行することが可能です。

下記のコマンドをターミナルで実行します。

# npmの場合
npm run lint
# yarnの場合
yarn lint

問題がなければ、下記のようになります。

❯ yarn lint
yarn run v1.22.17
$ next lint
✔ No ESLint warnings or errors
✨  Done in 1.50s.

もしエラーが有ると、該当のソースコードとエラーメッセージが返ってきます。

yarn run v1.22.17
$ next lint --dir src
./src/pages/index.tsx
20:5  Warning: Unexpected console statement.  no-console

次にeslintで実行するディレクトリを指定するためにpackage.jsonを修正します。

Next.jsのデフォルトのディレクトリ構造は下記の感じになっていますが、開発の中でファイルやディレクトリが肥大化することも多いです。
わかりやすい様に設定ファイル以外をsrcディレクトリの中に集約させます。

// 変更前
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package.json
├── pages
├── public
├── styles
├── tsconfig.json
└── yarn.lock

srcディレクトリを作成し、pagesとstylesディレクトリをsrcディレクトリの中に移動させます。

mkdir src
mv pages styles src

// 変更後
├── README.md
├── next-env.d.ts
├── next.config.js
├── node_modules
├── package.json
├── public
├── src
 ├── pages
 ├── styles
├── tsconfig.json
└── yarn.lock

最後にpackage.jsonの中身を変更させます。

// package.json
"script": {
 // 変更前
 "lint": "next lint"
 // ↓↓
 // 変更後
 "lint": "next lint --dir src",
}

これで、srcディレクトリの中だけにESLintを実行することが可能になりました。

ESLintの独自ルール設定

ESLintにおける独自の設定を.eslint.jsonファイルに記載することができます。これにより、yarn lint or npm run lintを実行した時に、eslint.jsonで指定したルールが適用されてリンターが実行されます。

Next.jsでは既に.eslintrc.jsonファイルが作成されており、下記の設定が記載されています。

{
  "extends": "next/core-web-vitals"
}

ルールを追加する場合は、下記のようにrulesを追加します。

{
  "extends": [
    "next/core-web-vitals",
  ],
// ルールを追加↓
  "rules": {
    "no-console": 1
  }
}

こまかなルールについては こちらを閲覧の上、設定して下さい。

VScodeを使用している場合

yarn lint or npm run lintでESLintを実行することができましたが、vscodeを使用している場合は下記の拡張機能をインストールすることで、ソースコードを書いている途中にリアルタイムでESLintを実行することが可能です。

vscodeの拡張機能の欄にてeslintと検索もできます。
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Prettierのインストール

次にNode.js上で動作するコードフォーマッターであるPrettierをインストールします。
Prettierを使うことで、設定したコーディングスタイルに沿ったソースコードにすることが可能です。

Prettierは下記のような言語をサポートしているため、多くの開発で使用されています。

JavaScript / JSX / TypeScript / JSON / HTML / Vue / Angular / CSS / Less / SCSS / styled-components / GraphQL / Markdown / YAML

下記のコマンドでインストールします。

# npmの場合
npm install -D prettier eslint-config-prettier
# yarnの場合
yarn add -D prettier eslint-config-prettier

package.jsonに下記を追加し、formatというコマンドを実行できるようにします。

// package.json
"scripts": {
 // 追記
 "format": "prettier --write --ignore-path .gitignore './**/*.{js,jsx,ts,tsx,json}'",
}

これによりターミナルから下記のコマンドでPrettierによるフォーマットを実行することができます。

# npmの場合
npm run format
# yarnの場合
yarn format

.prettierrcファイルの設定

Prettierでは.prettierrcというファイルに独自のフォーマットルールを記載することができます。

.prettierrcファイルをプロジェクトのトップに作成します。

touch .prettierrc

下記の様なPrettierでのルールを設定しておきましょう。

// .prettierrc
{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 80,
  "trailingComma": "all",
  "singleQuote": trueP
  "jsxSingleQuote": true,
  "bracketSpacing": true
}

細かなルールについてはこちらを閲覧して、設定して下さい。

PrettierとESLintの共有設定

実はESLintにもフォーマットの機能があります。しかし、一般的にリンターではESLint、フォーマットではPrettierを使います。これらがバッティングしないようにeslintrc.jsonファイルに下記を追加します。

// .eslintrc.json
{
  "extends": [
    "next/core-web-vitals",
    // 追記
    "prettier",
  ],
}

vscodeの設定

vscodeでもESLintと同様に、リアルタイムでPrettierを実行することが可能です。

vscodeで下記の拡張機能をインストールします。
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

プロジェクトのルートに.vscodeディレクトリとsetting.jsonというvscodeでの設定ファイルを作成します。

mkdir .vscode
touch .vscode/setting.json

setting.jsonの中に下記を記載し、prettierがデフォルトのフォーマッターになるように設定します。すると、ファイルを保存した時に自動でPrettierが実行されてソースコードがフォーマットされる様になります。

// .vscode/setting.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  "eslint.alwaysShowStatus": true,
}

基本vscodeは自動で保存する設定にしておくのが良いため、vscodeのAutoSave(ファイルの自動保存)欄はONにしておきましょう。

{
    "files.autoSave": "onFocusChange"
}

まとめ

今回はNext.jsでのESLintとprettierの環境構築を行いました。
開発においてフォーマッターとリンターの設定はソースコードの品質を維持するために必須なため、プロジェクトの環境構築の時点で入念に設定しておきたいです。

次回

次回以降は下記について紹介します。

  • UIフレームワークであるtailwind導入時の設定
  • コンポーネントの動作・UI確認をブラウザ上で行えるStorybookの設定
  • よりソースコードの品質を高めることができるhusky・lint-stageの設定
  • テストライブラリの設定
  • Next.jsのDocker化の設定

宣伝

弊社では、インフラ学習サイトEnvader（エンベーダー）とITスクール（RareTECH）を運営しています。また、企業研修やシステム開発なども行っていますので興味がある方はHPよりご連絡下さい。

https://envader.plus

https://raretech.site

https://var.co.jp

GitHubで編集を提案

Discussion