ホームページ > 記事 > ウェブフロントエンド > JavaScriptコードを確認する方法
JavaScript コードを作成するとき、コードの品質と読みやすさを確認するためにコード インスペクションを実行する必要がある場合があります。コードインスペクションは、潜在的なエラーや不規則な記述を発見するのに役立ちます。そのため、問題を早期に検出することで問題をより迅速に修正できるため、不必要な開発コストを削減できます。この記事では、2 つの異なるツールを使用して JavaScript コードを検査する方法を説明します。
1. Lint ツールを使用する
ESLint は、JavaScript コードをチェックし、考えられる問題の発見に役立つ非常に人気のあるコード チェック ツールです。 ESLint には、従来のコンパイラーでは見つけられない問題を見つけるのに役立つ、非常に広範なルールのセットがあります。同時に、ESLint はさまざまなニーズに合わせてルールをカスタマイズすることで機能を拡張することもできます。
ESLint の使用を開始する前に、ESLint をローカルにインストールする必要があります。インストールする前に、Node.js と npm をインストールする必要があります。次の手順に進む前に、これら 2 つのツールをコンピュータにインストールする必要があります。
ESLint をインストールするには、ターミナルで次のコマンドを実行します。
npm install eslint --save-dev
インストールが完了したら、ESLint を使用して JavaScript コードを確認できます。
ESLint を使用する前に、コードを正しくチェックできるように、ESLint のルールを構成する必要があります。 ESLint は、.eslintrc.json ファイルを通じて構成を読み込むことができます。
プロジェクトのルート ディレクトリに .eslintrc.json ファイルを作成し、その中で必要なルールを定義できます。 ESLint 構成ファイルのサンプルを次に示します。
{ "parserOptions": { "ecmaVersion": 8, "sourceType": "module" }, "extends": ["eslint:recommended"], "rules": { "no-console": "warn", "no-unused-vars": "warn" } }
このサンプル構成では、ESLint が ECMAScript 8 バージョンを使用し、モジュール インポートを使用することを指定します。また、未使用の変数に関する警告や console.log ステートメントに関する警告を要求するなど、いくつかのルールも指定しました。
構成が完了したら、次のコマンドを使用して ESLint を実行できます:
./node_modules/.bin/eslint your-file.js
このコマンドは JavaScript コードで実行されます。エラーや警告を確認し、出力します。さまざまなコマンド ライン オプションを指定して ESLint を実行すると、エラーのみや警告だけなど、さまざまな結果を表示できます。
2. Prettier を使用する
Prettier は、コードを自動的にフォーマットするツールで、コードのスタイルと形式を統一し、コードの可読性と保守性を向上させるのに役立ちます。コードを記述するとき、Prettier はコードのインデント、スペース、セミコロン、その他の形式を自動的に調整し、コードのスタイルと仕様が一貫していることを確認します。
Prettier をインストールするには、ターミナルで次のコマンドを実行します。
npm install prettier --save-dev
インストールが完了したら、Prettier を使用して次のことを行うことができます。コードはフォーマットされました。
ESLint と同様に、Prettier も構成ファイルを通じてルールをロードできます。 Prettier は、Visual Studio Code、Atom など、ほぼすべてのコード エディターをサポートできます。
Visual Studio Code では、ワークスペース設定に次の構成を追加できます:
{ "editor.defaultFormatter": "esbenp.prettier-vscode", "[javascript]": { "editor.formatOnSave": true } }
この構成により、Prettier プラグインが有効になり、JavaScript ファイルを保存するときにコードが自動的にフォーマットされます。
構成が完了したら、次のコマンドを使用して Prettier を実行できます:
npx prettier your-file.js
このコマンドは JavaScript コードで実行されます。フォーマットしたコードをフォーマットして出力します。さまざまなコマンド ライン オプションを使用して、コードの書式設定の動作を調整できます。
概要
上記の紹介を通じて、JavaScript コードの検査と書式設定が非常に重要であり、コードの品質、読みやすさ、保守性の向上に役立つことがわかりました。 ESLint と Prettier は、コーディングの効率とコードの品質を向上させるために、上記の手順に従ってインストールして構成できる 2 つの非常に実用的なツールです。
以上がJavaScriptコードを確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。