Skip to content

jimmy-guzman/eslint-config

Repository files navigation

@jimmy.codes/eslint-config

GitHub Actions Workflow Status version downloads semantic-release code style: prettier

πŸ” another opinionated eslint config

πŸ› οΈ Usage

Note

For a better experience, make sure to use @jimmy.codes/prettier-config as well.

πŸ”¨ Getting Started

First install the package, by running the following:

pnpm add -D @jimmy.codes/eslint-config

Then if you want a simple configuration:

// eslint.config.mjs
import jimmyDotCodes from "@jimmy.codes/eslint-config";

export default jimmyDotCodes();

Or if you want to use TypeScript configuration files, you can do the following:

Add --flag unstable_ts_config to your eslint script, for example:

{
  "scripts": {
    "lint": "eslint --flag unstable_ts_config ."
  }
}

And add the following to your .vscode/settings.json:

"eslint.options": {
  "flags": ["unstable_ts_config"]
}

πŸ”§ Configuration

Note

By default all rules are enabled based on the project's dependencies.

This package contains rules that can be enabled or disabled as follows:

import jimmyDotCodes from "@jimmy.codes/eslint-config";

export default jimmyDotCodes({
  /**
   * Are TypeScript rules enabled?
   * @default false
   */
  typescript: true,
  /**
   * Are React rules enabled?
   * @default false
   */
  react: true,
  /**
   * Are Astro rules enabled?
   * @default false
   */
  astro: true,
  /**
   * Are testing rules enabled?
   * @default false
   */
  testing: true,
});

Or you can turn off auto detection to disable rules based on a project's dependencies:

import jimmyDotCodes from "@jimmy.codes/eslint-config";

export default jimmyDotCodes({ autoDetect: false });

TypeScript

You can also change the project location which can be helpful for monorepos:

Warning

This is not recommended nor needed since the introduction of projectService which this config uses by default.

import jimmyDotCodes from "@jimmy.codes/eslint-config";

export default jimmyDotCodes({
  typescript: {
    project: ["./tsconfig.eslint.json", "./packages/*/tsconfig.json"],
  },
});

Testing

By default vitest is used as the testing framework but you can override and add additional rules for utilities:

import jimmyDotCodes from "@jimmy.codes/eslint-config";

export default jimmyDotCodes({
  testing: {
    framework: "jest",
    utilities: ["testing-library"],
  },
});

React

You can add additional rules for utilities:

import jimmyDotCodes from "@jimmy.codes/eslint-config";

export default jimmyDotCodes({
  react: {
    utilities: ["@tanstack/query"],
  },
});

Extending the Configuration

You can also extend the configuration:

import jimmyDotCodes from "@jimmy.codes/eslint-config";

export default jimmyDotCodes(
  {
    configs: [
      {
        files: ["**/*.js"],
        rules: {
          "prefer-spread": "error",
        },
      },
    ],
  },
  {
    rules: {
      "prefer-const": "error",
    },
  },
);

You can also extend what is ignored:

import jimmyDotCodes from "@jimmy.codes/eslint-config";

export default jimmyDotCodes({
  ignores: ["**/*.mjs"],
});

❀️ Credits