​
Installation

JS Style Kit is available as an npm package. Install it with your package manager of choice:

# npm
npm install js-style-kit --save-dev

# yarn
yarn add js-style-kit --dev

# pnpm
pnpm add js-style-kit --save-dev

# bun
bun add js-style-kit --dev

​
Basic Manual Setup

​
ESLint Configuration

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

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

export default eslintConfig();

Note: If you’re not using "type": "module" in your package.json, name your file eslint.config.mjs instead.

Setup your package.json commands:

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

Note: The --max-warnings 0 option is important because all rules are set to warning by default.

​
Prettier Configuration

Create a .prettierrc.js file in your project root:

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

export default prettierConfig();

Or, if you’re not using ESM, create a .prettierrc.mjs file.

Add the formatting commands to your package.json:

{
  "scripts": {
    "format": "prettier --check .",
    "format:fix": "prettier --write ."
  }
}

​
Using the CLI (Experimental)

JS Style Kit includes a CLI to help set up your project quickly:

npx js-style-kit init

This will:

  1. Install js-style-kit as a dev dependency
  2. Create configuration files
  3. Set up package.json scripts
  4. Configure VS Code settings

Note: The CLI is still in beta and works best with new projects.

​
Configuration Overview

​
ESLint Configuration Options

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

export default eslintConfig({
  // Function style: "arrow" (default), "declaration", "expression", or "off"
  functionStyle: "arrow",

  // Additional paths to ignore (node_modules and dist already excluded)
  ignores: [],

  // JSDoc configuration or false to disable
  jsdoc: { requireJsdoc: false },

  // React support: boolean or object with reactCompiler and next options
  react: false,

  // Enable sorting rules from Perfectionist
  sorting: true,

  // Testing configuration
  testing: true,

  // TypeScript support: boolean or path to tsconfig.json
  typescript: true,

  // Enable Turborepo rules
  turbo: false,

  // Enable Unicorn rules
  unicorn: true,
});

​
Prettier Configuration Options

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

export default prettierConfig({
  // Enable CSS order sorting
  cssOrderPlugin: true,

  // Enable JSON sorting
  jsonSortPlugin: true,

  // Enable package.json sorting
  packageJsonPlugin: true,

  // Enable Tailwind CSS support (false by default)
  tailwindPlugin: false,

  // Standard Prettier options
  printWidth: 80,
  tabWidth: 2,
  // etc...
});

​
Next Steps

Explore the Configuration section for detailed information on: