今週、私はソフトウェア開発におけるコードのフォーマットの重要性について知識を広げました。私たちがスペル チェック機能を備えたワープロ ソフトウェアに依存してスペル ミスを特定して修正するのと同じように、開発者はコードの品質(zhì)を維持するために、書式設(shè)定機能と lint 機能を備えたコード エディターを活用する必要があります。

靜的解析ツールを使用する理由

コードの品質(zhì)を向上し、開発時間を短縮するには、プログラマーが靜的解析ツールを利用することが不可欠です。複數(shù)の貢獻者とプロジェクトで共同作業(yè)する場合、他の人がコードを読みやすく理解できるようになるため、コーディング標準に準拠することが重要になります。この必要性により、さまざまなプログラミング言語に合わせたさまざまなツールが登場しました。今週の私のプロジェクトでは、JavaScript コードベースに Prettier を?qū)g裝することにしました。フォーマットツールに加えて、リンターも不可欠です。リンターは、プログラムの実行には影響しないかもしれないが、チェックしないままにするとコードに重大な問題を引き起こす可能性がある見落とされたエラーを開発者が特定するのに役立ちます。この目的のために、私は ESLint を選択しました。

より美しく

Prettier を使用するには、次のコマンドを使用してプロジェクトにローカルにインストールしました:

npm install --save-dev --save-exact よりきれい

次に、.prettierrc と .prettierignore:

という 2 つの構(gòu)成ファイルを作成しました。

• .prettierrc: この設(shè)定ファイルには、書式設(shè)定のルールが含まれています。

ルールを上書きせずにデフォルトの Prettier の設(shè)定を使用したいため、空のオブジェクトのままにしました。

• .prettierignore: このファイルには、Prettier がフォーマットすべきではないファイルまたはディレクトリがリストされています。

Prettier に近づきたくないファイルとフォルダーをすべて含めました。それらのほとんどは設(shè)定ファイルと自己生成ファイルです。

メモ:

• 両方のファイルをプロジェクトのルート ディレクトリに配置する必要があります。
• インストール後、次のコマンドを?qū)g行して Prettier の機能をテストできます。

npx のほうがきれいです。 --write

• そのコマンドの実行を簡単にするために、コマンドラインで実行されるスクリプトを作成しました。 package.json ファイル內(nèi)に、format という名前の新しいスクリプトを追加しました。

これを使用するには、次のコマンドを入力するだけです:

npm 実行形式

ローカル セットアップとコマンドラインの使用に加えて、Prettier は拡張機能を介してコード エディター (VSCode など) に統(tǒng)合することもできます。インストールすると、ファイルの保存時にコードが自動的にフォーマットされます。

リンター

ESLint は、ECMAScript/JavaScript コードのパターンを特定してレポートするように設(shè)計されたツールで、コードの一貫性を高め、バグを最小限に抑えることを目的としています。以下を使用して ESLint をインストールして構(gòu)成できます:

npm init @eslint/config@latest

このコマンドを?qū)g行すると、一連の質(zhì)問に従ってターミナルでのセットアップが案內(nèi)され、.eslint.config.mjs という名前の新しい構(gòu)成ファイルが作成されます。 ESLint バージョン 9.x を使用しているため、すべての構(gòu)成はこのファイル內(nèi)で指定されます。また、ignore プロパティを使用して無視する ESLint の不要なファイルとフォルダーもリストしました。

lint プロセスを合理化するために、実行を容易にするスクリプトを package.json に追加しました。

スクリプトを?qū)g行するには、次のコマンドを入力するだけです:

npm run lint

エディターの統(tǒng)合

個々のプロジェクトには前述のセットアップで十分ですが、共同作業(yè)を行う場合には、すべての貢獻者に均一な開発環(huán)境を確保することが重要です。したがって、ルート ディレクトリに 2 つのファイルを含む .vscode フォルダーを作成しました:

• extensions.json: このファイルには、開発者がプロ??ジェクトを開くときにインストールする必要がある必要な拡張機能がリストされ、プロジェクトの起動時にプロンプ??トが表示されます。

• settings.json: この構(gòu)成により、次のことが保証されます。

  • エディターは、保存時に Prettier を使用してコードをフォーマットします。
  • ESLint は保存時にリント問題を自動的に修正します。
  • ESLint は JavaScript ファイルを検証します。
  • Prettier には、コードをフォーマットするための構(gòu)成ファイルが必要です。

settings.json と extensions.json を含む .vscode フォルダーを確立することで、すべての寄稿者が一貫した開発環(huán)境を共有できるようになり、Prettier と ESLint が Visual Studio Code にシームレスに統(tǒng)合されます。この設(shè)定により、プロジェクトの構(gòu)成に応じたコードの自動フォーマットとリンティングが容易になり、コードの品質(zhì)と一貫性の維持が簡素化されます。

書式設(shè)定の問題への対処

• Prettier を?qū)g行した後、主にオブジェクトの最後の要素にカンマを追加する手動調(diào)整が必要なファイルをいくつか特定しました。

• ESLint の実行後、13 件の問題を発見しました。そのほとんどは、初期化を必要としないグローバル オブジェクト プロセスの使用が原因でした。これを解決するために、影響を受けるファイルの先頭に次のコメントを追加しました:

/* eslint-disable no-undef */

さらに、インポートされた値のうち、使用されなかったものがいくつかありました。このような場合は、単純に削除しました。

結(jié)論

靜的解析ツールの探求を通じて、特に共同プロジェクトにおける靜的解析ツールの重要性をより深く理解することができました。これらのツールの主な目的は、チームワークを促進し、高いコード品質(zhì)を維持することです。今では、これらの重要なツールを最初から統(tǒng)合するプロジェクトを効果的にセットアップする方法を理解しています。

以上がスペルチェックを超えて: 靜的解析ツールがコーディングにおけるコラボレーションを強化する方法の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。