Next.js のTypeScriptプロジェクトへeslint、stylelint、prittierを導入してVSCodeで自動フォーマットするまでの手順

TypeScriptPrettierstylelintインストールCSSESLint
Next.js のTypeScriptプロジェクトへeslint、stylelint、prittierを導入してVSCodeで自動フォーマットするまでの手順
Memo

Next.js のTypeScriptプロジェクトへeslint、stylelint、prittierを導入してVSCodeで自動フォーマットするまでの手順をメモしました。

ESLint

ESLintとは?

ESLint は JavaScript ののコード静的検証ツールです。
コードを実行する前にバグを見つけたり、括弧やスペースの使い方などのコードのスタイルやフォーマットを統一したりするのに役立ちます。

公式サイト

stylelint

stylelintとは?

style は css の静的検証ツールです。
コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのコードのスタイルやフォーマットを統一したりするのに役立ちます。

公式サイト

Prettier

Prettierとは?

コードを整形してくれるフォーマッタです。
eslintやstylelintはコードの検証がメインの機能であるのに対してPrettierの機能はコードのフォーマットになります。

公式サイト

環境

  • Mac OS Big SUR 11.3.1
  • yarn 1.22.10
  • Node.js 14.15.3
  • Next.js 10.2.3
  • ESLint 7.29.0
  • stlelint 13.13
  • prettier 2.3

ファイル操作で利用する Unix コマンドについて

基本的なディレクトリ作成やファイル操作は Unix コマンドを利用します。
Unix コマンドについて詳しくはこちらの記事を参考にしてください。

Next.js 環境の構築

前回Next.jsをインストールした環境の状態から変更を加えて行きます。 前回の記事については下記になりますので事前にご確認いただければと思います。

必要なパッケージのインストール

必要なパッケージ

プラグインやルールは必要に応じてしてください。

ESLint × TypeScript × Prettier 最低限

  • eslint
  • prettier
  • eslint-plugin-prettier
  • eslint-config-prettier
  • @typescript-eslint/parser
  • @typescript-eslint/eslint-plugin

必要に応じて

  • eslint-config-airbnb-typescript
  • eslint-config-next
  • eslint-plugin-react
  • eslint-plugin-react-hooks
  • eslint-plugin-jsx-a11y

stylelint × Prettier 最低限

  • stylelint
  • prettier
  • stylelint-config-prettier
  • stylelint-prettier
  • stylelint-config-recommended

必要に応じて

  • stylelint-config-standard
  • stylelint-config-recess-order

パッケージのインストール

プロジェクトディレクトリへ移動

前回作成したプロジェクトのディレクトリへ移動します。

terminal
cd ~/next-sample

EsLint stylelint Prettierをまとめてインストール

yarn installコマンドでEsLint stylelint Prettierをまとめてインストールします。

terminal
$ yarn add -D eslint prettier eslint-plugin-prettier eslint-config-prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin stylelint stylelint-config-prettier stylelint-prettier stylelint-config-recommended yarn add v1.22.10 // 中略 ✨ Done in 44.10s.

インストールしたパッケージを確認

package.jsonを開きインストールされたパッケージを確認します。

"devDependencies": {
  "@types/node": "^15.12.2",
  "@types/react": "^17.0.11",
  "@typescript-eslint/eslint-plugin": "^4.28.0",
  "@typescript-eslint/parser": "^4.28.0",
  "babel-plugin-styled-components": "^1.12.0",
  "eslint": "^7.29.0",
  "eslint-config-prettier": "^8.3.0",
  "eslint-plugin-prettier": "^3.4.0",
  "prettier": "^2.3.1",
  "stylelint": "^13.13.1",
  "stylelint-config-prettier": "^8.0.2",
  "stylelint-config-recommended": "^5.0.0",
  "stylelint-prettier": "^1.2.0",
  "typescript": "^4.3.2"
}

設定ファイルを作成

ESLint

.eslintrc.jsの作成

プロジェクトルートへ.eslintrc.jsを作成します。

terminal
$ vi .eslintrc.js

ESLintの設定例

eslintrc.js
module.exports = { root: true, env: { browser: true, es6: true, node: true }, parser: "@typescript-eslint/parser", plugins: [ "@typescript-eslint", ], extends: [ "eslint:recommended", "plugin:@typescript-eslint/recommended", "plugin:prettier/recommended", ], settings: {}, rules: {}, };

plugin:prettier/recommendedprettier/@typescript-eslintの指定は
ESLintのルールより優先させるため下へ記載します。

stylelint

.stylelintrc.jsの作成

プロジェクトルートへ.stylelintrc.jsを作成します。

terminal
$ vi .stylelintrc.js

stylelintの設定例

stylelintrc.js
module.exports = { extends: [ "stylelint-config-recommended", "stylelint-prettier/recommended", "stylelint-config-prettier", ], rules: { indentation: 2, "declaration-colon-newline-after": "always-multi-line", "value-list-comma-newline-after": "never-multi-line", }, };

prettier

.prettierrc.jsの作成

プロジェクトルートへ.prettierrc.jsを作成します。

terminal
$ vi .prettierrc.js

prettierの設定例

stylelintrc.js
module.exports = { trailingComma: "es5", tabWidth: 2, semi: true, singleQuote: true, };

npm scriptsの設定

npm scriptsで実行できるようにpackage.jsonへ設定を記述します。

package.jsonへ追記

package.jsonへ追記します。

terminal
$ vi package.json

package.jsonの設定例

package.json
"scripts": { "eslint:fix": "eslint . --ext .js,.ts,.jsx,.tsx --fix", "stylelint:fix": "stylelint . --ext .css,.scss --fix", }

VSCodeの設定

ファイルを保存したタイミングでフォーマットが実行されるように設定します。

拡張機能のインストール

下記の拡張機能をインストールします。

ESLint

stylelint

Prettier

VSCodeの設定の変更

VSCodeの設定を開き下記設定を追加します。

setting.json

setting.sjon
"editor.formatOnSave": true, // ファイル保存時にデフォルトフォーマッタでフォーマット "editor.codeActionsOnSave": { "source.fixAll.eslint": true, // ファイル保存時にESLintでフォーマット "source.fixAll.stylelint": true // ファイル保存時にstylelintでフォーマット }, "editor.defaultFormatter": "esbenp.prettier-vscode" // デフォルトフォーマッタをprettierへ設定

捕捉:VSCodeでstylelintの不明なエラー

VSCode Unknown ruleというstylelintエラー

VSCode上で全てのファイルでstylelintによる下記のエラーが発生しました。

Unknown rule no-invalid-position-at-import-rule.stylelint(no-invalid-position-at-import-rule)
Unknown rule no-irregular-whitespace.stylelint(no-irregular-whitespace)
VSCode Unknown ruleという下記エラーの対応

プラグインをアンインストールして解決

hex-ci.stylelint-plusというプラグインが原因でエラーが発生していました。

VSCode hex-ci.stylelint-plus

stylelintのプラグインはvscode-stylelintをインストールしているためhex-ci.stylelint-plusをアンインストールする形で解決しました。

終わりに

最後までご覧いただきありがとうございます。
この記事ではNext.js のTypeScriptプロジェクトへeslint、stylelint、prittierを導入してVSCodeで自動フォーマットするまでの手順について紹介させていただきました。

これからも皆様の開発に役立つ情報を提供していきたいと考えています。
今後ともよろしくお願いいたします。