T-CREATOR

Nuxt を macOS + yarn で最短構築：ESLint／Prettier／TS 設定まで一気通貫

Nuxt を macOS + yarn で最短構築：ESLint／Prettier／TS 設定まで一気通貫

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

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

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

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

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

macOS 環境の事前確認

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

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

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

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

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

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

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

yarn で Nuxt プロジェクト作成

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

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

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

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

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

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

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

bash# 開発サーバーの起動
yarn dev

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

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

mermaidflowchart 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["セットアップ完了"]

図で理解できる要点

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

プロジェクト構造の理解

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

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

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

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

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

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

TypeScript 設定の導入

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

TypeScript の初期設定

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

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

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

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

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

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

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

tsconfig.json のカスタマイズ

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

json{
  "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 構文をサポートします。

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

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

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

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

設定のポイント

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

型定義ファイルの配置

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

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

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

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

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

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

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

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

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

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

mermaidflowchart 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 用の設定パッケージをインストールします。

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

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

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

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

Nuxt 専用 ESLint 設定

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

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

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

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

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

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

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

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

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

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

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

TypeScript との連携設定

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

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

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

javascript// .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 用のルールセットが適用されます。

javascript  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 ルールをカスタマイズできます。以下は実用的なカスタマイズ例です。

javascript// .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 が正しく動作するか確認しましょう。

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

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

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

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

json{
  "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 の設定と実行フローを示しています。

mermaidflowchart 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 本体と関連パッケージをインストールします。

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

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

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

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

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

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

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

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

#設定項目値説明
1semifalseセミコロンを付けない
2singleQuotetrueシングルクォートを使用
3tabWidth2インデント幅は 2 スペース
4useTabsfalseタブではなくスペースを使用
5trailingCommaes5ES5 互換の箇所に trailing comma
6printWidth1001 行の最大文字数
7arrowParensalwaysアロー関数の引数を常に括弧で囲む
json  "endOfLine": "lf",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "vueIndentScriptAndStyle": false
}

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

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

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

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

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

ESLint との競合解決

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

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

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

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

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

javascript  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 を作成します。

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

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

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

json  "[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 が正しく動作するか確認しましょう。

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

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

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

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

json{
  "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 の統合関係を示しています。

mermaidflowchart 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 の設定が完了しました。このセクションでは、すべてが正しく連携しているか確認し、よくあるエラーへの対処法を解説します。

動作確認の手順

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

よくあるエラーと解決法

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

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

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

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

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

解決方法:

  1. 必要なパッケージをインストールする
bashyarn add -D @nuxt/types @nuxt/typescript-build
  1. tsconfig.json の types に追加されているか確認
json{
  "compilerOptions": {
    "types": ["@nuxt/types", "@types/node"]
  }
}
  1. エディタを再起動する

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

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

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

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

解決方法:

  1. .eslintrc.js に parserOptions.project を追加
javascriptmodule.exports = {
  parserOptions: {
    ecmaVersion: 2020,
    sourceType: 'module',
    parser: '@typescript-eslint/parser',
    project: './tsconfig.json',
  },
  // ...省略...
};
  1. プロジェクトルートに tsconfig.json が存在するか確認
bashls -la tsconfig.json

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

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

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

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

解決方法:

  1. eslint-config-prettier がインストールされているか確認
bashyarn add -D eslint-config-prettier
  1. .eslintrc.js の extends の 最後 に prettier を配置
javascriptmodule.exports = {
  extends: [
    '@nuxtjs',
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
    'prettier', // 必ず最後に配置
  ],
};
  1. キャッシュをクリアして再実行
bashyarn eslint . --ext .js,.vue,.ts --fix --cache --cache-location node_modules/.cache/eslint

エラー 4: Unexpected token in .vue files

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

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

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

解決方法:

  1. Vue 用パーサーをインストール
bashyarn add -D vue-eslint-parser
  1. .eslintrc.js の parser を更新
javascriptmodule.exports = {
  parser: 'vue-eslint-parser',
  parserOptions: {
    parser: '@typescript-eslint/parser',
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  // ...省略...
};

開発フローの最適化

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

Git フックの活用

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

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

bash# husky の初期化
npx husky install

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

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

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

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

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

CI/CD での自動チェック

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

yamlname: 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 環境をセットアップします。

yaml- 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

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

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

mermaidflowchart 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

もっと見る

記事Article

もっと見る

ブログBlog

もっと見る

書籍レビューReview

もっと見る