Nuxt ESLintの導入

[kaiman2110]

目的

• 開発環境にESLintモジュールを導入する

期待結果

• Lintが有効になっていること
• VSCodeの拡張機能でファイル保存時にフォーマットされること

[kaiman2110]

導入手順

参考：【Nuxt3】簡単！@nuxt/eslintを使ったESLintとフォーマッタの設定 ※2024年版 (参照：2024/11/5)

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

yarn add --dev @nuxt/eslint eslint typescript

2. Nuxtへの設定

• nuxt.config.ts

  export default defineNuxtConfig({
  compatibilityDate: '2024-04-03',
  devtools: { enabled: true },
  modules: ['@nuxt/eslint'],
  });

3. ESLintのルール設定

• eslint.config.mjs

  
  // @ts-nocheck
  import withNuxt from './.nuxt/eslint.config.mjs';
  import stylistic from '@stylistic/eslint-plugin';

export default withNuxt( { files: ['/*.vue', '*/.ts'], rules: { 'no-console': 'error', '@typescript-eslint/no-explicit-any': 'error', }, }, { files: ['/*.vue'], rules: { 'vue/no-multiple-template-root': 'error', 'vue/multi-word-component-names': 'error', 'vue/require-v-for-key': 'error', 'vue/no-use-v-if-with-v-for': 'error', }, }, stylistic.configs.customize({ quotes: 'single', semi: true, }), );

### 4. npm scripts の追加
- package.jsonに以下を追記

{ "scripts": { "lint": "eslint .", "format": "eslint --fix . " }, }

### 5. VSCodeの設定
- 拡張機能のインストール
![スクリーンショット 2024-11-05 14 23 20](https://github.com/user-attachments/assets/379adb19-4e13-43dc-8729-335fd9c1065c)

- `./.vscode/settings.json`に以下の設定を追加

{ "eslint.format.enable": false, "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, }