JavaScriptコードを確認する方法

JavaScript コードを作成するとき、コードの品質と読みやすさを確認するためにコード インスペクションを実行する必要がある場合があります。コードインスペクションは、潜在的なエラーや不規則な記述を発見するのに役立ちます。そのため、問題を早期に検出することで問題をより迅速に修正できるため、不必要な開発コストを削減できます。この記事では、2 つの異なるツールを使用して JavaScript コードを検査する方法を説明します。

1. Lint ツールを使用する

ESLint は、JavaScript コードをチェックし、考えられる問題の発見に役立つ非常に人気のあるコード チェック ツールです。 ESLint には、従来のコンパイラーでは見つけられない問題を見つけるのに役立つ、非常に広範なルールのセットがあります。同時に、ESLint はさまざまなニーズに合わせてルールをカスタマイズすることで機能を拡張することもできます。

1. ESLint のインストール

ESLint の使用を開始する前に、ESLint をローカルにインストールする必要があります。インストールする前に、Node.js と npm をインストールする必要があります。次の手順に進む前に、これら 2 つのツールをコンピュータにインストールする必要があります。

ESLint をインストールするには、ターミナルで次のコマンドを実行します。

npm install eslint --save-dev

インストールが完了したら、ESLint を使用して JavaScript コードを確認できます。

2. ESLint の構成

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 ステートメントに関する警告を要求するなど、いくつかのルールも指定しました。

3. ESLint の実行

構成が完了したら、次のコマンドを使用して ESLint を実行できます:

./node_modules/.bin/eslint your-file.js

このコマンドは JavaScript コードで実行されます。エラーや警告を確認し、出力します。さまざまなコマンド ライン オプションを指定して ESLint を実行すると、エラーのみや警告だけなど、さまざまな結果を表示できます。

2. Prettier を使用する

Prettier は、コードを自動的にフォーマットするツールで、コードのスタイルと形式を統一し、コードの可読性と保守性を向上させるのに役立ちます。コードを記述するとき、Prettier はコードのインデント、スペース、セミコロン、その他の形式を自動的に調整し、コードのスタイルと仕様が一貫していることを確認します。

1. Prettier のインストール

Prettier をインストールするには、ターミナルで次のコマンドを実行します。

npm install prettier --save-dev

インストールが完了したら、Prettier を使用して次のことを行うことができます。コードはフォーマットされました。

2. Prettier の構成

ESLint と同様に、Prettier も構成ファイルを通じてルールをロードできます。 Prettier は、Visual Studio Code、Atom など、ほぼすべてのコード エディターをサポートできます。

Visual Studio Code では、ワークスペース設定に次の構成を追加できます:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.formatOnSave": true
  }
}

この構成により、Prettier プラグインが有効になり、JavaScript ファイルを保存するときにコードが自動的にフォーマットされます。

3. Prettier の実行

構成が完了したら、次のコマンドを使用して Prettier を実行できます:

npx prettier your-file.js

このコマンドは JavaScript コードで実行されます。フォーマットしたコードをフォーマットして出力します。さまざまなコマンド ライン オプションを使用して、コードの書式設定の動作を調整できます。

概要

上記の紹介を通じて、JavaScript コードの検査と書式設定が非常に重要であり、コードの品質、読みやすさ、保守性の向上に役立つことがわかりました。 ESLint と Prettier は、コーディングの効率とコードの品質を向上させるために、上記の手順に従ってインストールして構成できる 2 つの非常に実用的なツールです。

以上がJavaScriptコードを確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。