ESLint設定の導入と最適化について

[kei615ykhm]

関連Issue

2 プロジェクト構造とライブラリの初期設定

現状

現在のESLint設定は Next.js の初期設定である { "extends": "next/core-web-vitals" } のみです。

背景

プロジェクトが進行し、初期ステップとして最小限の機能実装を行う中で、コードの複雑さが増してきました。今後の機能実装において複雑に感じるコードを書く頻度が増える可能性と、以下の懸念が生じています：

1. 不慣れな機能実装を行う中で、意図せずにベストプラクティスやセオリーに反したコードを書いてしまう可能性。
2. コードの可読性が低下し、後から見直した際に理解が困難になる可能性。
3. 将来的なメンテナンスや機能拡張が困難になる可能性。

これらの懸念に対処し、コードの品質を維持・向上させるため、ESLintの設定を見直し、最適化する必要があると判断しました。

提案

以下の設定を導入することで、TypeScriptのサポートを強化し、コードの一貫性を保ちつつ、開発の負担を最小限に抑えることができます。

1. 必要なパッケージのインストール：

   npm install --save-dev @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier prettier

2. .eslintrc.jsファイルの更新：

   module.exports = {
   extends: [
   'next/core-web-vitals',
   'plugin:@typescript-eslint/recommended',
   'prettier'
   ],
   parser: '@typescript-eslint/parser',
   plugins: ['@typescript-eslint'],
   rules: {
   '@typescript-eslint/no-unused-vars': 'warn',
   '@typescript-eslint/no-explicit-any': 'warn',
   'react-hooks/rules-of-hooks': 'error',
   'react-hooks/exhaustive-deps': 'warn'
   }
   };

3. .prettierrcファイルの作成：

   {
   "semi": true,
   "trailingComma": "es5",
   "singleQuote": true,
   "tabWidth": 2,
   "useTabs": false
   }

タスク

• [ ] 必要なパッケージのインストール
• [ ] .eslintrc.jsファイルの設定と更新
• [ ] .prettierrcファイルの作成と設定
• [ ] VSCodeの設定を更新し、ESLintとPrettierが自動的に更新されるようにする
• [ ] 既存コードに対してnpm run lintを実行し、新しい設定が正常機能することを確認する
• [ ] 必要に応じて既存のコードを修正する

追加の注意点

• この設定は初期段階の提案です。開発を進める中で、状況に応じてルールを調整する必要があります。
• 個人開発の小規模アプリ開発なので厳密なルールの追加を検討する予定はありません。あくまでもセオリーに反して不必要な癖をつけないようにするという目的もあります。

[kei615ykhm]

17 にて、暫定的なESLint、Prettier、tsconfigの設定を行いました。

今後の開発を進める中で、状況に応じて調整していきます。

※暫定ではありますが、一旦のルール定義は行えたのでPriority: high 🚑を削除しました。