Nuxt プロジェクトを新規に立ち上げる際、開発環境の整備は避けて通れません。特に TypeScript、ESLint、Prettier といったツールを適切に設定することで、コード品質の向上や開発効率の大幅な改善が期待できます。

しかし、これらを一つひとつ設定していくのは意外と手間がかかり、設定ミスや競合問題に悩まされることも少なくありません。本記事では、macOS 環境で yarn を使い、Nuxt プロジェクトの作成から TypeScript、ESLint、Prettier の設定までを最短ルートで完了させる手順を解説します。

初心者の方でも迷わず進められるよう、各ステップを丁寧に説明していきますので、ぜひ最後までお読みください。

Nuxt プロジェクトの基本構築

まずは Nuxt プロジェクトを作成し、基本的な環境を整えましょう。このセクションでは、macOS での事前確認から、プロジェクトの作成、構造の理解までを順を追って進めていきます。

macOS 環境の事前確認

プロジェクトを作成する前に、開発に必要なツールが正しくインストールされているか確認します。以下のコマンドでバージョンを確認してください。

bashCopy code# Node.js のバージョン確認
node -v

Node.js のバージョンは 18.x 以上 を推奨します。バージョンが古い場合は、公式サイトから最新版をインストールしましょう。

bashCopy code# yarn のバージョン確認
yarn -v

yarn がインストールされていない場合は、以下のコマンドでインストールできます。

bashCopy code# yarn のインストール
npm install -g yarn

インストール後、再度 yarn -v でバージョンが表示されることを確認してください。これで事前準備は完了です。

yarn で Nuxt プロジェクト作成

それでは、yarn を使って Nuxt プロジェクトを作成していきます。Nuxt 3 では nuxi コマンドを使用するのが標準的です。

bashCopy code# Nuxt プロジェクトの作成
yarn create nuxt-app my-nuxt-project

上記コマンドを実行すると、対話形式でいくつかの質問が表示されます。以下は推奨設定の一例です。

#	質問項目	推奨設定	理由
1	Project name	my-nuxt-project	プロジェクト名（任意）
2	Programming language	TypeScript	型安全性の確保
3	Package manager	Yarn	本記事の方針に合わせる
4	UI framework	None（または任意）	後から追加可能
5	Nuxt.js modules	必要に応じて選択	Axios など
6	Linting tools	ESLint, Prettier	コード品質向上
7	Testing framework	None（または任意）	後から追加可能
8	Rendering mode	Universal (SSR / SSG)	SEO 対応
9	Deployment target	Server (Node.js hosting)	一般的な選択

設定が完了すると、自動的にプロジェクトのセットアップが始まります。

bashCopy code# プロジェクトディレクトリへ移動
cd my-nuxt-project

ここで一度、開発サーバーを起動してみましょう。

bashCopy code# 開発サーバーの起動
yarn dev

ブラウザで http:​/​​/​localhost:3000 にアクセスし、Nuxt のウェルカム画面が表示されれば成功です。

以下の図は、プロジェクト作成からサーバー起動までの基本フローを示しています。

mermaidCopy codeflowchart TD
  start["開始"] --> check["環境確認<br/>(Node.js, yarn)"]
  check --> create["yarn create nuxt-app"]
  create --> config["対話形式で設定"]
  config --> install["依存パッケージ<br/>自動インストール"]
  install --> move["cd my-nuxt-project"]
  move --> dev["yarn dev"]
  dev --> browser["ブラウザで<br/>localhost:3000 確認"]
  browser --> done["セットアップ完了"]

図で理解できる要点

• 環境確認 → プロジェクト作成 → 開発サーバー起動という流れが明確
• 各ステップが順番に進むため、迷わず進められる
• ブラウザ確認で初期構築の成功を視覚的に確認できる

プロジェクト構造の理解

作成されたプロジェクトのディレクトリ構造を把握しておくと、今後の作業がスムーズになります。

bashCopy code# プロジェクト構造の確認
ls -la

