salesforce / eslint-plugin-lwc

Official ESLint rules for LWC

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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

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

About

Official ESLint rules for LWC

License:MIT License


Languages

Language:JavaScript 100.0%