@salesforce/eslint-config-lwc

@salesforce/eslint-config-lwc

Opinionated ESLint configurations for Lightning Web Components (LWC) projects.

Installation

npm install --save-dev @salesforce/eslint-config-lwc @lwc/eslint-plugin-lwc @salesforce/eslint-plugin-lightning eslint-plugin-import eslint-plugin-jest

Note that @lwc/eslint-plugin-lwc, @salesforce/eslint-plugin-lightning, eslint-plugin-import, and eslint-plugin-jest are peer dependencies of @salesforce/eslint-config-lwc.

Usage

Add the appropriate configuration to the extends field in your configuration.

Example of .eslintrc:

{
    "extends": ["@salesforce/eslint-config-lwc/recommended"]
}

For more details about configuration, please refer to the dedicated section in the ESLint documentation: https://eslint.org/docs/user-guide/configuring#using-a-shareable-configuration-package

[Experimental] Usage with TypeScript

To enable working with TypeScript projects, install @babel/preset-typescript as a dependency, and extend any of the TypeScript-enabled configurations (any config ending in -ts).

Note that these configs use @babel/eslint-parser, and compatibility with @typescript-eslint/parser is not guaranteed.

[!IMPORTANT] While these configs are capable of parsing TypeScript files, not all rules support all TypeScript language features. For example, using type assertions (variable as Type) will break many rules.

Example .eslintrc:

{
    "extends": ["@salesforce/eslint-config-lwc/recommended-ts"]
}

Configurations

This package exposes multiple configurations for your usage. Each configuration listed below is available for both JavaScript projects and TypeScript projects (when using -ts suffix).

@salesforce/eslint-config-lwc/base

Goal: Prevent common pitfalls with LWC, and enforce other Salesforce platform restrictions.

Rules: LWC specific rules only.

TypeScript: Use @salesforce/eslint-config-lwc/base-ts to use this config in TypeScript projects.

@salesforce/eslint-config-lwc/recommended

Goal: Prevent common Javascript pitfalls and enforce all best practices.

Rules: @salesforce/eslint-config-lwc/base rules + Most of the base Potential errors rules + Some of the Best Practices rules + LWC Best Practices.

TypeScript: Use @salesforce/eslint-config-lwc/recommended-ts to use this config in TypeScript projects.

@salesforce/eslint-config-lwc/extended

Goal: Restrict usage of some Javascript language features known to be slow after the COMPAT transformation. LWC runs in COMPAT mode on older browsers (eg. IE11). To support new Javascript syntax and language features on older browser the LWC compiler transforms LWC modules. This linting configuration targets patterns known to be slow in COMPAT mode.

Rules: @salesforce/eslint-config-lwc/recommended rules + restrict usage of some slow patterns in COMPAT.

TypeScript: Use @salesforce/eslint-config-lwc/extended-ts to use this config in TypeScript projects.

@salesforce/eslint-config-lwc/i18n

Goal: Promote usage of @salesforce/i18n-service over 3rd parties, promote internationalization (I18N) best practices.

Rules: I18N specific rules only.

Usage:

Add the i18n configuration to the extends field in your .eslintrc configuration file, for example:

{
    "extends": ["@salesforce/eslint-config-lwc/recommended", "@salesforce/eslint-config-lwc/i18n"]
}

TypeScript: Use @salesforce/eslint-config-lwc/i18n-ts to use this config in TypeScript projects.

@salesforce/eslint-config-lwc/ssr

Goal: Promote writing server-side-rendering friendly components. We only recommend using this configuration if your components are running in experiences supporting LWC server-side-rendering.

Rules: SSR specific rules only.

Usage:

Add the ssr configuration to the extends field in your .eslintrc configuration file, for example:

{
    "extends": ["@salesforce/eslint-config-lwc/recommended", "@salesforce/eslint-config-lwc/ssr"]
}

TypeScript: Use @salesforce/eslint-config-lwc/ssr-ts to use this config in TypeScript projects.