Common eslint rules/preferences for Ionic.

Usage no npm install needed!

<script type="module">
  import ionicEslintConfig from 'https://cdn.skypack.dev/@ionic/eslint-config';



Shared ESLint config used in Ionic and Capacitor projects.

This is meant to be used alongside Prettier (with @ionic/prettier-config).


  1. Remove existing .eslintrc.* file, if present.

  2. Install eslint and the config.

    npm install -D eslint @ionic/eslint-config
  3. Add the following to package.json:

    "eslintConfig": {
      "extends": "@ionic/eslint-config/recommended"

:memo: You can also use the base rule set: @ionic/eslint-config

With Prettier and @ionic/prettier-config

  1. Set up Prettier and @ionic/prettier-config.

  2. When using with Prettier and @ionic/prettier-config, ESLint should run first. Set up your scripts in package.json like this:

      "scripts": {
        "lint": "npm run eslint && npm run prettier -- --check",
        "fmt": "npm run eslint -- --fix && npm run prettier -- --write",
        "prettier": "prettier \"**/*.ts\"",
        "eslint": "eslint . --ext .ts",
    • npm run lint: for checking if ESLint and Prettier complain
    • npm run fmt: attempt to autofix lint issues and autoformat code

    :memo: Not every rule in this configuration is autofixable, so npm run fmt may continue failing until lint issues are addressed manually.

With Husky

  1. Install husky:

    npm install -D husky
  2. Add the following to package.json:

      "husky": {
        "hooks": {
          "pre-commit": "npm run lint"