@cabify/eslint-config NPM

@cabify/eslint-config

npm (scoped)

ESLint config for both TS and JS, Cabify way.

Installation

npm i -D @cabify/eslint-config eslint prettier

yarn add --dev @cabify/eslint-config eslint prettier

Usage

Create a .eslintrc file at the root of your project:

{
  "extends": ["@cabify/eslint-config/recommended"],
  "rules": {
    // Additional, per-project rules...
  }
}

Add the lint task into your package.json:

...
"scripts": {
  ...
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
  ...
}

Add a .eslintignore file to avoid checking unwanted files:

https://eslint.org/docs/user-guide/configuring/ignoring-code#the-eslintignore-file

Formatting

The recomended configuration does not include formatting rules, as using the Prettier binary is quicker and brings more benefits. To format the files from your app a and checking them are properly formatted you can add the following scripts to your package.json file:

...
"scripts": {
  ...
  "format": "prettier --write .",
  "format:check": "prettier --check .",
  ...
}

Setup for Babel

If you use non-standard features in your JS code (like decorators), or custom configs to import files you'll need to use babel-eslint as parser. To do so, install the following dependencies and modify your .eslintrc file accordingly:

yarn add --dev babel-eslint eslint-import-resolver-babel-module

yarn add --dev babel-eslint eslint-import-resolver-babel-module

Modify .eslintrc:

{
  ...
  "parser": "babel-eslint",
  "settings": {
    ...
    "import/resolver": {
      "babel-module": {}
    }
  }
}

Setup for TypeScript

Install the following dependencies:

npm i -D eslint-import-resolver-typescript

yarn add --dev eslint-import-resolver-typescript

Modify .eslintrc:

{
  ...
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.eslint.json"
  },
  "settings": {
    ...
    "import/resolver": {
      "typescript": {}
    }
  }
}

Add a ./tsconfig.eslint.json to the root of your project. NOTE: it is important that your tsconfig.eslint.json file includes the same files that you are going to lint, or it will fail and make linting so slow.

{
  "extends": "./tsconfig.json",
  "include": ["src/**/*", "test/**/*"] // remember to import also your test files if you want to lint them
}

A note on performance in TS projects

There is an known issue that may affect linting times in projects with TS. If you note that your linting time is not acceptable, there is a workaround to improve it a lot, but it implies to disable some rules. If you can live without them, just make these changes in your .eslintrc config:

{
  ...
  // remove the "project" field (if you don't have any other parserOptions you can remove the full section)
  "parserOptions": {},
  "rules": {
    // this rules depend on project field, so they must be disabled to make linting much faster
    "@typescript-eslint/await-thenable": "off",
    "@typescript-eslint/no-misused-promises": "off",
    "@typescript-eslint/no-unnecessary-type-assertion": "off",
    "@typescript-eslint/prefer-includes": "off",
    "@typescript-eslint/prefer-regexp-exec": "off",
    "@typescript-eslint/prefer-string-starts-ends-with": "off",
    "@typescript-eslint/require-await": "off",
    "@typescript-eslint/unbound-method": "off"
  }
}

Setup for Jest

If you use Jest, installing its import resolver into your project is encouraged.

Install the following dependencies:

npm i -D eslint-import-resolver-jest

yarn add --dev eslint-import-resolver-jest

Modify .eslintrc:

{
  ...
  "settings": {
    ...
    "import/resolver": {
      ...
      "jest": {
      "jestConfigFile": "./jest.config.js"
      }
    }
  }
}

If you want to ensure that this resolver only applies to your test files, you can use ESLint's overrides configuration option:

"overrides": [
  {
    "files": ["**/__tests__/**/*.js"],
    "settings": {
      "import/resolver": {
        "jest": {
          "jestConfigFile": "./jest.config.js"
        }
      }
    }
  }
]

Make sure that you have set up your jest config file (e.g., ./jest.config.js )

Legacy

If you want to maintain the formatting within ESLint, you can opt to extend the @cabify/eslint-config/legacy configuration instead of @cabify/eslint-config/recommended:

{
  "extends": ["@cabify/eslint-config/legacy"],
  ...
}

Publish a new version

Update CHANGELOG with new features, breaking changes, etc
Check you're in main branch and everything is up-to-date.
Run yarn publish:<major|minor|patch> or yarn publish:canary for canary versions.
Run git push && git push --tags
Check all test actions triggered after previous push are ✔️.
Go to create a new release, select previously pushed tag and write a Title.
Check the action for publish the npm has finished with success.
Check on npm package webpage, the version has been published successfully under latest tag.