主要なディレクトリとファイルは以下の通りです。

#	ディレクトリ/ファイル	役割
1	.nuxt​/​	ビルド時に自動生成される（Git 管理対象外）
2	assets​/​	CSS、画像など静的リソース
3	components​/​	Vue コンポーネント
4	layouts​/​	ページレイアウト
5	pages​/​	ルーティング対応ページ
6	plugins​/​	Vue プラグイン
7	static​/​	静的ファイル（ルートパスで配信）
8	store​/​	Vuex ストア
9	nuxt.config.ts	Nuxt の設定ファイル
10	tsconfig.json	TypeScript の設定ファイル
11	package.json	npm パッケージ情報

特に nuxt.config.ts は、Nuxt の挙動をカスタマイズする重要なファイルです。後ほど ESLint や Prettier の設定でもこのファイルを編集します。

これで基本的なプロジェクト構築は完了しました。次のセクションでは、TypeScript の詳細設定に進みます。

TypeScript 設定の導入

Nuxt プロジェクトで TypeScript を使用することで、型チェックによるバグの早期発見や、IDE の強力な補完機能が利用できます。このセクションでは、TypeScript の初期設定からカスタマイズまでを解説します。

TypeScript の初期設定

yarn create nuxt-app で TypeScript を選択した場合、基本的な設定はすでに完了していますが、追加で必要なパッケージを確認しましょう。

bashCopy code# TypeScript 関連パッケージの確認
yarn list --pattern "@nuxt/typescript-build"

もし不足している場合は、以下のコマンドで追加インストールします。

bashCopy code# TypeScript ビルドモジュールの追加
yarn add -D @nuxt/typescript-build @nuxt/types

次に、TypeScript ランタイムサポートを有効化します。

bashCopy code# TypeScript ランタイムモジュールの追加
yarn add -D @nuxt/typescript-runtime

これらのパッケージにより、Nuxt プロジェクト全体で TypeScript が使えるようになります。

tsconfig.json のカスタマイズ

tsconfig.json は TypeScript の動作を制御する設定ファイルです。プロジェクトルートに自動生成されていますが、より厳密な型チェックを行うためにカスタマイズしましょう。

jsonCopy code{
  "compilerOptions": {
    "target": "ES2020",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "baseUrl": ".",
    "paths": {
      "~/*": ["./*"],
      "@/*": ["./*"]
    },

上記の compilerOptions では、ES2020 をターゲットとし、モダンな JavaScript 構文をサポートします。

jsonCopy code    "types": ["@nuxt/types", "@types/node"],
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "resolveJsonModule": true,
    "isolatedModules": true
  },

types には Nuxt 固有の型定義を指定します。これにより、$config や $axios などの Nuxt オブジェクトが型推論されるようになります。

jsonCopy code  "include": [
    "**/*.ts",
    "**/*.tsx",
    "**/*.vue"
  ],
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ]
}

include には型チェック対象のファイルパターンを、exclude には除外するディレクトリを指定します。

設定のポイント

• strict: true で厳格な型チェックを有効化
• paths でエイリアス（@​/​ や ~​/​）を設定し、インポート時のパス記述を簡潔に
• .vue ファイルも型チェック対象に含める

型定義ファイルの配置

Vue の単一ファイルコンポーネント（.vue ファイル）を TypeScript で認識させるため、型定義ファイルを追加します。

bashCopy code# types ディレクトリの作成
mkdir types

types​/​vue-shim.d.ts ファイルを作成し、以下の内容を記述します。

typescriptCopy code// types/vue-shim.d.ts
// Vue ファイルを TypeScript モジュールとして認識させる
declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}

この型定義により、.vue ファイルのインポート時に TypeScript のエラーが出なくなります。

さらに、Nuxt 固有のグローバル型を拡張したい場合は、以下のファイルも追加できます。

typescriptCopy code// types/nuxt.d.ts
// Nuxt のコンテキスト型を拡張する例
import { Context } from '@nuxt/types';

