ionic-team/eslint-config

Common eslint rules/preferences for Ionic.

@ionic/eslint-config

Shared ESLint config used in Ionic and Capacitor projects.

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

Usage

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

📝 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

   📝 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"
       }
     },
   

eslint-config's Issues

add to recommended: padding-line-between-statements

    'padding-line-between-statements': ['error',
      { 'blankLine': 'always', 'prev': '*', 'next': 'multiline-block-like' },
      { 'blankLine': 'always', 'prev': 'multiline-block-like', 'next': '*' },
      { 'blankLine': 'always', 'prev': '*', 'next': ['const', 'let', 'export'] },
      { 'blankLine': 'always', 'prev': ['const', 'let', 'export'], 'next': '*' },
      { 'blankLine': 'any', 'prev': ['const', 'let', 'export'], 'next': ['const', 'let', 'export'] },
      { 'blankLine': 'always', 'prev': '*', 'next': 'return' },
    ],

https://eslint.org/docs/rules/padding-line-between-statements

Style preferences for newlines that doesn't conflict with Prettier.

Is it possible to write `@ionic/eslint-config/recommended` directly into .eslintrc.json

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

Can this configuration only be declared in package.json? I want to declare in .eslintrc.json.
If so, how can I modify it? The following is my .eslintrc.json file.

{
  "root": true,
  "ignorePatterns": [
    "projects/**/*"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "parserOptions": {
        "project": [
          "tsconfig.json",
          "e2e/tsconfig.json"
        ],
        "createDefaultProgram": true
      },
      "extends": [
        "plugin:@angular-eslint/recommended",
        "plugin:@angular-eslint/template/process-inline-templates"
      ],
      "rules": {
        "@angular-eslint/component-class-suffix": [
          "error",
          {
            "suffixes": [
              "Page",
              "Component"
            ]
          }
        ],
        "@angular-eslint/component-selector": [
          "error",
          {
            "prefix": "app",
            "style": "kebab-case",
            "type": "element"
          }
        ],
        "@angular-eslint/directive-selector": [
          "error",
          {
            "prefix": "app",
            "style": "camelCase",
            "type": "attribute"
          }
        ]
      }
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        "plugin:@angular-eslint/template/recommended"
      ],
      "rules": {}
    }
  ]
}

Create "recommended" set of lint rules

"extends": "@ionic/recommended"

JSDoc Linting

Look into linting JSDoc comment blocks with https://github.com/gajus/eslint-plugin-jsdoc

no-fallthrough conflicts with TS

ESLint complains:

/Users/dan/git/cordova-res/src/cordova/config.ts
  464:5  error  Expected a 'break' statement before 'case'  no-fallthrough

But the case statement itself had an exhaustive switch which TS knew about, but ESLint didn't. Adding break resulted in a TS compiler error:

src/cordova/config.ts:464:7 - error TS7027: Unreachable code detected.

464       break;
          ~~~~~~

Failed to load plugin '@typescript-eslint'

I configure linter using the doc in Readme.md

The linter works great, but when i run ionic serve return this error

[eslint] Failed to load plugin '@typescript-eslint' declared in 'package.json » @ionic/eslint-config/recommended » ./index': Class extends value undefined is not a constructor or null
Referenced from: C:\XXXX\node_modules\@ionic\eslint-config\index.js

package.json

{
  "name": "xxxx",
  "version": "0.0.1",
  "private": true,
  "dependencies": {
    "@capacitor/core": "4.6.1",
    "@capacitor/geolocation": "^4.1.0",
    "@ionic/react": "^5.9.4",
    "@ionic/react-router": "^5.9.4",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^8.0.3",
    "@types/jest": "^24.0.25",
    "@types/node": "^12.12.24",
    "@types/react": "^16.9.17",
    "@types/react-dom": "^16.9.4",
    "@types/react-router": "^5.1.20",
    "@types/react-router-dom": "^5.3.3",
    "axios": "^1.2.2",
    "history": "^5.3.0",
    "ionicons": "^5.0.0",
    "jwt-decode": "^3.1.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "rxjs": "^6.5.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "lint": "npm run eslint && npm run prettier -- --check",
    "fmt": "npm run eslint -- --fix && npm run prettier -- --write",
    "prettier": "prettier \"**/*.ts\"",
    "eslint": "eslint . --ext .ts"
  },
  "eslintConfig": {
    "extends": "@ionic/eslint-config/recommended",
    "ignorePatterns": [
      "serviceWorker.ts",
      "**/vendor/*.js"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "@capacitor/cli": "4.6.1",
    "@ionic/eslint-config": "^0.3.0",
    "@ionic/prettier-config": "^2.0.0",
    "eslint": "^8.32.0",
    "node-sass": "^7.0.3",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.4"
  },
  "description": "xxxx"
}

ionic version 6.20.8
npm version 8.1.0

Reports errors on code created with ionic start/generate for type=angular

Is this config intended to be used for Ionic projects of type "angular"?

Or is it only intended for non-angular Ionic projects?

I'm trying to use this in a project generated from the ionic cli (version 6.15.0) as follows:
ionic start test-eslint blank --type=angular

If I follow the instructions here to add @ionic-team/eslint-config and then run
npm run lint

It generates numerous errors.

Even if I fix the initial errors ... if I then generate new components e.g.
ionic g component test-component

and then run lint ... numerous errors are generated for the generated component.

It seems like the angular project generated by the ionic cli does already contain some eslint support. However, it is not very clear if that setup is considered the best practice as it does not contain all of the rules in this config.

On the other hand, switching the project to use this config seems to lose all of the Angular style guide rule checks.

Can you please clarify what the best practice is for an Ionic/Angular app with eslint?

Thanks.

add to recommended: func-style

    'func-style': 'error',

https://eslint.org/docs/rules/func-style

We generally prefer const fn = () => { ... } vs function fn() { ... }.

Is there possible to support "eslint >= 8"?

webstorm and ionic eslint 0.3.0 not supported

when i installed it, webstorm not work and write eslint 0.3.0 not supported

Typescript `v5`: "Parsing Error: DeprecationError: `orginalKeywordKind`"

Hi, After installing ESLint and following the steps mentioned in ionic-team/eslint-config, an unexpected error message is displayed.

error message:

Warning

Parsing error: DeprecationError: originalKeywordKind has been deprecated since v5.0.0 and can no longer be used. Use identifierToKeywordKind(identifier) instead.

add to recommended: curly

    'curly': 'error',

https://eslint.org/docs/rules/curly

We prefer to always add curly braces where applicable.

add to recommended: array-callback-return

    'array-callback-return': 'error',

https://eslint.org/docs/rules/array-callback-return