Package Exports

@open-wc/eslint-config

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@open-wc/eslint-config) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

permalink: 'linting/linting-eslint.html' title: Linting ESLint section: guides tags: - guides

Linting ESLint

Use ESLint to lint your code.

Part of Open Web Components: guides, tools and libraries for modern web development and web components

Setup

npm init @open-wc
# Upgrade > Linting

TIP

This is part of the default open-wc recommendation

Manual

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"
    ]
  }
}

What you get

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

Usage

Run:

npm run lint:eslint to check if any file is not correctly formatted
npm run format:eslint to auto format your files

Running with Prettier

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