declare module '@nuxt/types' {
  interface Context {
    // カスタムプロパティの型定義
    $customHelper: () => string;
  }
}

型定義ファイルの配置により、開発中の型エラーが大幅に減り、IDE の補完機能もフル活用できるようになります。

以下の図は、TypeScript 設定の全体像を表しています。

mermaidCopy codeflowchart LR
  packages["TypeScript<br/>パッケージ"] --> tsconfig["tsconfig.json<br/>設定"]
  tsconfig --> types["型定義ファイル<br/>(vue-shim.d.ts)"]
  types --> ide["IDE の<br/>型推論・補完"]
  ide --> dev["開発効率<br/>向上"]

図で理解できる要点

• パッケージ → 設定 → 型定義ファイルという段階的なセットアップ
• 最終的に IDE の補完機能が強化され、開発効率が向上する
• 各ステップが連携して TypeScript 環境を構築

これで TypeScript の基本設定は完了です。次は ESLint の設定に進みましょう。

ESLint の設定と統合

ESLint はコードの静的解析ツールで、潜在的なバグや不適切なコーディングスタイルを自動検出してくれます。Nuxt プロジェクトに ESLint を導入することで、チーム開発でもコード品質を一定に保てます。

ESLint のインストール

まず、ESLint 本体と Nuxt 用の設定パッケージをインストールします。

bashCopy code# ESLint 本体のインストール
yarn add -D eslint

次に、Nuxt 専用の ESLint プラグインと推奨設定をインストールします。

bashCopy code# Nuxt 用 ESLint 設定のインストール
yarn add -D @nuxtjs/eslint-config @nuxtjs/eslint-module

これらのパッケージにより、Nuxt のファイル構造やルールに最適化された ESLint 設定が利用できます。

Nuxt 専用 ESLint 設定

ESLint の設定ファイル .eslintrc.js をプロジェクトルートに作成します。

javascriptCopy code// .eslintrc.js
// ESLint のルートレベル設定
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },

root: true により、親ディレクトリの設定を無視し、このファイルを最上位の設定として扱います。

javascriptCopy code  // パーサーの設定
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
  },

TypeScript のコードを解析するため、@typescript-eslint​/​parser をパーサーとして指定します。

javascriptCopy code  // 基本となる推奨設定を継承
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended',
    'prettier',
  ],

@nuxtjs で Nuxt 推奨ルールを、plugin:nuxt​/​recommended で Nuxt 固有のルールを適用します。prettier は後ほど説明する Prettier との統合に必要です。

javascriptCopy code  // プラグインの指定
  plugins: [
    'nuxt',
  ],

Nuxt 固有のルールを提供するプラグインを有効化します。

javascriptCopy code  // カスタムルールの定義
  rules: {
    // コンソールログの警告レベルを設定
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
  },
}

開発環境では警告、本番環境ではエラーとして扱うよう条件分岐しています。

TypeScript との連携設定

TypeScript を使用する場合、TypeScript 専用の ESLint プラグインを追加します。

bashCopy code# TypeScript 用 ESLint プラグインのインストール
yarn add -D @typescript-eslint/eslint-plugin @typescript-eslint/parser

.eslintrc.js を更新し、TypeScript ルールを追加します。

javascriptCopy code// .eslintrc.js (TypeScript 対応版)
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
  },
  extends: [
    '@nuxtjs',
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
    'prettier',
  ],

@nuxtjs​/​eslint-config-typescript を追加することで、TypeScript 用のルールセットが適用されます。

javascriptCopy code  plugins: [
    'nuxt',
    '@typescript-eslint',
  ],
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'warn',
    '@typescript-eslint/no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
  },
}

@typescript-eslint​/​no-unused-vars ルールで、未使用変数をエラーとして検出します。アンダースコア始まりの変数は除外しています。

ルールのカスタマイズ

プロジェクトの要件に応じて、ESLint ルールをカスタマイズできます。以下は実用的なカスタマイズ例です。

