eslint-config

Files (3)

• SKILL.md
• presets.md · references/
• rules.md · references/

SKILL.md (first lines)

# ESLint Config Skill

Use this skill when a project needs ESLint set up from scratch, migrated to flat config, extended for a specific runtime or framework, or when existing rules are too noisy or too permissive.

## Core principles

1. Use flat config (`eslint.config.ts` / `eslint.config.js`) for all new projects. Legacy `.eslintrc` is deprecated as of ESLint v9.
2. Enable TypeScript-aware rules via `typescript-eslint`. Do not configure TypeScript rules without it.
3. Layer configs: base TypeScript → framework → project-specific overrides. Keep each layer small.
4. Treat `warn` as `error` in CI — warnings that never block are noise. Use `warn` only for rules in active migration.
5. Never disable rules globally without a comment explaining why.

## Base flat config (TypeScript)

```ts
// eslint.config.ts
import tseslint from "typescript-eslint";

export default tseslint.config(
  {
    ignores: ["dist/", "node_modules/", "coverage/", ".netlify/"],
  },
  tseslint.configs.recommendedTypeChecked,
  {
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
    rules: {
      "@typescript-eslint/no-explicit-any": "error",
      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
      "@typescript-eslint/consistent-type-imports": ["error", { prefer: "type-imports" }],
      "@typescript-eslint/no-floating-promises": "error",
      "@typescript-eslint/await-thenable": "error",
      "no-console": "warn",
    },
  },
);
```

## Preact / React variant

```ts
import tseslint from "typescript-eslint";
import reactPlugin from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";

export default tseslint.config(
  { ignores: ["dist/", "node_modules/"] },
  tseslint.configs.recommendedTypeChecked,
  {
    plugins: {
      react: reactPlugin,
      "react-hooks": reactHooks,
    },
    settings: {
      react: { version: "detect" },
    },
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
        jsxPragma: null, // for Preact: no React import needed
      },
    },
    rules: {
      ...reactPlugin.configs.recommended.rules,
      ...reactHooks.configs.recommended.rules,
      "react/react-in-jsx-scope": "off",       // Preact / React 17+ JSX transform
      "react/prop-types": "off",               // TypeScript handles this
      "@typescript-eslint/no-explicit-any": "error",
      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
      "@typescript-eslint/consistent-type-imports": ["error", { prefer: "type-imports" }],
    },
  },
);
```

## Node.js / Netlify Functions variant

```ts
import tseslint from "typescript-eslint";
import nodePlugin from "eslint-plugin-n";

export default tseslint.config(
  { ignores: ["dist/", ".netlify/", "node_modules/"] },
  tseslint.configs.recommendedTypeChecked,
  nodePlugin.configs["flat/recommended-module"],
  {
    languageOptions: {
      parserOptions: {
        project: true,
        tsconfigRootDir: import.meta.dirname,
      },
    },
    rules: {
      "@typescript-eslint/no-explicit-any": "error",
      "@typescript-eslint/no-floating-promises": "error",
      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
      "@typescript-eslint/consistent-type-imports": ["error", { prefer: "type-imports" }],
      "n/no-missing-import": "off",   // TypeScript resolves imports; node plugin duplicate
      "no-console": "off",            // console is the logger in serverless functions
    },
  },
);
```

## Monorepo: shared base + per-package overrides

```
packages/
  eslint-config-base/
    index.ts        ← shared base config exported as a package
  app-ui/
    eslint.config.ts
  api/
    eslint.config.ts

From prachwal-archive/web-ui-skills, MIT.

More from prachwal-archive/web-ui-skills