@lwc/eslint-plugin-lwc

Official ESLint rules for Lightning Web Components (LWC).

Installation

$ npm install eslint @babel/core @babel/eslint-parser @lwc/eslint-plugin-lwc --save-dev

Usage

Starting with v3.0.0, @lwc/eslint-plugin-lwc only supports eslint@v9. Use @lwc/eslint-plugin-lwc@v1.x for older versions of eslint.

Import @lwc/eslint-plugin-lwc and use it in the plugins section of your configuration as shown below. Then configure the desired rules in the rules sections. Some of the syntax used in Lightning Web Components is not yet stage 4 (eg. class fields or decorators), and the out-of-the-box parser from ESLint doesn't support this syntax yet. In order to parse the LWC files properly, set the parser field to @babel/eslint-parser in the languageOptions section of the eslint config.

Example of eslint.config.js:

1const eslintPluginLwc = require('@lwc/eslint-plugin-lwc');
2const babelParser = require('@babel/eslint-parser');
3
4module.exports = [
5    {
6        languageOptions: {
7            parser: babelParser,
8            parserOptions: {
9                requireConfigFile: false,
10                babelOptions: {
11                    parserOpts: {
12                        plugins: [
13                            'classProperties',
14                            ['decorators', { decoratorsBeforeExport: false }],
15                        ],
16                    },
17                },
18            },
19        },
20        plugins: {
21            '@lwc/lwc': eslintPluginLwc, // https://github.com/salesforce/eslint-plugin-lwc
22        },
23        rules: {
24            '@lwc/lwc/no-deprecated': 'error',
25            '@lwc/lwc/valid-api': 'error',
26            '@lwc/lwc/no-document-query': 'error',
27            '@lwc/lwc/ssr-no-unsupported-properties': 'error',
28        },
29    },
30];

Usage with TypeScript

To enable working with TypeScript projects, install @babel/preset-typescript as a dependency add "typescript" to languageOptions.parserOptions.babelOptions.parserOpts.plugins in your eslint.config.js.

Example:

1const eslintPluginLwc = require('@lwc/eslint-plugin-lwc');
2const babelParser = require('@babel/eslint-parser');
3
4module.exports = [
5    {
6        languageOptions: {
7            parser: babelParser,
8            parserOptions: {
9                requireConfigFile: false,
10                babelOptions: {
11                    parserOpts: {
12                        plugins: [
13                            'classProperties',
14                            ['decorators', { decoratorsBeforeExport: false }],
15                            'typescript',
16                        ],
17                    },
18                },
19            },
20        },
21    },
22];

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

Configurations

To choose from three configuration settings, install the eslint-config-lwc sharable configuration package.

Processors

Processor ID	Description
lwc/ssr	Lint only JavaScript files of SSR-able components

Rules

LWC

Rule ID	Description	Fixable
lwc/consistent-component-name	ensure component class name matches file name	🔧
lwc/no-api-reassignments	prevent public property reassignments
lwc/no-deprecated	disallow usage of deprecated LWC APIs
lwc/no-document-query	disallow DOM query at the document level
lwc/no-attributes-during-construction	disallow setting attributes during construction
lwc/no-disallowed-lwc-imports	disallow importing unsupported APIs from the lwc package
lwc/no-leading-uppercase-api-name	ensure public property doesn't start with an upper-case character
lwc/no-unexpected-wire-adapter-usages	enforce wire adapters to be used with wire decorator
lwc/no-unknown-wire-adapters	disallow usage of unknown wire adapters
lwc/valid-api	validate api decorator usage
lwc/valid-track	validate track decorator usage
lwc/valid-wire	validate wire decorator usage
lwc/valid-graphql-wire-adapter-callback-parameters	ensure graphql wire adapters are using 'errors' instead of 'error'
lwc/no-host-mutation-in-connected-callback	disallow the host element mutation in 'connectedCallback'
lwc/consistent-component-name	ensure component class name matches file name	🔧
lwc/no-api-reassignments	prevent public property reassignments
lwc/no-deprecated	disallow usage of deprecated LWC APIs
lwc/no-document-query	disallow DOM query at the document level
lwc/no-attributes-during-construction	disallow setting attributes during construction
lwc/no-disallowed-lwc-imports	disallow importing unsupported APIs from the lwc package
lwc/no-leading-uppercase-api-name	ensure public property doesn't start with an upper-case character
lwc/no-unexpected-wire-adapter-usages	enforce wire adapters to be used with wire decorator
lwc/no-unknown-wire-adapters	disallow usage of unknown wire adapters
lwc/valid-api	validate api decorator usage
lwc/valid-track	validate track decorator usage
lwc/valid-wire	validate wire decorator usage
lwc/ssr-no-restricted-browser-globals	disallow access to global browser APIs during SSR
lwc/ssr-no-unsupported-properties	disallow access of unsupported properties in SSR
lwc/ssr-no-node-env	disallow usage of process.env.NODE_ENV in SSR
lwc/valid-graphql-wire-adapter-callback-parameters	ensure graphql wire adapters are using 'errors' instead of 'error'
lwc/ssr-no-host-mutation-in-connected-callback	disallow the host element mutation in 'connectedCallback'
lwc/ssr-no-static-imports-of-user-specific-scoped-modules	disallow static imports of user-specific scoped modules in SSR-able components
lwc/ssr-no-form-factor	disallow formFactor in SSR-able components

Best practices

Rule ID	Description	Fixable
lwc/no-async-operation	restrict usage of async operations
lwc/no-dupe-class-members	disallow duplicate class members
lwc/no-inner-html	disallow usage of innerHTML
lwc/no-template-children	prevent accessing the immediate children of this.template
lwc/no-leaky-event-listeners	prevent event listeners from leaking memory
lwc/prefer-custom-event	suggest usage of CustomEvent over Event constructor
lwc/ssr-no-unsupported-node-api	disallow unsupported Node API calls in SSR-able components

Compat performance

Older browsers like IE11 run LWC in compatibility mode. For more information about browser performance, please refer to Supported Browsers in the Lightning Web Components Developer Guide.

Rule ID	Description	Fixable
lwc/no-async-await	disallow usage of the async-await syntax
lwc/no-for-of	disallow usage of the for-of syntax
lwc/no-rest-parameter	disallow usage of the rest parameter syntax

Deprecated

Rule ID	Replaced by
lwc/no-dupe-class-members	no-dupe-class-members(base eslint rule)