javascriptCopy code// .eslintrc.js (ルールカスタマイズ例)
module.exports = {
  // ...省略...
  rules: {
    // console は警告のみ
    'no-console': 'warn',

    // 未使用変数はエラー（_ で始まる変数は除外）
    '@typescript-eslint/no-unused-vars': [
      'error',
      {
        argsIgnorePattern: '^_',
        varsIgnorePattern: '^_',
      },
    ],

    // any 型の使用を警告
    '@typescript-eslint/no-explicit-any': 'warn',

    // セミコロンは不要
    semi: ['error', 'never'],

    // シングルクォートを推奨
    quotes: ['error', 'single'],

    // trailing comma を推奨
    'comma-dangle': ['error', 'always-multiline'],
  },
};

これらのルールは、チームのコーディング規約に合わせて調整してください。

ESLint が正しく動作するか確認しましょう。

bashCopy code# ESLint の実行
yarn eslint . --ext .js,.vue,.ts

エラーや警告が表示されれば、ESLint が正常に動作しています。自動修正可能な問題は --fix オプションで一括修正できます。

bashCopy code# 自動修正の実行
yarn eslint . --ext .js,.vue,.ts --fix

package.json にスクリプトを追加しておくと便利です。

jsonCopy code{
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "lint": "eslint . --ext .js,.vue,.ts",
    "lint:fix": "eslint . --ext .js,.vue,.ts --fix"
  }
}

これで yarn lint で ESLint を、yarn lint:fix で自動修正を実行できます。

以下の図は、ESLint の設定と実行フローを示しています。

mermaidCopy codeflowchart TD
  install["ESLint<br/>パッケージインストール"] --> config["eslintrc.js<br/>設定ファイル作成"]
  config --> rules["ルール定義<br/>(Nuxt + TypeScript)"]
  rules --> run["yarn lint<br/>実行"]
  run --> check{エラー<br/>検出?}
  check -->|あり| fix["yarn lint:fix<br/>自動修正"]
  check -->|なし| done["チェック完了"]
  fix --> manual{手動修正<br/>必要?}
  manual -->|あり| code["コード修正"]
  manual -->|なし| done
  code --> run

図で理解できる要点

• インストール → 設定 → 実行 → 修正という循環フロー
• 自動修正と手動修正の判断ポイントが明確
• エラーがなくなるまで繰り返し実行する流れ

次のセクションでは、Prettier を導入し、ESLint と統合していきます。

Prettier の設定と統合

Prettier はコードフォーマッターで、一貫したコードスタイルを自動的に適用してくれます。ESLint と併用することで、コード品質とフォーマットの両方を管理できます。

Prettier のインストール

まず、Prettier 本体と関連パッケージをインストールします。

bashCopy code# Prettier のインストール
yarn add -D prettier

次に、ESLint と Prettier の競合を防ぐためのプラグインをインストールします。

bashCopy code# ESLint と Prettier の統合プラグイン
yarn add -D eslint-config-prettier eslint-plugin-prettier

eslint-config-prettier は ESLint のフォーマット関連ルールを無効化し、eslint-plugin-prettier は Prettier を ESLint のルールとして実行します。

フォーマットルールの定義

プロジェクトルートに .prettierrc ファイルを作成し、フォーマットルールを定義します。

jsonCopy code{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "useTabs": false,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "always",

主要な設定項目の意味は以下の通りです。

#	設定項目	値	説明
1	semi	false	セミコロンを付けない
2	singleQuote	true	シングルクォートを使用
3	tabWidth	2	インデント幅は 2 スペース
4	useTabs	false	タブではなくスペースを使用
5	trailingComma	es5	ES5 互換の箇所に trailing comma
6	printWidth	100	1 行の最大文字数
7	arrowParens	always	アロー関数の引数を常に括弧で囲む

jsonCopy code  "endOfLine": "lf",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "vueIndentScriptAndStyle": false
}

