ESLint rules for Web Components
eslint-plugin-wc
ESLint plugin for Web Components.
Assuming you already have ESLint installed, run:
# npm
npm install eslint-plugin-wc --save-dev
# yarn
yarn add eslint-plugin-wc --dev
Then extend the recommended eslint config:
{
"extends": [
// ...
"plugin:wc/recommended"
]
}
Or if you're using ESLint flat configs, add this to your eslint.config.js
:
import {configs} from 'eslint-plugin-wc';
export default [
configs.recommended,
// or if you want to specify `files`, or other options
{
...configs.recommended,
files: ['test/**/*.js']
}
];
You should also specify settings that will be shared across all the plugin rules. (More about eslint shared settings)
{
"settings": {
"wc": {
"elementBaseClasses": ["LitElement"] // Recognize `LitElement` as a Custom Element base class
}
}
}
If you want more fine-grained configuration, you can instead add a snippet like this to your ESLint configuration file:
{
"plugins": [
// ...
"wc"
],
"rules": {
// ...
"wc/no-invalid-element-name": "error",
"wc/no-typos": "warn"
}
}
This plugin exports a recommended
configuration that enforces WebComponent good practices.
To enable this configuration use the extends
property in your .eslintrc
config file:
{
"extends": ["eslint:recommended", "plugin:wc/recommended"]
}
This plugin exports a best-practice
configuration that enforces WebComponent best practices.
To enable this configuration use the extends
property in your .eslintrc
config file:
{
"extends": ["eslint:recommended", "plugin:wc/best-practice"]
}
Note: These configurations will enable sourceType: 'module'
in parser options.
eslint-plugin-wc
is licensed under the MIT License.