@cyrilolanolan/eslint-config-ts NPM

@cyrilolanolan/eslint-config-ts

ESLint configuration for TypeScript projects

This configuration encourages best practices by using a set of rules for consistent and high-quality coding across all projects.

✨Prettier for code formatting
✨Supports linting for React

Installation

Install the package with its peer dependencies:

npm i -D @cyrilolanolan/eslint-config-ts typescript eslint prettier

Extend the configuration.

In your ESLint Configuration (preferred):

module.exports = {
  extends: ['@cyrilolanolan/ts'],
  // other configurations here
};

or add eslintConfig key in your package.json:

{
  "eslintConfig": {
    "extends": "@cyrilolanolan/ts"
  }
}

Configurations

This package uses the following recommended configurations:

✔️ @typescript-eslint/eslint-recommended
✔️ prettier/recommended
✔️ import/recommended
✔️ jsx-a11y/recommended

Base

no-console - disallow the use of console
linebreak-style - enforce consistent linebreak style
id-length - enforce minimum and maximum identifier lengths
no-restricted-imports - relative imports are not allowed
unused-imports/no-unused-imports - disallow unused imports
import/no-cycle - ensures that there is no resolvable path back to this module via its dependencies
import/no-extraneous-dependencies - forbid the import of external modules that are not declared in package.json
import/no-duplicates - reports if a resolved path is imported more than once
import/no-self-import - forbid a module from importing itself
simple-import-sort/imports - sorts the import statements

TypeScript

@typescript-eslint/consistent-type-imports - enforce consistent usage of type imports
@typescript-eslint/no-unnecessary-condition - disallow conditionals where the type is always truthy or falsy
typescript-sort-keys/interface - sorts interface keys in ascending order
typescript-sort-keys/string-enum - typescript-sort-keys/string-enum

React

react/self-closing-comp - enforce self-closing component when there's no children

⚠️ Gotchas

Non standard `tsconfig.json` paths

If you use a TypeScript configuration file other than the default (tsconfig.json under the project's root), you need to specify its path:

{
  "eslintConfig": {
    "parserOptions": {
      "project": "./apps/ts-app/tsconfig.dev.json"
    }
  }
}

New ESLint configuration system (`eslint.config.js`)

ESLint announced a new configuration system, and from version 8.21.0, the old .eslintrc* is no longer used. It would still supported in v8, however in v9, the legacy configuration system would not be supported.

This configuration uses the legacy format (.eslintrc*) as of the moment and will be migrating to the new format once major frameworks ship out with the new one by default.

Good thing, ESLint has provided a package to continue using eslintrc-style shared configs and settings within a flat config file. In the meantime, here's how you can use this configuration if you're using the new format: @eslint/eslintrc.

Errors when using `@typescript-eslint`

Sometimes, errors with using @typescript-eslint are caused by version mismatch with other configuration files installed.

There is a known issue with eslint-config-next causing the linting to fail. This is because the package is using the v5 version of @typescript-eslint. Since this package is in v6, there are a lot breaking changes.

As a temporary fix, you can add an overrides key in your package.json and use the v6 version of the plugin.

{
  "overrides": {
    "eslint-config-next": {
      "@typescript-eslint/eslint-plugin": "6.1.0",
      "@typescript-eslint/parser": "6.1.0"
    }
  }
}