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

Next.js のTypeScriptプロジェクトへeslint、stylelint、prittierを導入してVSCodeで自動フォーマットするまでの手順をメモしました。
ESLint
ESLintとは?
ESLint は JavaScript ののコード静的検証ツールです。
コードを実行する前にバグを見つけたり、括弧やスペースの使い方などのコードのスタイルやフォーマットを統一したりするのに役立ちます。
公式サイト
Find and fix problems in your JavaScript code - ESLint - Pluggable JavaScript Linter
stylelint
stylelintとは?
style は css の静的検証ツールです。
コードを実行する前に明らかなバグを見つけたり、括弧やスペースの使い方などのコードのスタイルやフォーマットを統一したりするのに役立ちます。
公式サイト
Prettier
Prettierとは?
コードを整形してくれるフォーマッタです。
eslintやstylelintはコードの検証がメインの機能であるのに対してPrettierの機能はコードのフォーマットになります。
公式サイト
Prettier · Opinionated Code Formatter
環境
- 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
パッケージのインストール
プロジェクトディレクトリへ移動
前回作成したプロジェクトのディレクトリへ移動します。
zshcd ~/next-sample
EsLint stylelint Prettierをまとめてインストール
yarn install
コマンドでEsLint stylelint Prettierをまとめてインストールします。
zsh$ 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
を開きインストールされたパッケージを確認します。
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
を作成します。
zsh$ vi .eslintrc.js
ESLintの設定例
javascript// .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/recommended
、prettier/@typescript-eslint
の指定は
ESLintのルールより優先させるため下へ記載します。
stylelint
.stylelintrc.jsの作成
プロジェクトルートへ.stylelintrc.js
を作成します。
zsh$ vi .stylelintrc.js
stylelintの設定例
javascript// .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
を作成します。
zsh$ vi .prettierrc.js
prettierの設定例
javascript// .stylelintrc.js
module.exports = {
trailingComma: "es5",
tabWidth: 2,
semi: true,
singleQuote: true,
};
npm scriptsの設定
npm scriptsで実行できるようにpackage.jsonへ設定を記述します。
package.jsonへ追記
package.jsonへ追記します。
zsh$ vi package.json
package.jsonの設定例
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
json// setting.json
"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による下記のエラーが発生しました。
consoleUnknown rule no-invalid-position-at-import-rule.stylelint(no-invalid-position-at-import-rule)
Unknown rule no-irregular-whitespace.stylelint(no-irregular-whitespace)
プラグインをアンインストールして解決
hex-ci.stylelint-plus
というプラグインが原因でエラーが発生していました。
stylelintのプラグインはvscode-stylelintをインストールしているためhex-ci.stylelint-plus
をアンインストールする形で解決しました。
- article
Remix と Next.js/Vite/徹底比較:選ぶべきポイントはここだ!
- article
【実測検証】Remix vs Next.js vs Astro:TTFB/LCP/開発体験を総合比較
- article
Next.js で「Dynamic server usage: cookies/headers」はなぜ起きる?原因と解決手順
- article
Zustand × Next.js の Hydration Mismatch を根絶する:原因別チェックリスト
- article
Next.js の Parallel Routes & Intercepting Routes を図解で理解する最新入門
- article
Convex × React/Next.js 最速連携:useQuery/useMutation の実践パターン
- article
Mermaid を VS Code で快適に:拡張機能・ライブプレビュー・ショートカット設定
- article
VSCode 拡張との比較でわかる!Cursor を選ぶべき開発スタイル
- article
Cline × VSCode:最強の AI ペアプログラミング環境構築
- article
GitHub Copilot の設定大全:VS Code で精度を最大化する最適化手順
- article
Copilot×Cursorでプラグインがぶつかる!VSCode拡張競合エラーの見分け方と対策集
- article
VSCode で快適に使う ESLint 拡張機能ガイド
- article
TypeScript ランタイム検証ライブラリ比較:Zod / Valibot / typia / io-ts の選び方
- article
【解決策】TypeScript TS2307「Cannot find module…」が出る本当の原因と最短復旧手順
- article
Astro × TypeScript:型安全な静的サイト開発入門
- article
Pinia × TypeScript:型安全なストア設計入門
- article
TypeScript で実現するクリーンアーキテクチャ:層分離と依存性逆転の実践
- article
TypeScript × GitHub Copilot:型情報を活かした高精度コーディング
- article
Emotion vs styled-components vs Stitches 徹底比較:DX/SSR/パフォーマンス実測
- article
Tauri 性能検証レポート:起動時間・メモリ・ディスクサイズを主要 OS で実測
- article
Electron vs Tauri vs Flutter Desktop:サイズ/速度/互換を実測比較
- article
shadcn/ui と Headless UI/Vanilla Radix を徹底比較:実装量・a11y・可読性の差
- article
Docker vs Podman vs nerdctl 徹底比較:CLI 互換性・rootless・企業導入の勘所
- article
Remix と Next.js/Vite/徹底比較:選ぶべきポイントはここだ!
- blog
iPhone 17シリーズの発表!全モデルiPhone 16から進化したポイントを見やすく整理
- blog
Googleストアから訂正案内!Pixel 10ポイント有効期限「1年」表示は誤りだった
- blog
【2025年8月】Googleストア「ストアポイント」は1年表記はミス?2年ルールとの整合性を検証
- blog
Googleストアの注文キャンセルはなぜ起きる?Pixel 10購入前に知るべき注意点
- blog
Pixcel 10シリーズの発表!全モデル Pixcel 9 から進化したポイントを見やすく整理
- blog
フロントエンドエンジニアの成長戦略:コーチングで最速スキルアップする方法
- review
今の自分に満足していますか?『持たざる者の逆襲 まだ何者でもない君へ』溝口勇児
- review
ついに語られた業界の裏側!『フジテレビの正体』堀江貴文が描くテレビ局の本当の姿
- review
愛する勇気を持てば人生が変わる!『幸せになる勇気』岸見一郎・古賀史健のアドラー実践編で真の幸福を手に入れる
- review
週末を変えれば年収も変わる!『世界の一流は「休日」に何をしているのか』越川慎司の一流週末メソッド
- review
新しい自分に会いに行こう!『自分の変え方』村岡大樹の認知科学コーチングで人生リセット
- review
科学革命から AI 時代へ!『サピエンス全史 下巻』ユヴァル・ノア・ハラリが予見する人類の未来