open-wcTools >> Linting and Formatting ||40
We recommend using ESLint to lint your code and prettier to format your code.
This helps catch errors during development, keep a consistent code style, and avoid formatting creating large diffs in pull requests.
Linting config
We recommend @open-wc/eslint-config for a good default configuration for web component projects.
The config includes smart defaults, and installs the following configs and plugins:
- eslint-config-airbnb-base (with some modifications)
- eslint-plugin-wc
- eslint-plugin-lit
- eslint-plugin-html
- eslint-plugin-mocha-no-only
Setup
Automated
For an automated setup, use our project generator and choose the linting option.
Manual
To set up our config manually, install the necessary packages:
npm install --save-dev eslint @open-wc/eslint-config prettier eslint-config-prettierAnd update your package.json with the commands and config:
{
"scripts": {
"lint": "npm run lint:eslint && npm run lint:prettier",
"format": "npm run format:eslint && npm run format:prettier",
"lint:eslint": "eslint --ext .js,.html . --ignore-path .gitignore",
"format:eslint": "eslint --ext .js,.html . --fix --ignore-path .gitignore",
"lint:prettier": "prettier \"**/*.js\" --check --ignore-path .gitignore",
"format:prettier": "prettier \"**/*.js\" --write --ignore-path .gitignore"
},
"eslintConfig": {
"extends": ["@open-wc/eslint-config"]
},
"prettier": {
"singleQuote": true,
"arrowParens": "avoid"
}
}IDE Support
Most IDEs have plugins or configuration options available to help with code linting and formatting.
For VSCode we recommend the eslint plugin for highlighting linting errors, and the prettier for formatting on save.
https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
Lint on commit
To lint changed files on commit, we recommend husky with lint-staged.
Install the necessary packages:
npm install --save-dev husky lint-stagedAnd update your package.json:
{
"lint-staged": {
"*.js": ["eslint --fix", "prettier --write"]
}
}Add the lint-staged hook
npx husky add .husky/pre-commit "npx lint-staged"