vueIndentScriptAndStyle: false により、Vue ファイルの <script> と <style> タグ内のインデントをネストしません。

次に、フォーマット対象外のファイルを指定する .prettierignore ファイルを作成します。

csharpCopy code# .prettierignore
# 自動生成されるファイル
.nuxt
dist
node_modules

# その他除外ファイル
.git
.vscode
coverage
*.lock

これで不要なファイルがフォーマット対象から除外されます。

ESLint との競合解決

Prettier を ESLint と統合するため、.eslintrc.js を更新します。

javascriptCopy code// .eslintrc.js (Prettier 統合版)
module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
  },

ここまでは前セクションと同じです。

javascriptCopy code  extends: [
    '@nuxtjs',
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
    'plugin:prettier/recommended',
    'prettier',
  ],

plugin:prettier​/​recommended と prettier を extends の 最後 に追加することで、Prettier のルールが優先されます。

javascriptCopy code  plugins: [
    'nuxt',
    '@typescript-eslint',
    'prettier',
  ],
  rules: {
    'no-console': 'warn',
    '@typescript-eslint/no-unused-vars': ['error', {
      argsIgnorePattern: '^_',
      varsIgnorePattern: '^_',
    }],
    'prettier/prettier': 'error',
  },
}

'prettier​/​prettier': 'error' により、Prettier のフォーマットルール違反を ESLint のエラーとして検出します。

エディタ連携設定

VSCode を使用している場合、保存時に自動フォーマットする設定を追加すると便利です。.vscode​/​settings.json を作成します。

bashCopy code# .vscode ディレクトリの作成
mkdir .vscode

jsonCopy code{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },

formatOnSave: true で保存時に自動フォーマット、source.fixAll.eslint: true で ESLint の自動修正が実行されます。

jsonCopy code  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

各言語に対して Prettier をデフォルトフォーマッターとして指定します。

Prettier が正しく動作するか確認しましょう。

bashCopy code# Prettier の実行
yarn prettier --check "**/*.{js,ts,vue,json}"

フォーマットが必要なファイルがあれば表示されます。実際にフォーマットを適用するには --write オプションを使います。

bashCopy code# フォーマットの適用
yarn prettier --write "**/*.{js,ts,vue,json}"

package.json にスクリプトを追加しておきましょう。

jsonCopy code{
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "lint": "eslint . --ext .js,.vue,.ts",
    "lint:fix": "eslint . --ext .js,.vue,.ts --fix",
    "format": "prettier --write \"**/*.{js,ts,vue,json}\"",
    "format:check": "prettier --check \"**/*.{js,ts,vue,json}\""
  }
}

これで yarn format でフォーマットを、yarn format:check でフォーマットのチェックを実行できます。

以下の図は、ESLint と Prettier の統合関係を示しています。

mermaidCopy codeflowchart LR
  code["ソースコード"] --> eslint["ESLint<br/>(構文チェック)"]
  code --> prettier["Prettier<br/>(フォーマット)"]
  eslint --> plugin["eslint-plugin-prettier"]
  prettier --> plugin
  plugin --> result["統合結果<br/>(構文 + フォーマット)"]
  result --> output["整形された<br/>コード"]

図で理解できる要点

• ESLint と Prettier が独立して動作しつつ、プラグインで統合される
• 構文チェックとフォーマットが一度に適用される
• 最終的に品質とスタイルの両方が保証されたコードが出力される

これで Prettier の設定と ESLint との統合が完了しました。次は全体の動作確認に進みます。

統合確認とトラブルシューティング

ここまでで TypeScript、ESLint、Prettier の設定が完了しました。このセクションでは、すべてが正しく連携しているか確認し、よくあるエラーへの対処法を解説します。

動作確認の手順

まず、すべてのツールが正常に動作するか、段階的に確認していきます。

bashCopy code# 1. TypeScript の型チェック
yarn nuxt typecheck

TypeScript の型エラーがないか確認します。エラーが表示された場合は、該当箇所を修正してください。

