or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

index.md
tile.json

tessl/npm-unocss--eslint-config

ESLint configuration for UnoCSS projects with both legacy and flat configuration formats

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@unocss/eslint-config@66.5.x

To install, run

npx @tessl/cli install tessl/npm-unocss--eslint-config@66.5.0

index.mddocs/

@unocss/eslint-config

ESLint configuration for UnoCSS projects that provides ready-to-use ESLint rules and configurations to help developers maintain code quality and consistency when working with UnoCSS utility classes and directives. The package supports both legacy and flat ESLint configurations through separate entry points.

Package Information

  • Package Name: @unocss/eslint-config
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @unocss/eslint-config

Core Imports

import config from "@unocss/eslint-config";

For flat configuration:

import flatConfig from "@unocss/eslint-config/flat";

CommonJS support:

const config = require("@unocss/eslint-config");
const flatConfig = require("@unocss/eslint-config/flat");

Basic Usage

Legacy ESLint Configuration:

// .eslintrc.js
module.exports = {
  extends: ["@unocss/eslint-config"],
  // Your other config...
};

Flat ESLint Configuration:

// eslint.config.js
import unocssConfig from "@unocss/eslint-config/flat";

export default [
  unocssConfig,
  // Your other config...
];

Architecture

@unocss/eslint-config is a lightweight wrapper around @unocss/eslint-plugin that provides:

  • Legacy Configuration: Traditional extends-based configuration format for older ESLint setups
  • Flat Configuration: New flat configuration format for modern ESLint (v9+)
  • Zero Configuration: Ready-to-use configurations with sensible defaults
  • Plugin Integration: Seamless integration with @unocss/eslint-plugin rules

Capabilities

Legacy ESLint Configuration

Traditional ESLint configuration object that extends the UnoCSS plugin's recommended configuration.

/**
 * Legacy ESLint configuration object for traditional .eslintrc files
 * Extends the @unocss/eslint-plugin recommended configuration
 */
declare const config: {
  extends: ["plugin:@unocss/recommended"];
};

export default config;

Usage:

// .eslintrc.js
module.exports = {
  extends: ["@unocss/eslint-config"],
  rules: {
    // Override or add additional rules if needed
  },
};
// .eslintrc.json
{
  "extends": ["@unocss/eslint-config"]
}

Flat ESLint Configuration

Flat configuration object for the new ESLint configuration format (ESLint v9+).

/**
 * Flat ESLint configuration object for eslint.config.js files
 * Uses the @unocss/eslint-plugin flat configuration
 */
declare const flatConfig: ESLintFlatConfig;

export default flatConfig;

Usage:

// eslint.config.js
import unocssConfig from "@unocss/eslint-config/flat";

export default [
  unocssConfig,
  {
    // Your additional configuration
    rules: {
      // Override or add rules
    },
  },
];

TypeScript usage:

// eslint.config.ts
import type { Linter } from "eslint";
import unocssConfig from "@unocss/eslint-config/flat";

const config: Linter.FlatConfig[] = [
  unocssConfig,
  {
    rules: {
      // Your rules
    },
  },
];

export default config;

Types

/**
 * ESLint flat configuration type
 * Represents the structure of modern ESLint flat configuration objects
 */
interface ESLintFlatConfig {
  name?: string;
  files?: string[];
  ignores?: string[];
  languageOptions?: {
    ecmaVersion?: number;
    sourceType?: "script" | "module";
    parser?: any;
    parserOptions?: Record<string, any>;
  };
  plugins?: Record<string, any>;
  rules?: Record<string, any>;
  settings?: Record<string, any>;
}

/**
 * Legacy ESLint configuration type
 * Represents traditional .eslintrc configuration format
 */
interface ESLintLegacyConfig {
  extends?: string[];
  plugins?: string[];
  rules?: Record<string, any>;
  env?: Record<string, boolean>;
  parserOptions?: Record<string, any>;
  settings?: Record<string, any>;
}

Configuration Details

Both configurations provide:

  • UnoCSS-specific linting rules for utility class validation
  • Syntax support for UnoCSS directives and patterns
  • Best practices enforcement for UnoCSS usage
  • Error detection for common UnoCSS mistakes

The configurations are designed to work seamlessly with UnoCSS projects and enforce consistent code quality standards for utility-first CSS approaches.