Skip to content

A zero-configuration style guide for ESLint and Prettier that provides sensible default settings and flexible configuration options.

Notifications You must be signed in to change notification settings

drake-nathan/js-style-kit

Repository files navigation

js-style-kit

A zero-configuration style guide for ESLint and Prettier that provides sensible default settings and flexible configuration options.

CI Release npm version License: MIT codecov CodeRabbit Pull Request Reviews

Overview

JS Style Kit is a comprehensive, batteries-included linting and formatting solution for modern JavaScript and TypeScript projects.

  • ✅ All dependencies included (ESLint, Prettier, plugins) - no need to install extras
  • ✅ ESLint v9 flat config
  • ✅ TypeScript support out of the box
  • ✅ Optional React and React Compiler support
  • ✅ JSDoc validation with configurable requirements for libraries
  • ✅ Automatic import, prop, and object sorting with Perfectionist
  • ✅ Tailwind CSS support for Prettier
  • ✅ Modern ESM-only package

For detailed usage and configuration options, see the package documentation.

Note: This is very much a work in progress. I want to know what configuration changes you make, so please open an issue!

Basic Setup

npm install js-style-kit --save-dev
# or
yarn add js-style-kit --dev
# or
pnpm add js-style-kit --save-dev
# or
bun add js-style-kit --dev

ESLint Configuration

Create an eslint.config.js (or eslint.config.mjs) file at the root of your project:

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

export default eslintConfig({
  // options
});

Prettier Configuration

Create a prettier.config.js (or prettier.config.mjs) file at the root of your project:

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

export default prettierConfig({
  // options
});

Repository Structure

This is a monorepo managed with Turborepo and bun.

/
├── apps/
│   └── docs/             # Documentation site built with Docusaurus (WIP)
├── packages/
│   ├── style-kit/        # Main package with ESLint and Prettier configurations
│   └── typescript-config/ # Shared TypeScript configurations
├── .changeset/          # Changesets for versioning
├── .github/             # GitHub Actions workflows
└── turbo.json           # Turborepo configuration

Development

# Install dependencies
bun i

# Build all packages
bun run build

# Run tests
bun run test

# Format code
turbo run format

# Lint code
turbo run lint

# Create a changeset
bun run changeset

License

MIT © Nathan Drake

About

A zero-configuration style guide for ESLint and Prettier that provides sensible default settings and flexible configuration options.

Resources

Stars

Watchers

Forks

Contributors 4

  •  
  •  
  •  
  •