bashCopy code# 2. ESLint による構文チェック
yarn lint

ESLint のルール違反がないか確認します。警告やエラーが表示された場合は、以下のコマンドで自動修正を試みます。

bashCopy code# 3. ESLint の自動修正
yarn lint:fix

自動修正できない問題は手動で対応する必要があります。

bashCopy code# 4. Prettier によるフォーマットチェック
yarn format:check

フォーマットが適用されていないファイルがあれば表示されます。

bashCopy code# 5. Prettier によるフォーマット適用
yarn format

すべてのファイルに一貫したフォーマットが適用されます。

bashCopy code# 6. 開発サーバーの起動確認
yarn dev

最後に、開発サーバーが正常に起動し、ブラウザで表示できることを確認します。http:​/​​/​localhost:3000 にアクセスして、エラーが出ていないかチェックしてください。

以下の表は、各ツールの確認ポイントをまとめたものです。

#	ツール	コマンド	確認内容	期待結果
1	TypeScript	yarn nuxt typecheck	型エラー	エラーなし
2	ESLint	yarn lint	構文・ルール違反	警告・エラーなし
3	Prettier	yarn format	フォーマット	フォーマット済み
4	Nuxt	yarn dev	サーバー起動	正常起動

よくあるエラーと解決法

環境構築中によく遭遇するエラーと、その解決方法を紹介します。

エラー 1: Cannot find module '@nuxt​/​types'

エラーコード: Error: Cannot find module '@nuxt​/​types'

bashCopy code# エラーメッセージ例
Cannot find module '@nuxt/types'

発生条件: TypeScript の型定義パッケージが不足している

解決方法:

1. 必要なパッケージをインストールする

bashCopy codeyarn add -D @nuxt/types @nuxt/typescript-build

2. tsconfig.json の types に追加されているか確認

jsonCopy code{
  "compilerOptions": {
    "types": ["@nuxt/types", "@types/node"]
  }
}

3. エディタを再起動する

エラー 2: Parsing error: Cannot read file 'tsconfig.json'

エラーコード: ESLint: Parsing error: Cannot read file 'tsconfig.json'

bashCopy code# エラーメッセージ例
Parsing error: Cannot read file 'tsconfig.json'

発生条件: ESLint が TypeScript の設定ファイルを見つけられない

解決方法:

1. .eslintrc.js に parserOptions.project を追加

javascriptCopy codemodule.exports = {
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    project: './tsconfig.json',
  },
  // ...省略...
};

2. プロジェクトルートに tsconfig.json が存在するか確認

bashCopy codels -la tsconfig.json

エラー 3: ESLint と Prettier のルールが競合する

エラーコード: Error: Delete '␍' (prettier​/​prettier)

bashCopy code# エラーメッセージ例
Error: Delete '␍' (prettier/prettier)
Error: Replace '··' with '····' (prettier/prettier)

発生条件: ESLint のフォーマットルールと Prettier のルールが矛盾している

解決方法:

1. eslint-config-prettier がインストールされているか確認

bashCopy codeyarn add -D eslint-config-prettier

2. .eslintrc.js の extends の 最後 に prettier を配置

javascriptCopy codemodule.exports = {
  extends: [
    '@nuxtjs',
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
    'prettier', // 必ず最後に配置
  ],
};

3. キャッシュをクリアして再実行

bashCopy codeyarn eslint . --ext .js,.vue,.ts --fix --cache --cache-location node_modules/.cache/eslint

エラー 4: Unexpected token in .vue files

エラーコード: TypeError: Unexpected token <

bashCopy code# エラーメッセージ例
TypeError: Unexpected token <

発生条件: ESLint が Vue ファイルの構文を解析できない

解決方法:

1. Vue 用パーサーをインストール

bashCopy codeyarn add -D vue-eslint-parser

2. .eslintrc.js の parser を更新

javascriptCopy codemodule.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  // ...省略...
};

開発フローの最適化

