or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli-tool.mdconstants-patterns.mdcore-configuration.mdfile-format-support.mdindex.mdlanguage-framework-support.mdstyling-formatting.mdutility-functions.md
tile.json

cli-tool.mddocs/

CLI Tool

Interactive command line interface for project setup, configuration migration, and ESLint configuration wizard.

Capabilities

Main CLI Function

Interactive setup and migration wizard for ESLint configuration.

/**
 * Run the CLI setup and migration wizard
 * @param options - CLI execution options
 * @returns Promise that resolves when setup is complete
 */
function run(options?: CliRunOptions): Promise<void>;

interface CliRunOptions {
  /** Skip prompts and use default values */
  yes?: boolean;
  /** Framework templates to use: vue, react, svelte, astro */
  frameworks?: string[];
  /** Extra utilities to include: formatter, perfectionist, unocss */
  extra?: string[];
}

Usage Examples:

import { run } from "@antfu/eslint-config/cli";

// Interactive setup
await run();

// Skip prompts with defaults
await run({ yes: true });

// Pre-select Vue and formatter
await run({
  frameworks: ['vue'],
  extra: ['formatter'],
});

// Automated setup for React with all extras
await run({
  yes: true,
  frameworks: ['react'],
  extra: ['formatter', 'perfectionist', 'unocss'],
});

CLI Command Interface

Command line argument structure for the binary interface.

/**
 * CLI command interface accessible via binary
 * Available commands and options:
 * 
 * Default command: Run initialization or migration
 * Options:
 *   --yes, -y              Skip prompts and use default values
 *   --template, -t <items> Framework templates (vue|react|svelte|astro)
 *   --extra, -e <items>    Extra utilities (formatter|perfectionist|unocss)
 *   --help                 Show help information
 *   --version              Show version information
 */

Binary Usage:

# Interactive setup
npx @antfu/eslint-config

# Skip prompts
npx @antfu/eslint-config --yes

# With framework selection
npx @antfu/eslint-config --template vue --template react

# With extra utilities
npx @antfu/eslint-config --extra formatter --extra unocss

# Combined options
npx @antfu/eslint-config -y -t vue -e formatter -e perfectionist

CLI Setup Stages

Internal stages that the CLI wizard executes during setup.

/**
 * Update ESLint configuration files
 * Creates or updates eslint.config.js with selected options
 */
function updateEslintFiles(result: PromptResult): Promise<void>;

/**
 * Update package.json with dependencies and scripts
 * Adds ESLint scripts and installs required packages
 */
function updatePackageJson(result: PromptResult): Promise<void>;

/**
 * Update VS Code settings for ESLint integration
 * Configures .vscode/settings.json for optimal experience
 */
function updateVscodeSettings(result: PromptResult): Promise<void>;

interface PromptResult {
  /** Whether uncommitted changes were detected */
  uncommittedChanges: boolean;
  /** Selected frameworks */
  frameworks: FrameworkOption[];
  /** Selected extra utilities */
  extra?: ExtraLibrariesOption[];
  /** Whether to update VS Code settings */
  updateVscodeSettings: boolean;
}

Framework and Extra Options

Available framework templates and extra utilities.

type FrameworkOption = 'vue' | 'react' | 'svelte' | 'astro';
type ExtraLibrariesOption = 'formatter' | 'perfectionist' | 'unocss';

/** Available framework configurations */
const frameworkOptions: FrameworkOption[];

/** Available extra utility options */  
const extraOptions: ExtraLibrariesOption[];

/** Framework display information */
const frameworks: Record<FrameworkOption, {
  name: string;
  display: string;
  color?: string;
}>;

/** Extra utilities display information */
const extra: Record<ExtraLibrariesOption, {
  name: string;
  display: string;
  color?: string;
}>;

/** VS Code settings template string */
const vscodeSettingsString: string;

/** Framework prompt items for CLI */
const frameworkOptions: PromItem<FrameworkOption>[];

/** Available framework values */
const frameworks: FrameworkOption[];

/** Extra libraries prompt items for CLI */
const extraOptions: PromItem<ExtraLibrariesOption>[];

/** Available extra library values */
const extra: ExtraLibrariesOption[];

/** Dependency mapping for frameworks and extras */
const dependenciesMap: Record<string, string[]>;

interface PromItem<T> {
  label?: string;
  value: T;
  hint?: string;
}

CLI Utilities

Helper functions used by the CLI for git status checking and validation.

/**
 * Check if git working directory is clean
 * @returns Boolean indicating if no uncommitted changes exist
 */
function isGitClean(): boolean;

/**
 * Generate ESLint configuration file content
 * @param mainConfig - Main configuration string
 * @param additionalConfigs - Additional configuration strings
 * @returns Generated ESLint config file content
 */
function getEslintConfigContent(mainConfig: string, additionalConfigs?: string[]): string;

Usage Examples:

import { isGitClean } from "@antfu/eslint-config/cli";

// Check before making changes
if (!isGitClean()) {
  console.warn('Uncommitted changes detected');
  // Prompt user for confirmation
}

Generated Configuration Examples

Examples of configurations the CLI generates based on selections.

Basic JavaScript/TypeScript:

// eslint.config.js
import antfu from '@antfu/eslint-config'

export default antfu()

Vue.js with TypeScript and formatter:

// eslint.config.js
import antfu from '@antfu/eslint-config'

export default antfu({
  vue: true,
  typescript: true,
  formatters: {
    css: 'prettier',
    html: 'prettier',
    markdown: 'prettier',
  },
})

React with Next.js:

// eslint.config.js
import antfu from '@antfu/eslint-config'

export default antfu({
  react: true,
  nextjs: true,
  typescript: true,
  formatters: true,
}, {
  // Custom rules
  rules: {
    'react/prop-types': 'off',
  },
})

Package.json Script Generation

Standard scripts added to package.json during setup.

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

VS Code Settings Generation

VS Code workspace settings created for optimal ESLint integration.

{
  "eslint.experimental.useFlatConfig": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact", 
    "typescript",
    "typescriptreact",
    "vue",
    "html",
    "markdown",
    "json",
    "jsonc",
    "yaml",
    "toml"
  ],
  "eslint.codeAction.showDocumentation": {
    "enable": true
  }
}