今週、私はソフトウェア開発におけるコードのフォーマットの重要性について知識を広げました。私たちがスペル チェック機能を備えたワープロ ソフトウェアに依存してスペル ミスを特定して修正するのと同じように、開発者はコードの品質を維持するために、書式設定機能と lint 機能を備えたコード エディターを活用する必要があります。
コードの品質を向上し、開発時間を短縮するには、プログラマーが静的解析ツールを利用することが不可欠です。複数の貢献者とプロジェクトで共同作業する場合、他の人がコードを読みやすく理解できるようになるため、コーディング標準に準拠することが重要になります。この必要性により、さまざまなプログラミング言語に合わせたさまざまなツールが登場しました。今週の私のプロジェクトでは、JavaScript コードベースに Prettier を実装することにしました。フォーマットツールに加えて、リンターも不可欠です。リンターは、プログラムの実行には影響しないかもしれないが、チェックしないままにするとコードに重大な問題を引き起こす可能性がある見落とされたエラーを開発者が特定するのに役立ちます。この目的のために、私は ESLint を選択しました。
Prettier を使用するには、次のコマンドを使用してプロジェクトにローカルにインストールしました:
npm install --save-dev --save-exact よりきれい
次に、.prettierrc と .prettierignore:
という 2 つの構成ファイルを作成しました。ルールを上書きせずにデフォルトの Prettier の設定を使用したいため、空のオブジェクトのままにしました。
Prettier に近づきたくないファイルとフォルダーをすべて含めました。それらのほとんどは設定ファイルと自己生成ファイルです。
メモ:
npx のほうがきれいです。 --write
これを使用するには、次のコマンドを入力するだけです:
npm 実行形式
ローカル セットアップとコマンドラインの使用に加えて、Prettier は拡張機能を介してコード エディター (VSCode など) に統合することもできます。インストールすると、ファイルの保存時にコードが自動的にフォーマットされます。
ESLint は、ECMAScript/JavaScript コードのパターンを特定してレポートするように設計されたツールで、コードの一貫性を高め、バグを最小限に抑えることを目的としています。以下を使用して ESLint をインストールして構成できます:
npm init @eslint/config@latest
このコマンドを実行すると、一連の質問に従ってターミナルでのセットアップが案内され、.eslint.config.mjs という名前の新しい構成ファイルが作成されます。 ESLint バージョン 9.x を使用しているため、すべての構成はこのファイル内で指定されます。また、ignore プロパティを使用して無視する ESLint の不要なファイルとフォルダーもリストしました。
lint プロセスを合理化するために、実行を容易にするスクリプトを package.json に追加しました。
スクリプトを実行するには、次のコマンドを入力するだけです:
npm run lint
個々のプロジェクトには前述のセットアップで十分ですが、共同作業を行う場合には、すべての貢献者に均一な開発環境を確保することが重要です。したがって、ルート ディレクトリに 2 つのファイルを含む .vscode フォルダーを作成しました:
extensions.json: このファイルには、開発者がプロジェクトを開くときにインストールする必要がある必要な拡張機能がリストされ、プロジェクトの起動時にプロンプトが表示されます。
settings.json: この構成により、次のことが保証されます。
settings.json と extensions.json を含む .vscode フォルダーを確立することで、すべての寄稿者が一貫した開発環境を共有できるようになり、Prettier と ESLint が Visual Studio Code にシームレスに統合されます。この設定により、プロジェクトの構成に応じたコードの自動フォーマットとリンティングが容易になり、コードの品質と一貫性の維持が簡素化されます。
Prettier を実行した後、主にオブジェクトの最後の要素にカンマを追加する手動調整が必要なファイルをいくつか特定しました。
ESLint の実行後、13 件の問題を発見しました。そのほとんどは、初期化を必要としないグローバル オブジェクト プロセスの使用が原因でした。これを解決するために、影響を受けるファイルの先頭に次のコメントを追加しました:
/* eslint-disable no-undef */
さらに、インポートされた値のうち、使用されなかったものがいくつかありました。このような場合は、単純に削除しました。
静的解析ツールの探求を通じて、特に共同プロジェクトにおける静的解析ツールの重要性をより深く理解することができました。これらのツールの主な目的は、チームワークを促進し、高いコード品質を維持することです。今では、これらの重要なツールを最初から統合するプロジェクトを効果的にセットアップする方法を理解しています。
以上がスペルチェックを超えて: 静的解析ツールがコーディングにおけるコラボレーションを強化する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。