Repository files navigation

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

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, andeslint-plugin-jest are peer dependencies of@salesforce/eslint-config-lwc.

This repo exports the configurations as an array of config objects.Apply the appropriateconfiguration into your configuration using the spread operator.

Example ofeslint.config.js:

constlwcConfig=require('@salesforce/eslint-config-lwc');module.exports=[...lwcConfig.configs.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

To enable working with TypeScript projects, install@babel/preset-typescript as a dependency, and apply any of the TypeScript-enabledconfigurations (any config ending inTs).

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

Exampleeslint.config.js:

constlwcConfig=require('@salesforce/eslint-config-lwc');module.exports=[...lwcConfig.configs.recommendedTs];

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

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

Rules:LWC specific rules only.

Usage:

// eslint.config.jsconstlwcConfig=require('@salesforce/eslint-config-lwc');module.exports=[...lwcConfig.configs.base];

TypeScript: Useconfigs.baseTs to use this config in TypeScript projects.

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

Rules:Base rules + Most of the basePotential errors rules + Some of theBest Practices rules +LWC Best Practices.

Usage:

// eslint.config.jsconstlwcConfig=require('@salesforce/eslint-config-lwc');module.exports=[...lwcConfig.configs.recommended];

TypeScript: Useconfigs.recommendedTs to use this config in TypeScript projects.

Goal:Restrict usage of some Javascript language features known to be slow after theCOMPAT transformation. LWC runs inCOMPAT 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 inCOMPAT mode.

Rules:Recommended rules + restrict usage of some slow patterns inCOMPAT.

Usage:

// eslint.config.jsconstlwcConfig=require('@salesforce/eslint-config-lwc');module.exports=[...lwcConfig.configs.extended];

TypeScript: Useconfigs.extendedTs to use this config in TypeScript projects.

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

Rules:I18N specific rules only.

Usage:

Add thei18n configuration to theextends field in youreslint.config.js configuration file, for example:

// eslint.config.jsconstlwcConfig=require('@salesforce/eslint-config-lwc');module.exports=[...lwcConfig.configs.recommended, ...lwcConfig.configs.i18n];

TypeScript: Useconfigs.i18nTs to use this config in TypeScript projects.

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:

// eslint.config.jsconstlwcConfig=require('@salesforce/eslint-config-lwc');module.exports=[...lwcConfig.configs.ssr];

TypeScript: Useconfigs.ssrTs to use this config in TypeScript projects.