​
Overview

JS Style Kit provides a comprehensive ESLint configuration using the modern ESLint v9 flat config format. This configuration includes sensible defaults for JavaScript and TypeScript projects, with optional support for React, testing frameworks, and code organization.

​
Basic Setup

Create an eslint.config.js file in your project root:

import { eslintConfig } from "js-style-kit";

export default eslintConfig();

If your project doesn’t use ESM, create an eslint.config.mjs file instead:

import { eslintConfig } from "js-style-kit";

export default eslintConfig();

Add the linting scripts to your package.json:

{
  "scripts": {
    "lint": "eslint . --max-warnings 0",
    "lint:fix": "eslint . --fix --max-warnings 0"
  }
}

​
Configuration Options

The eslintConfig() function accepts a configuration object with the following options:

import { eslintConfig } from "js-style-kit";

export default eslintConfig({
  // All options shown with their default values
  functionStyle: "arrow", // Controls function style: "arrow", "declaration", "expression", or "off"
  ignores: [], // Additional paths to ignore (node_modules and dist already excluded)
  jsdoc: { requireJsdoc: false }, // JSDoc configuration or false to disable
  react: false, // Whether to include React rules, see below for options
  sorting: true, // Whether to include sorting rules from Perfectionist
  storybook: false, // Whether to include Storybook rules
  testing: true, // Testing configuration, see below for options
  typescript: true, // Boolean or string path to tsconfig.json
  turbo: false, // Whether to include Turborepo rules
  unicorn: true, // Whether to include Unicorn rules
});

​
Function Style Configuration

Controls how functions should be written throughout your codebase. Some configurations are auto-fixable, but some may require manual adjustment.

// Enforce arrow functions (default)
functionStyle: "arrow";

// Enforce function declarations
functionStyle: "declaration";

// Enforce function expressions
functionStyle: "expression";

// Disable function style enforcement
functionStyle: "off";

​
TypeScript Configuration

TypeScript support is enabled by default. You can:

// Enable with automatic project detection (default)
typescript: true;

// Disable TypeScript rules
typescript: false;

// Specify path to your tsconfig.json
typescript: "./tsconfig.json";

​
React Configuration

React support is disabled by default.

// Enable React support with default options (includes React Compiler)
react: true;

// Disable React support
react: false;

// Enable with custom options
react: {
  // Enable/disable React Compiler (default: true when react is enabled)
  reactCompiler: true,

  // Add Next.js support (adds .next to ignores)
  next: true
}

​
JSDoc Configuration

JSDoc validation is enabled by default, but requirement rules are off:

// Disable JSDoc validation completely
jsdoc: false;

// Enable JSDoc with requirement rules, ideal for libraries
jsdoc: {
  requireJsdoc: true;
}

​
Sorting Configuration

Code organization rules from Perfectionist are enabled by default:

// Enable sorting rules (default)
sorting: true;

// Disable sorting rules
sorting: false;

​
Testing Configuration

Testing support is enabled by default with Vitest configuration:

// Enable with default settings (Vitest)
testing: true;

// Disable testing configuration
testing: false;

// Enable with custom options
testing: {
  filenamePattern: "spec", // "test" (.test, default) or "spec" (.spec)
  files: ["**/*.{test,spec}.{ts,tsx,js,jsx}"], // Override file patterns
  formattingRules: true, // Whether to include formatting rules like padding around blocks
  framework: "vitest", // "vitest" (default), "jest", "node", or "bun"
  itOrTest: "test", // "it" (default) or "test"
}

​
Storybook Configuration

Storybook support is disabled by default.

// Enable Storybook support with default options
storybook: true;

// Disable Storybook support
storybook: false;

​
Additional Rules

// Enable Turborepo rules (disabled by default)
turbo: true;

// Enable Unicorn rules (enabled by default)
unicorn: true;

​
Adding Ignores

By default, JS Style Kit ignores node_modules and dist directories. You can add additional paths to ignore:

export default eslintConfig({
  ignores: ["build", ".cache", "coverage"],
});

​
Custom ESLint Configurations

You can extend the base configuration by providing additional ESLint config objects as rest parameters:

import { eslintConfig } from "js-style-kit";

export default eslintConfig(
  {
    // Base configuration options
    typescript: "tsconfig.eslint.json",
    react: true,
  },
  // Additional custom ESLint configuration objects
  {
    name: "custom-globals",
    languageOptions: {
      globals: {
        process: "readonly",
        __dirname: "readonly",
      },
    },
  },
  {
    name: "custom-rules",
    rules: {
      "no-console": "warn",
      "prefer-const": "error",
    },
  },
);

​
Migrating from ESLint Legacy Config

If you’re coming from a legacy ESLint configuration (.eslintrc.js or other formats), you’ll need to adapt to the new flat config format. Here are some key differences:

  1. The configuration file is now named eslint.config.js or eslint.config.mjs
  2. The format is different, using an array of configuration objects rather than a nested object
  3. Plugins, parsers, and other extensions are imported directly rather than being referenced by string names

JS Style Kit handles most of this complexity for you, so you can focus on the configuration options that matter for your project.

For more details on ESLint flat config, see the ESLint documentation.