リンティング

リンティング

リンティングは、不正な形式コードに関するエラーを編集中に提供します。VS Code は Salesforce の ESLint ルールを適用します。

前提条件

SSL のサポートを含めてビルドされた Node.js の Active LTS リリースがインストールされていること。

インストール

新しいプロジェクト

SFDX プロジェクトを、sfdx force:project:create (SFDX: プロジェクトを作成) コマンドで作成した場合、そのプロジェクトに含まれる package.json ファイルにはすでに ESLint のプラグインが含まれています。

  1. ESLint プラグインと他の依存関係をインストールするには、プロジェクトのディレクトリで npm install を実行します。

  2. ESLint プラグインのルールを設定します。(任意)

  3. リンティングを実行するには、プロジェクトにコンポーネントが必要です。リンティングを開始するには、 npm run lint:lwc を実行します。

既存のプロジェクト

  1. プロジェクトに以下の構成の package.json があることを確認します。 package.json に設定がない場合は、npm install eslint @salesforce/eslint-config-lwc --save-dev を実行します。

    "scripts": {
        "lint": "npm run lint:lwc",
        "lint:lwc": "eslint force-app/main/default/lwc"
    }
    
    "devDependencies" {
        "@salesforce/eslint-config-lwc": "0.4.0",
        "eslint": "^5.16.0"
    }
    
  2. プロジェクトに package.json ファイルがない場合は、リンク先のファイルをコピーして、プロジェクトディレクトリに追加します。

  3. プロジェクトにこの .eslintignore ファイルがあることを確認してください。このファイルは、リントしないファイルを指定します。プロジェクトにこのファイルがない場合は、プロジェクトディレクトリに追加してください。

  4. プロジェクトにこの .eslintrc.json ファイルがあることを確認してください。このファイルは、リンティング設定レベルを指定します。プロジェクトにこのファイルがない場合は、プロジェクトディレクトリに追加してください。

  5. ESLint プラグインと他の依存関係をインストールするには、プロジェクトディレクトリで npm install を実行します。

  6. リンティングを実行するには、プロジェクトにコンポーネントが必要です。リンティングを開始するには、npm run lint:lwc を実行してください。

リンティングルールの設定

ESLint には 3 つの設定レベルが含まれます。デフォルトのレベルは @salesforce/eslint-config-lwc/recommended です。

設定レベルを変更するには、.eslintrc.json のこの行を編集します。

{
  "extends": ["@salesforce/eslint-config-lwc/recommended"]
}
  • @salesforce/eslint-config-lwc/base この設定により、Lightning Web コンポーネントでよくある落とし穴を防ぎ、その他の Salesforce プラットフォームの制限を適用することができます。

  • @salesforce/eslint-config-lwc/recommended この設定により、JavaScript でよくある落とし穴を防ぎ、すべてのベストプラクティスに従うことができます。

  • @salesforce/eslint-config-lwc/extended この設定により、IE 11 などの古いブラウザでは動作が遅くなることがある一部の JavaScript 言語機能の使用が制限されます。古いブラウザで新しい JavaScript 構文と言語機能をサポートするために、Lightning Web コンポーネントのコンパイラは、Lightning Web コンポーネントモジュールを変換します。

リンティングルールの詳細や個別の使用方法については、ESLint プラグインの Github リポジトリを参照してください。

スクリプトの追加

package.json"scripts" セクションには、ESLint を実行するためのスクリプトがあらかじめ設定されています。独自のスクリプトを追加するには、npm のドキュメントを参照してください。

参考

Feedback or Bugs | Edit this Article