日常的な開発をスムーズにするため、以下のような工夫を取り入れましょう。

Git フックの活用

コミット前に自動的にリントとフォーマットを実行する husky と lint-staged を導入します。

bashCopy code# husky と lint-staged のインストール
yarn add -D husky lint-staged

bashCopy code# husky の初期化
npx husky install

package.json に以下を追加します。

jsonCopy code{
  "scripts": {
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,ts,vue}": ["eslint --fix", "prettier --write"],
    "*.{json,md}": ["prettier --write"]
  }
}

pre-commit フックを追加します。

bashCopy code# pre-commit フックの作成
npx husky add .husky/pre-commit "npx lint-staged"

これで、git commit 時に自動的にリントとフォーマットが実行されます。

CI/CD での自動チェック

GitHub Actions などの CI/CD 環境でも、リントとフォーマットのチェックを自動化できます。.github​/​workflows​/​lint.yml を作成します。

yamlCopy codename: Lint and Format Check

on:
  push:
    branches: [main, develop]
  pull_request:
    branches: [main, develop]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '18'

Node.js 環境をセットアップします。

yamlCopy code- name: Install dependencies
  run: yarn install --frozen-lockfile

- name: Run ESLint
  run: yarn lint

- name: Run Prettier check
  run: yarn format:check

- name: Run TypeScript check
  run: yarn nuxt typecheck

依存パッケージのインストール後、各種チェックを実行します。

以下の図は、開発フローの最適化を示しています。

mermaidCopy codeflowchart TD
  code["コード編集"] --> save["ファイル保存"]
  save --> vscode["VSCode<br/>自動フォーマット"]
  vscode --> commit["git commit"]
  commit --> husky["husky<br/>(pre-commit)"]
  husky --> staged["lint-staged<br/>(ESLint + Prettier)"]
  staged --> check{チェック<br/>通過?}
  check -->|失敗| fix["エラー修正"]
  check -->|成功| push["git push"]
  fix --> commit
  push --> ci["CI/CD<br/>(GitHub Actions)"]
  ci --> deploy["デプロイ"]

図で理解できる要点

• 保存時 → コミット時 → プッシュ時の 3 段階でチェックが入る
• 各段階で自動修正とチェックが行われる
• CI/CD まで含めた完全な品質管理フロー

これで統合確認とトラブルシューティングは完了です。最後にまとめと関連リンクを記載します。

まとめ

本記事では、macOS 環境で yarn を使い、Nuxt プロジェクトの作成から TypeScript、ESLint、Prettier の設定までを一気通貫で解説しました。

重要なポイントをおさらいしましょう。

1. 環境確認の徹底: Node.js と yarn のバージョンを事前に確認することで、インストールエラーを防げます
2. TypeScript の型定義: tsconfig.json のカスタマイズと型定義ファイルの配置により、開発体験が大きく向上します
3. ESLint の適切な設定: Nuxt と TypeScript に最適化されたルールセットを使うことで、効率的にコード品質を保てます
4. Prettier との統合: ESLint と Prettier を正しく統合することで、構文チェックとフォーマットを一度に管理できます
5. 開発フローの自動化: Git フックや CI/CD を活用することで、チーム全体のコード品質を担保できます

これらの設定を最初に整えておくことで、長期的な開発効率が大幅に改善されます。特にチーム開発では、統一されたコーディング規約が開発速度とコード品質の両立に不可欠です。

初めての方は一つひとつのステップを確実に進め、慣れてきたら自分のプロジェクトに合わせてカスタマイズしてみてください。本記事が、皆さんの Nuxt 開発のスタートダッシュに少しでもお役に立てれば幸いです。

関連リンク

• Nuxt 公式サイト
• Nuxt TypeScript サポート
• ESLint 公式ドキュメント
• Prettier 公式ドキュメント
• TypeScript 公式サイト
• @nuxtjs/eslint-config
• yarn 公式サイト
• Vue.js 公式ドキュメント