​
Overview

JS Style Kit includes a CLI tool to help quickly set up your project with ESLint and Prettier configurations. This tool is currently in beta and works best with new projects.

​
Basic Usage

Run the initialization command:

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

​
What the CLI Does

​
1. Detects Package Manager

The CLI automatically detects which package manager you’re using based on lock files:

  • bun.lock → Bun
  • pnpm-lock.yaml → pnpm
  • yarn.lock → Yarn
  • Otherwise → npm

​
2. Installs Dependencies

The CLI will:

  • Install JS Style Kit as a dev dependency
  • Remove overlapping dependencies (ESLint, Prettier) to avoid conflicts

​
3. Creates Configuration Files

The CLI creates the following files:

  • style-kit.config.js or style-kit.config.mjs (based on your project’s module type)
  • eslint.config.js or eslint.config.mjs
  • prettier.config.js or prettier.config.mjs

​
4. Updates package.json Scripts

The CLI adds these scripts to your package.json:

{
  "scripts": {
    "format": "prettier format",
    "format:check": "prettier format --check",
    "lint": "eslint lint",
    "lint:fix": "eslint lint --fix"
  }
}

​
5. Configures VS Code

The CLI updates or creates .vscode/settings.json with:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "eslint.runtime": "node",
  "explorer.fileNesting.enabled": true,
  "explorer.fileNesting.patterns": {
    "style-kit.config.js": "eslint.config.js, prettier.config.js"
  }
}

​
File Structure

After running the CLI, your project will have this configuration structure:

your-project/
├── .vscode/
│   └── settings.json
├── eslint.config.js      # Imports from style-kit.config.js
├── package.json          # Updated with scripts
├── prettier.config.js    # Imports from style-kit.config.js
└── style-kit.config.js   # Main configuration file

The style-kit.config.js file will contain:

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

export const eslint = eslintConfig({});

export const prettier = prettierConfig({});

​
Limitations

The CLI tool is still in beta, with some limitations:

  • Works best with fresh projects
  • May not handle complex project setups properly
  • Limited customization during installation

​
Manual Configuration

If you prefer more control or the CLI doesn’t work for your project, you can always set up JS Style Kit manually.