@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

Add @lwc/eslint-plugin-lwc to the plugins section of your configuration. 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.

Example of .eslintrc:

{
    "parser": "@babel/eslint-parser",
    "parserOptions": {
        "requireConfigFile": false,
        "babelOptions": {
            "parserOpts": {
                "plugins": ["classProperties", ["decorators", { "decoratorsBeforeExport": false }]]
            }
        }
    },

    "plugins": ["@lwc/eslint-plugin-lwc"],

    "rules": {
        "@lwc/lwc/no-deprecated": "error",
        "@lwc/lwc/valid-api": "error",
        "@lwc/lwc/no-document-query": "error"
    }
}

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.

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

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

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

tomekduda/eslint-plugin-lwc