Getting Started

Installation

npm install @deslint/eslint-plugin --save-dev

ESLint Configuration

Add Deslint to your eslint.config.js (ESLint v10+ flat config):

import deslint from '@deslint/eslint-plugin';

export default [
  deslint.configs.recommended,
  // ... your other config
];

Quick Setup with Init Wizard

The fastest way to get started:

npx deslint init

The wizard auto-detects your framework, imports your Tailwind config, and generates a .deslintrc.json with your design system tokens.

Run Your First Scan

npx deslint scan

This scans your project and outputs a Design Health Score (0-100) with per-category breakdowns for colors, spacing, typography, responsive, and consistency.

Fix Violations

# Interactive mode — review each violation
npx deslint fix --interactive

# Auto-fix all — apply all safe fixes at once
npx deslint fix --all

# Dry run — preview changes without modifying files
npx deslint fix --dry-run

CI/CD Integration

Add to your GitHub Actions workflow:

- name: Design Quality Gate
  run: npx deslint scan --min-score 75 --format sarif

Exit code 1 if the Design Health Score drops below your threshold. SARIF output integrates with GitHub Security tab.

Framework Support

Deslint works with all major frontend frameworks out of the box:

React/Next.js — JSX className attributes
Vue — class and :class bindings
Svelte — class attributes and class: directives
Angular — templates, [ngClass], [class] bindings
Plain HTML — standard class attributes

Tailwind v3 + v4

All rules support both Tailwind v3 and v4 class naming conventions. Deslint auto-detects your Tailwind version from your config file.