@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"
    }
}

Usage with TypeScript

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

Example:

{
    "parserOptions": {
        "babelOptions": {
            "parserOpts": {
                "plugins": [
                    "classProperties",
                    ["decorators", { "decoratorsBeforExport": 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.

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/no-restricted-browser-globals-during-ssr | disallow access to global browser APIs during SSR | | | lwc/no-unsupported-ssr-properties | disallow access of unsupported properties in SSR | | | lwc/no-node-env-in-ssr | 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' | |

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 |