ホームページ >ウェブフロントエンド >jsチュートリアル >一貫性を保つためのフォーマットとリンティング
このアクティビティには、コードの品質と一貫性を向上させるために、統計分析ツールをオープンソース プロジェクト GENEREADME に実装することが含まれます。
GENEREADME への貢献は大歓迎です!環境のセットアップ、ツールの実行とテストの方法、変更の送信に関するガイドラインについては、CONTRIBUTING.md を確認してください。
GENEREADME は、ファイルを取り込んで処理し、ファイルの内容の説明やドキュメントを含む README ファイルを生成するコマンドライン ツールです。このツールは OpenAI チャット補完を利用してファイルを分析し、コンテンツを生成します。
このツールは現在、Groq と OpenRouter をサポートしており、デフォルトで Groq を使用します。適切なプロバイダーの有効な API キーを指定する必要があります。
.env ファイルを作成するか、コマンドの使用時に -a または --api-key フラグを使用して、有効な API キーを指定します。
API_KEY=API_KEY or genereadme <files> -a API_KEY genereadme <files> --api-key API_KEY
依存関係をインストールします:
npm install -g
既存のサンプル ファイルを使用してツールを実行するか、独自のサンプル ファイルを使用して開始します。
genereadme <files> genereadme examples/sum.js genereadme examples/createUser.js…
フォーマッタとして、Prettier を使用することを選択しました。これを選択した理由は簡単で、基本的な機能を以前に使用したことがあり、さらに詳しく学ぶつもりです。
技術的には、デフォルトで prettier を使用するように IDE をセットアップ済みなので、最初からフォーマッタがすでにありました。ただし、プロジェクト自体のセットアップがより適切になったため、寄稿者もフォーマッタを使用できるようになり、フォーマットの点でプロジェクトのコードの一貫性が保たれます。
私は、.prettierrc ファイルにコードをどのようにフォーマットするかに関するルールを追加しただけです。また、保存時のフォーマットなどのオプションについては、.vscode/ の下の settings.json にいくつかの設定を追加しました。
リンターとして、ESLint を使用することにしました。私は JavaScript を使用しているため、人気のあるリンターの 1 つを使用しました。これも以前に使用した経験がありますが、実際に自分でセットアップしたわけではありません。そのため、私は ESLinter を選びました。
ESLinter のセットアップはそれほど複雑ではありませんでした。リンターを機能させるには、簡単なインストールと eslint.config.js でのルールの設定だけで十分です。ただし、フォーマッタとリンターを同時に使用しているため、両方が適切に連携できることを確認する必要があります。これには基本的に、リンターやフォーマッタと競合しないようにするための追加ルールが含まれています。
プロジェクト内でツールを使用する方法はたくさんありますが、私は個人的にこれらの特定の構成を好みます。保存時にフォーマットしてより美しく、タイプ時に実行して eslint にします。こうすることで、リンターは開発者が入力するときにリンティングの問題を常にチェックし、保存がトリガーされるとフォーマッタが変更を自動フォーマットします。
今週のタスクでは、ユーザーが CLI を介して手動でフォーマッタとリンターを実行できるようにするスクリプトも追加しました。リポジトリにコミットされたコードがプロジェクトのフォーマットとリンティングの標準を確実に満たすようにするために、コミット前フックも実装されています。このフックを追加すると、各コミットの前に Prettier と ESLint を自動的に実行できるため、問題を早期に発見し、コントリビューション間でコードの一貫性を維持できます。この設定により、軽微な書式設定の問題がすり抜ける可能性が減り、プロジェクトに携わるすべての人にとってコードの読みやすさが向上します。
以上が一貫性を保つためのフォーマットとリンティングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。