@lwc/eslint-plugin-lwc
v1.8.2@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 |