@lwc/eslint-plugin-lwc weekly downloads statistics

@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:

const eslintPluginLwc = require('@lwc/eslint-plugin-lwc');
const babelParser = require('@babel/eslint-parser');

module.exports = [
    {
        languageOptions: {
            parser: babelParser,
            parserOptions: {
                requireConfigFile: false,
                babelOptions: {
                    parserOpts: {
                        plugins: [
                            'classProperties',
                            ['decorators', { decoratorsBeforeExport: false }],
                        ],
                    },
                },
            },
        },
        plugins: {
            '@lwc/lwc': eslintPluginLwc, // https://github.com/salesforce/eslint-plugin-lwc
        },
        rules: {
            '@lwc/lwc/no-deprecated': 'error',
            '@lwc/lwc/valid-api': 'error',
            '@lwc/lwc/no-document-query': 'error',
            '@lwc/lwc/ssr-no-unsupported-properties': 'error',
        },
    },
];

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:

const eslintPluginLwc = require('@lwc/eslint-plugin-lwc');
const babelParser = require('@babel/eslint-parser');

module.exports = [
    {
        languageOptions: {
            parser: babelParser,
            parserOptions: {
                requireConfigFile: false,
                babelOptions: {
                    parserOpts: {
                        plugins: [
                            'classProperties',
                            ['decorators', { decoratorsBeforeExport: false }],
                            'typescript',
                        ],
                    },
                },
            },
        },
    },
];

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/newer-version-available	suggest newer versions of module imports when available	✓
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
…