Linting

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

We recommend

Setup

npm i -g yo
npm i -g generator-open-wc

yo open-wc:linting

Info

This is part of the default open-wc recommendation

Manual

  • yarn add --dev @open-wc/eslint-config @open-wc/prettier-config lint-staged husky @commitlint/cli @commitlint/config-conventional
  • Copy .eslintignore to .eslintignore
  • Copy .eslintrc.js to .eslintrc.js
  • Copy .prettierignore to .prettierignore
  • Copy prettier.config.js to prettier.config.js
  • Copy husky.config.js to husky.config.js
  • Copy commitlint.config.js to commitlint.config.js
  • Add these scripts to your package.json
    "lint-staged": {
      "*.js": [
        "eslint --fix",
        "prettier --write",
        "git add"
      ]
    },
    "scripts": {
      "lint": "npm run lint:eslint && npm run lint:prettier",
      "lint:eslint": "eslint --ext .js,.html .",
      "lint:prettier": "prettier '**/*.js' --list-different || (echo '↑↑ these files are not prettier formatted ↑↑' && exit 1)",
      "format": "npm run format:eslint && npm run format:prettier",
      "format:eslint": "eslint --ext .js,.html . --fix",
      "format:prettier": "prettier '**/*.js' --write"
    },
    

What you get

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

Usage

Run:

  • 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

test/set-card.test.js
test/set-game.test.js
↑↑ these files are not prettier formatted ↑↑

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

$ npm run lint:eslint

/.../example-vanilla-set-game/set-card.js
  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: 1/21/2019, 10:38:37 PM