Prettier、TypeScript、Vue.js、VSCode 自動保存オートフォーマットを使用した ESLint のセットアップ

このガイドでは、ESLint 9.13.0、Prettier、TypeScript を使用して Vue.js プロジェクトを構成し、Visual Studio Code での保存時に自動コード フォーマットとリンティングを有効にする方法について説明します。

1. 新しい Vue プロジェクトを作成する

新しい Vue プロジェクトを作成することから始めます:

npm create vue@latest

プロジェクト ディレクトリに移動します:

cd your-project-directory

2. 依存関係のインストールと更新

プロジェクトの依存関係をインストールします:

npm install

次に、ncu (Node Check Updates) を使用してプロジェクトの依存関係を更新します。

npx ncu -u
npm install

3. 前提条件 ESLint、Prettier、TypeScript パッケージの追加

この構成では、次の NPM パッケージをローカルまたはグローバルにインストールする必要があります:

prettier
eslint prettier-eslint
@typescript-eslint/parser
typescript 
vue-eslint-parser
@vue/eslint-config-typescript 
@vue/eslint-config-prettier

pnpm または npm を使用して、必要な開発依存関係をインストールします。

pnpm install -D prettier eslint prettier-eslint @typescript-eslint/parser typescript vue-eslint-parser @vue/eslint-config-typescript @vue/eslint-config-prettier

4. ESLint 構成の初期化

次のコマンドを実行して、ESLint 構成をセットアップします。

npm init @eslint/config@latest

プロンプトが表示されたら、次の選択を行って ESLint を構成します。

• ESLint をどのように使用しますか?: 構文をチェックし、問題を見つけるためです。
• プロジェクトではどのようなタイプのモジュールが使用されますか?: CommonJS (必須/エクスポート)。
• プロジェクトはどのフレームワークを使用しますか?: Vue.js.
• プロジェクトでは TypeScript を使用していますか?: はい。
• コードはどこで実行されますか?: ブラウザ
• 依存関係 (eslint、globals、@eslint/js、@typescript-eslint、eslint-plugin-vue) をインストールするかどうかを尋ねられたら、はい を選択し、npm をパッケージマネージャーとして使用します。

5. ESLint フラット構成の追加

ESLint が新しい Flat Config 形式で動作することを確認するには、eslint.config.mjs ファイルに必要な設定を必ず含めてください。この調整は、特定の設定によって異なる場合があります。

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginVue from 'eslint-plugin-vue';
import prettier from 'eslint-plugin-prettier/recommended';
import vueConfigTypescript from '@vue/eslint-config-typescript';
import vueConfigPrettier from '@vue/eslint-config-prettier';

/** @type {import('eslint').Linter.Config[]} */
export default [
  {
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node,
      },
    },
  },
  // js
  pluginJs.configs.recommended,
  {
    rules: {
      'no-unused-vars': 'off',
      'no-undef': 'off',
    },
  },
  // ts
  ...tseslint.configs.recommended,
  {
    rules: {
      '@typescript-eslint/no-unused-vars': 'warn',
      '@typescript-eslint/no-explicit-any': 'warn',
    },
  },
  // vue
  ...pluginVue.configs['flat/recommended'],
  {
    files: ['*.vue', '**/*.vue'],
    languageOptions: {
      parserOptions: {
        parser: tseslint.parser,
      },
    },
  },
  {
    rules: {
      ...vueConfigTypescript.rules,
      ...vueConfigPrettier.rules,
      'prettier/prettier': [
        'warn',
        {
          singleQuote: true,
        },
      ],
      'vue/multi-word-component-names': 'off',
      'vue/attribute-hyphenation': 'off',
      'vue/no-v-html': 'off',
      'vue/v-on-event-hyphenation': 'off',
      '@typescript-eslint/ban-ts-comment': 'off',
      '@typescript-eslint/no-require-imports': 'off',
      '@typescript-eslint/no-explicit-any': 'off',
    },
  },
  {
    ignores: ['node_modules', '.nuxt', '.output', 'dist'],
  },
  // prettier
  prettier,
  {
    rules: {
      'prettier/prettier': ['warn', { singleQuote: true }],
    },
  },
];

6. Prettier-ESLint 統合用の VSCode 拡張機能をインストールする

Prettier と ESLint を使用して保存時の自動フォーマットを有効にするには、次の Visual Studio Code 拡張機能をインストールします。

• Prettier ESLint: ここからダウンロード

7. 拡張機能の推奨事項を追加する

プロジェクトに拡張機能を推奨するには、それを .vscode/extensions.json ファイルに追加します。

{
  "recommendations": [
    "rvest.vs-code-prettier-eslint"
  ]
}

8.VSCodeを再起動します

プロジェクトを構成して拡張機能をインストールした後、Visual Studio Code を再起動して、自動保存と自動フォーマットが期待どおりに動作することを確認します。

まとめ

プロジェクトは次のように設定されるはずです:

• TypeScript と Vue.js をサポートする ESLint 9.13.0
• 一貫したコード形式のためのより適切な統合
• Prettier ESLint 拡張機能を使用した VSCode での保存時の自動フォーマット

以上がPrettier、TypeScript、Vue.js、VSCode 自動保存オートフォーマットを使用した ESLint のセットアップの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。