Salesforce Developers Japan | リンティング

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

前提条件

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

インストール

新しいプロジェクト

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

ESLint プラグインと他の依存関係をインストールするには、プロジェクトのディレクトリで npm install を実行します。
ESLint プラグインのルールを設定します。(任意)
リンティングを実行するには、プロジェクトにコンポーネントが必要です。リンティングを開始するには、 npm run lint:lwc を実行します。

既存のプロジェクト

プロジェクトに以下の構成の 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": "3.4.0",
    "eslint": "^5.16.0"
}
```
プロジェクトに package.json ファイルがない場合は、リンク先のファイルをコピーして、プロジェクトディレクトリに追加します。
プロジェクトにこの .eslintignore ファイルがあることを確認してください。このファイルは、リントしないファイルを指定します。プロジェクトにこのファイルがない場合は、プロジェクトディレクトリに追加してください。
プロジェクトにこの .eslintrc.json ファイルがあることを確認してください。このファイルは、リンティング設定レベルを指定します。プロジェクトにこのファイルがない場合は、プロジェクトディレクトリに追加してください。
ESLint プラグインと他の依存関係をインストールするには、プロジェクトディレクトリで npm install を実行します。
リンティングを実行するには、プロジェクトにコンポーネントが必要です。リンティングを開始するには、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 のドキュメントを参照してください。

参考

ESLint の設定に関する詳しい情報については、 ESLint User Guide を参照してください。
github.com/salesforce/eslint-plugin-lwc
github.com/salesforce/eslint-config-lwc

Feedback or Bugs | Edit this Article