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

styling-formatting.mddocs/

Styling & Formatting

Code style enforcement through ESLint Stylistic and external formatter integration for consistent code appearance.

Capabilities

Stylistic Configuration

Code formatting and style rules using ESLint Stylistic plugin.

/**
 * Stylistic configuration for code formatting rules
 * @param options - Stylistic configuration options
 * @returns ESLint config for code style rules
 */
function stylistic(
  options?: StylisticConfig & OptionsOverrides & { lessOpinionated?: boolean }
): Promise<TypedFlatConfigItem[]>;

interface StylisticConfig {
  /** Indentation: number of spaces or 'tab' */
  indent?: number | 'tab';
  /** Quote style preference */
  quotes?: 'single' | 'double';
  /** Whether to enable JSX-specific stylistic rules */
  jsx?: boolean;
  /** Whether to require semicolons */
  semi?: boolean;
}

Usage Examples:

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

// Basic stylistic config with defaults
const stylisticConfig = await stylistic();

// Custom style preferences
const stylisticConfigCustom = await stylistic({
  indent: 4,
  quotes: 'double',
  semi: true,
  jsx: true,
  lessOpinionated: false,
  overrides: {
    '@stylistic/comma-dangle': ['error', 'always-multiline'],
    '@stylistic/brace-style': ['error', '1tbs'],
  },
});

External Formatters Configuration

Integration with external formatters like Prettier and dprint for non-JavaScript files.

/**
 * External formatters configuration for various file types
 * @param options - Formatter configuration options or true for all defaults
 * @param stylistic - Stylistic configuration to align with
 * @returns ESLint config for external formatters
 */
function formatters(
  options?: OptionsFormatters | true,
  stylistic?: StylisticConfig
): Promise<TypedFlatConfigItem[]>;

interface OptionsFormatters {
  /** Enable CSS formatting support */
  css?: 'prettier' | boolean;
  /** Enable HTML formatting support */
  html?: 'prettier' | boolean;
  /** Enable XML formatting support */
  xml?: 'prettier' | boolean;
  /** Enable SVG formatting support */
  svg?: 'prettier' | boolean;
  /** Enable Markdown formatting support */
  markdown?: 'prettier' | 'dprint' | boolean;
  /** Enable GraphQL formatting support */
  graphql?: 'prettier' | boolean;
  /** Enable Astro formatting support */
  astro?: 'prettier' | boolean;
  /** Custom Prettier options */
  prettierOptions?: VendoredPrettierOptions;
  /** Custom dprint options */
  dprintOptions?: boolean;
  /** Slidev markdown plugin support */
  slidev?: boolean | { files?: string[] };
}

Usage Examples:

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

// Enable all formatters with defaults
const formattersConfig = await formatters(true);

// Selective formatter configuration
const formattersConfigCustom = await formatters({
  css: 'prettier',
  html: 'prettier',
  markdown: 'dprint', // Use dprint for markdown
  astro: 'prettier',
  prettierOptions: {
    singleQuote: true,
    semi: false,
    tabWidth: 2,
  },
  slidev: {
    files: ['**/slides.md'],
  },
});

// Align with stylistic config
const formattersAligned = await formatters(
  {
    css: true,
    html: true,
  },
  {
    indent: 2,
    quotes: 'single',
    semi: false,
  }
);

Prettier Options Type

Vendored Prettier options for type safety without direct dependency.

interface VendoredPrettierOptions {
  /** Print width */
  printWidth?: number;
  /** Tab width */
  tabWidth?: number;
  /** Use tabs instead of spaces */
  useTabs?: boolean;
  /** Use semicolons */
  semi?: boolean;
  /** Use single quotes */
  singleQuote?: boolean;
  /** Quote properties in objects */
  quoteProps?: 'as-needed' | 'consistent' | 'preserve';
  /** Use single quotes in JSX */
  jsxSingleQuote?: boolean;
  /** Trailing commas */
  trailingComma?: 'none' | 'es5' | 'all';
  /** Bracket spacing in objects */
  bracketSpacing?: boolean;
  /** Bracket line in JSX */
  jsxBracketSameLine?: boolean;
  /** Arrow function parentheses */
  arrowParens?: 'avoid' | 'always';
  /** Prose wrap */
  proseWrap?: 'always' | 'never' | 'preserve';
  /** HTML whitespace sensitivity */
  htmlWhitespaceSensitivity?: 'css' | 'strict' | 'ignore';
  /** Vue script and style tag indentation */
  vueIndentScriptAndStyle?: boolean;
  /** End of line */
  endOfLine?: 'auto' | 'lf' | 'crlf' | 'cr';
  /** Embedded language formatting */
  embeddedLanguageFormatting?: 'auto' | 'off';
  /** Single attribute per line */
  singleAttributePerLine?: boolean;
  /** Prettier plugins */
  plugins?: string[];
}

type VendoredPrettierRuleOptions = VendoredPrettierOptions;

Stylistic Constants

Default stylistic configuration values.

const StylisticConfigDefaults: StylisticConfig;

Style Integration Examples

Common patterns for integrating stylistic rules with other configurations.

Disabling Prettier conflicts:

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

export default antfu({
  stylistic: {
    indent: 2,
    quotes: 'single',
    semi: false,
  },
  // Formatters handle these file types
  formatters: {
    css: 'prettier',
    html: 'prettier',
    markdown: 'prettier',
  },
});

Framework-specific styling:

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

export default antfu({
  vue: true,
  stylistic: {
    jsx: false, // Vue uses templates, not JSX
    indent: 2,
  },
  formatters: {
    css: 'prettier', // Format Vue style blocks
  },
});

Library vs Application styling:

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

// Library configuration (more strict)
export default antfu({
  type: 'lib',
  stylistic: {
    indent: 2,
    quotes: 'single',
    semi: false,
  },
  lessOpinionated: false,
});

// Application configuration (more lenient)
export default antfu({
  type: 'app',
  stylistic: {
    indent: 2,
    quotes: 'single',
    semi: false,
  },
  lessOpinionated: true,
});