Git Product home page Git Product logo

eslint-plugin-lwc's Introduction

@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

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

eslint-plugin-lwc's People

Contributors

apapko avatar blythesheldon avatar dependabot[bot] avatar divmain avatar ekashida avatar jbleylesf avatar jdalton avatar jodarove avatar jye-sf avatar kevinv11n avatar manuel-jasso avatar nolanlawson avatar pmdartus avatar ravijayaramappa avatar rui-rayqiu avatar sfdc-jkovitz avatar svc-scm avatar zhawtof avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.