Install ESLint Rules for Lightning Web Security
We’ve created ESLint rules to help you develop code that works with Lightning Web Security. You can install them on your development machine and run them on your source code.
The ESLint rules are available as an npm package that you install on your local system and use in an IDE or on the command line.
The ESLint rules are documented in this GitHub repository.
The new architecture was developed under the Locker name before the brand change to Lightning Web Security. You can see
locker used in code and in the npm package names. However, the lint rules support Lightning Web Security, not the current Lightning Locker.
On your development system, open a terminal window in your project directory.
Install the node project dependencies.
Install ESLint rules and configurations from https://www.npmjs.com/package/@locker/eslint-config-locker.
extendsproperty in your project
.eslintrc. By default, this file is in the
This line configures the
baseESLint rules, which include only errors.
If you want notification of warnings in addition to errors, use the
recommendedconfiguration in your
.eslintrc. The ESLint warnings can be helpful for debugging specific issues, but generate extra information that isn’t necessary for everyday use.
If you’re developing Aura components or code to be used as static resources, add the
When your org is upgraded to a new Salesforce release, run
npm update so your ESLint rules match the LWS distortions in the release. For a list of distortions added in a release, see the Salesforce release notes.
Salesforce recommends using Visual Studio Code with the Salesforce Extensions for Visual Studio Code to develop Lightning web components. The ESLint rules for errors against Lightning Web Security are displayed in VS Code where your code violates them. The rules map to distortions that affect your code. The popup for a rule violation includes a link to documentation for the rule.
Here you can see the popup for a lint rule violation with a link to the documentation for the associated rule.
This popup shows a lint warning, not an error.
Install ESLint rules and configurations as described in the Add ESLint support for Lightning Web Security section.
Run your usual command for linting your code.
If you’re using a Salesforce DX project, run the appropriate
yarncommand for your environment.
If you’re not using a Salesforce DX project, you can run the
eslintcommand on your LWC components. For example, if your components are contained in the
In either case, the output is similar to this example.