# Linting

Linting can help you write consistent code, and easily prevent mistakes. Open-wc recommends the following tools:

We recommend

# Setup

npm init @open-wc
# Upgrade > Linting


This is part of the default open-wc recommendation

# Manual

  • Install needed dependencies
    npm add --save-dev @open-wc/eslint-config @open-wc/prettier-config lint-staged husky
  • Adjust your package.json with the following
    "husky": {
      "hooks": {
        "pre-commit": "lint-staged"
    "lint-staged": {
      "*.js": [
        "eslint --fix",
        "prettier --write",
        "git add"
    "scripts": {
      "lint": "npm run lint:eslint && npm run lint:prettier",
      "format": "npm run format:eslint && npm run format:prettier"
    "devDependencies": {
      "husky": "^1.0.0",
      "lint-staged": "^8.0.0"

# What you get

  • Linting and auto formatting using eslint & prettier
  • Full automatic linting for changed files on commit

# Usage


  • npm run lint to check if any file is correctly formatted
  • npm run format to auto format your files

Whenever you create a commit the update files will be auto formatted and the commit message will be linted for you.

# Linting Error Examples

$ npm run lint:prettier

↑↑ these files are not prettier formatted ↑↑

Simply run npm run format:prettier to format those files automatically.

$ npm run lint:eslint

  14:11  error  'foo' is assigned a value but never used  no-unused-vars

✖ 1 problem (1 error, 0 warnings)

If you're using eslint and prettier together most eslint errors will not be auto fixable. This means usually you will need to pick up an editor and actually fix the problem in code.

Last Updated: 12/12/2019, 6:32:08 PM