permalink | title | section | tags | |
---|---|---|---|---|
linting/linting-eslint.html |
Linting ESLint |
guides |
|
Use ESLint to lint your code.
npm init @open-wc
# Upgrade > Linting
TIP
This is part of the default open-wc recommendation
- Install
@open-wc/eslint-config
npm add --save-dev @open-wc/eslint-config
- Adjust your package.json with the following
{ "scripts": { "lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore", "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore" }, "eslintConfig": { "extends": [ "@open-wc/eslint-config" ] } }
This will install @open-wc/eslint-config
, a config based on airbnb but allows for some specialities needed for Web Components.
- Apply linting to js and html files
- Apply linting for best practices
- Allow dynamic module imports
- Allow imports in test/demos from devDependencies
- Allow underscore dangle
- Do not prefer default exports
- Do not prefer no file extension
Run:
npm run lint:eslint
to check if any file is not correctly formattednpm run format:eslint
to auto format your files
If you also are using Prettier, in order for your ESLint to play nicely with Prettier, you should also include eslint-config-prettier. This way, the Prettier formatting will take into account your linting rules, so you don't need to add your own overrides for Prettier if it clashes with your linting rules.
npm add --save-dev eslint-config-prettier
{
"eslintConfig": {
"extends": ["@open-wc/eslint-config", "eslint-config-prettier"]
}
}
And if you want the same formatting rules as the deprecated @open-wc/prettier-config
, you can add some prettier overrides in your package.json
:
{
"prettier": {
"singleQuote": true,
"arrowParens": "avoid"
}
}
This combination of Prettier 2
and @open-wc/eslint-config
represents the outcome if you add both linting and formatting while scaffolding with:
npm init @open-wc