Lightning Web セキュリティ用 ESLint ルールのインストール
新たに開発された ESLint ルールは、Lightning Web セキュリティを利用したコードの作成に役立ちます。開発マシンにインストールして、ソースコードで実行できます。
ESLint ルールは、npm パッケージとして提供されており、ローカルシステムにインストールして、IDE またはコマンドラインで使用します。
ESLint ルールのドキュメントは、こちらの GitHub リポジトリに格納されています。
Lightning Web セキュリティにブランド変更される前に、新しいアーキテクチャが Locker の名前で開発されました。コード、および npm パッケージ名で locker が使用されていることを確認できます。ただし、lint ルールでは、現在の Lightning Locker ではなく、Lightning Web セキュリティがサポートされています。
Lightning Web セキュリティの ESLint サポートの追加
-
開発システムのプロジェクトディレクトリでターミナルウィンドウを開きます。
-
ノードのプロジェクト依存関係をインストールします。
-
https://www.npmjs.com/package/@locker/eslint-config-locker から ESLint のルールと設定をインストールします。
1$ npm install --save-dev eslint @locker/eslint-config-locker
-
.eslintrc プロジェクトの extends プロパティに @locker/eslint-config-locker を追加します。デフォルトでは、このファイルは force-app/main/default/lwc ディレクトリにあります。
次の行では、エラーのみが含まれる base ESLint ルールが設定されています。
1{
2 "extends": [
3 "eslint:recommended",
4 "@salesforce/eslint-config-lwc/recommended",
5 "@locker/eslint-config-locker"
6 ]
7}
-
エラーに加えて警告も通知したい場合は、.eslintrc で recommended の設定を使用してください。ESLint 警告は、特定の問題をデバッグする場合に役立つことがありますが、日常の使用には必要のない特別な情報も生成されます。
1{
2 "extends": [
3 "eslint:recommended",
4 "@salesforce/eslint-config-lwc/recommended",
5 "@locker/eslint-config-locker/recommended"
6 ]
7}
-
静的リソースとして使用される Aura コンポーネントまたはコードを開発している場合は、uncompiled の設定を追加します。
1{
2 "extends": [
3 "eslint:recommended",
4 "@salesforce/eslint-config-lwc/recommended",
5 "@locker/eslint-config-locker/recommended",
6 "@locker/eslint-config-locker/uncompiled"
7 ]
8}
組織が新しい Salesforce リリースにアップグレードされたら、npm update を実行して、ESLint ルールがリリースの LWS のディストーションと一致するようにします。リリースで追加されるディストーションのリストについては、Salesforce リリースノートを参照してください。
VS Code での ESLint ルールの使用
Salesforce では、Lightning Web コンポーネントの開発に Visual Studio Code と Salesforce Extensions for Visual Studio Code (Visual Studio Code 向け Salesforce 拡張機能) を使用することを推奨しています。Lightning Web セキュリティに対してエラーがあった場合は、VS Code 内のコードがルールに違反している場所に ESLint ルールが表示されます。このルールは、コードに影響を与えるディストーションに対応付けられます。ルール違反のポップアップには、ルールのドキュメントへのリンクが表示されます。
lint ルール違反のポップアップを次に示します。このポップアップには、関連するルールのドキュメントへのリンクが含まれています。
このポップアップには、エラーではなく lint 警告が表示されます。
プロジェクトに対する基本ルールの実行
-
**「Lightning Web セキュリティの ESLint サポートの追加」**セクションの説明に従って、ESLint のルールと設定をインストールします。
-
通常のコマンドを実行して、コードをリンティングします。
Salesforce DX プロジェクトを使用している場合は、使用環境に適した npm または yarn コマンドを実行してください。
または
Salesforce DX プロジェクトを使用していない場合は、LWC コンポーネントに eslint コマンドを実行できます。コンポーネントが lwc フォルダに入っている場合のコマンドは、次のようになります。
いずれの場合も出力は次の例のようになります。
110:16 error Document#fullscreen is prohibited in Lightning Locker @locker/locker/distorted-document-blocked-properties
2
3✖ 1 problem (1 error, 0 warnings)
4
5error Command failed with exit code 1.
j