@ikscodes/eslint-config

⚙️ eslint-config

An opinionated ESLint config with Airbnb JavaScript, TypeScript, React, and Prettier baked-in.

🔗 Getting Started

Install via NPM or Yarn:

Using npm:

npm install @ikscodes/eslint-config --save-dev

Using yarn:

yarn add -D @ikscodes/eslint-config

Install required peerDependencies:

If using npm@>7.x, peer dependencies will be installed automatically, assuming no conflicts arise between peer dependency versions within your project.

If using npm@>5.x, use this shortcut (yarn will be automatically detected, if in use):

npx install-peerdeps --dev @ikscodes/eslint-config

Alternatively, Linux and macOS users can one of these commands:

# Using NPM:
(
  export PKG=@ikscodes/eslint-config;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs npm install --save-dev "$PKG@latest"
)

# Using Yarn:
(
  export PKG=@ikscodes/eslint-config;
  npm info "$PKG@latest" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g' | xargs yarn add -D "$PKG@latest"
)

🛠️ Usage

In .eslintrc:

{
  "extends": "@ikscodes/eslint-config"
}

By default, all configuration from ./rules is included (including TypeScript support). Depending on your use-case, only a subset of the included rules may be applicable. You have the option to granularly customize how your ESLint configuration extends from @ikscodes/eslint-config:

{
  // JAVASCRIPT: This is the recommended order of inclusion.
  //             Prettier should always be the last in the list.
  "extends": [
    "@ikscodes/eslint-config/rules/airbnb",
    "@ikscodes/eslint-config/rules/airbnb/hooks",
    "@ikscodes/eslint-config/rules/eslint",
    "@ikscodes/eslint-config/rules/prettier"
  ],

  // TYPESCRIPT: If using TypeScript, add the following `overrides` entry:
  "overrides": [
    {
      "files": ['**/*.ts', '**/*.tsx'],
      "extends": [
        "@ikscodes/eslint-config/rules/airbnb",
        "@ikscodes/eslint-config/rules/airbnb/hooks",
        "@ikscodes/eslint-config/rules/typescript", // 👈 TypeScript-specific rules
        "@ikscodes/eslint-config/rules/eslint",
        "@ikscodes/eslint-config/rules/prettier",
      ]
    }
  ]
}

If granularity is no matter, but still some JavaScript-specific and/or TypeScript-specific overrides are necessary, the previous example is equivalent to this:

{
  "extends": [
    "@ikscodes/eslint-config/javascript",
  ],

  "overrides": [
    {
      "files": ['**/*.ts', '**/*.tsx'],
      "extends": [
        "@ikscodes/eslint-config/typescript"
        // or: "@ikscodes/eslint-config/typescript-type-checked"
      ]
    }
  ]
}

Configuring TypeScript

By default, ESLint will search for ./tsconfig.json to understand your TypeScript preferences. You can customize this with some additional configuration in .eslintrc:

{
  "parserOptions": {
    "project": "path/to/tsconfig.json"
  }
}

Using Typed Linting

To enable Typed Linting via @typescript-eslint, use the "@ikscodes/eslint-config/typescript-type-checked" configuration base like so:

{
  "extends": [
    "@ikscodes/eslint-config/javascript",
  ],

  "overrides": [
    {
      "files": ['**/*.ts', '**/*.tsx'],
      "extends": [
        "@ikscodes/eslint-config/typescript-type-checked"
      ]
    }
  ]
}

Resolving TypeScript imports with eslint-plugin-import

This configuration includes eslint-import-resolver-typescript. This enables eslint-plugin-import to parse your TypeScript paths option to resolve imported modules. By default, eslint-plugin-import will search for ./tsconfig.json to understand your TypeScript preferences. You can customize this with some additional configuration in .eslintrc.

A basic setup might look similar to:

{
  "settings": {
    "import/resolver": {
      "typescript": {
        "project": "path/to/tsconfig.json"
      }
    }
  }
}

Configuring Prettier

By default, ESLint will search for a .prettierrc file to understand your code-formatting preferences. I've also created a library of default Prettier settings that I like to use.

Though not recommended, if you would prefer to set your Prettier configuration inside of ESLint itself, you can do so:

{
  "rules": {
    "prettier/prettier": ["error", {/* ...Prettier settings here */}, { "usePrettierrc": false }]
  }
}

⚡ What's Included?

Configurations

• eslint
• eslint-config-airbnb
• eslint-config-prettier

Plugins

• From eslint-config-airbnb:
  • eslint-plugin-import
  • eslint-plugin-jsx-a11y
  • eslint-plugin-react
  • eslint-plugin-react-hooks
• eslint-plugin-prettier
• @typescript-eslint

Additional Tooling

• eslint-import-resolver-typescript

🗜️ Versioning

+————— Major version is synchronized with ESLint's major version.
| +——— Minor version has BREAKING CHANGES or features.
| | +— Patch version has non-breaking changes.
| | |
x.x.x

It's recommended that you pin the version of @ikscodes/eslint-config with a semver tilde (~) so as to avoid unintended breaking changes when updating your NPM depedencies.

⚖️ License

MIT