Lint Lightning Web Components

Linting provides errors about malformed code while you edit. VS Code enforces Salesforce’s ESLint rules.

The active LTS release of Node.js built with SSL support.

You can either install ESLint for a new project, or an existing one.

If you create an SFDX project using the sf project:generate command, your project contains a package.json file with the ESLint plugin already included.

  1. To install the ESLint plugin and other dependencies, run npm install in your project directory.

  2. Configure the ESLint plugin rules.

  3. To run linting, you must have components in your project. To start linting, run npm run lint:lwc.

  1. Verify that your project has a package.json with these configurations. If your package.json doesn't have the configurations, run npm install eslint @salesforce/eslint-config-lwc --save-dev.

  2. If your project doesn't have the package.json file, copy it and add it to your project directory.

  3. Verify that your project has this .eslintignore file. This file specifies which files not to lint. If your project doesn't have it, add it to your project directory.

  4. Verify that your project has this .eslintrc.json file. This file specifies your linting configuration level. If your project doesn't have it, add it to your project directory.

  5. To install the ESLint plugin and other dependencies, run npm install on your project directory.

  6. To run linting, you must have components in your project. To start linting, run npm run lint:lwc.

ESLint includes three configuration levels. The default level is @salesforce/eslint-config-lwc/recommended.

To change the configuration level, edit this line in the .eslintrc.json

  • @salesforce/eslint-config-lwc/base This configuration prevents common pitfalls with Lightning web components and enforces other Salesforce platform restrictions.

  • @salesforce/eslint-config-lwc/recommended This configuration prevents common JavaScript pitfalls and enforces all best practices.

  • @salesforce/eslint-config-lwc/extended This configuration restricts the use of some JavaScript language features that are sometimes slow in older browsers, such as IE11. To support new JavaScript syntax and language features on an older browser, the Lightning web components compiler transforms the Lightning web components modules.

For more details on the linting rules and using them individually, see the ESLint Plugin Github repository.

The "scripts" section of package.json includes some scripts already pre-configured to run ESLint. To add your own, see the npm documentation.