@cabify/eslint-config

ESLint config for Cabify Javascript projects

Usage no npm install needed!

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

README

@cabify/eslint-config

npm (scoped)

All Contributors

ESLint config for both TS and JS, Cabify way.

Installation

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

or

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

Usage

  1. Create a .eslintrc file at the root of your project:
{
  "extends": ["@cabify/eslint-config/recommended"],
  "rules": {
    // Additional, per-project rules...
  }
}
  1. Add the lint task into your package.json:
...
"scripts": {
  ...
  "lint": "eslint .",
  "lint:fix": "eslint . --fix",
  ...
}
  1. 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

or

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

Modify .eslintrc:

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

Setup for TypeScript

  1. Install the following dependencies:
npm i -D eslint-import-resolver-typescript

or

yarn add --dev eslint-import-resolver-typescript
  1. Modify .eslintrc:
{
  ...
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": "./tsconfig.eslint.json"
  },
  "settings": {
    ...
    "import/resolver": {
      "typescript": {}
    }
  }
}
  1. 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.

npm i -D eslint-import-resolver-jest

or

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

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 new version

Just merge to main branch and run:

  • git checkout main
  • git pull
  • yarn
  • yarn publish:(major|minor|patch)
  • git push --tags

This will trigger a workflow on Github which will publish to npm eventually.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Aarón García Hervás

💻

Alejandro

💻

Alejandro Gallardo Escobar

💻

Alejandro León

💻

Alex Temina

💻

Arian Zargaran

💻

Carlos Castillo

💻

Christian

💻

Crismmgg

💻

David Asensio Cañas

💻

Francisco Sánchez

💻

Javier López

💻

Jesús Merino Parra

💻

Leire Rico

💻

Ricardo Boluda

💻

Rodrigo

💻

Sergio Ramirez

💻

Valentin Berlin

💻

Yago Quiñoy Lobariñas

💻

alejandromolero

💻

This project follows the all-contributors specification. Contributions of any kind welcome!