or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cli-tool.mdeslint-configs.mdindex.mdprettier-config.mdstylelint-config.md
tile.json

prettier-config.mddocs/

Prettier Configuration

Pre-configured Prettier settings optimized for Umi.js projects with specific formatting rules and file-specific parser overrides.

Capabilities

Main Prettier Configuration

The core Prettier configuration with opinionated formatting rules.

/**
 * Main Prettier configuration object
 * Provides consistent formatting rules for JavaScript, TypeScript, and other files
 */
interface PrettierConfig {
  /** Use single quotes instead of double quotes */
  singleQuote: boolean;
  
  /** Add trailing commas wherever possible */
  trailingComma: "all" | "es5" | "none";
  
  /** Maximum line width before wrapping */
  printWidth: number;
  
  /** How to wrap prose (never wrap) */
  proseWrap: "always" | "never" | "preserve";
  
  /** Line ending style */
  endOfLine: "lf" | "crlf" | "cr" | "auto";
  
  /** File-specific parser overrides */
  overrides: Array<{
    files: string;
    options: {
      parser: string;
    };
  }>;
}

Default Configuration Values

The specific values used in @umijs/fabric's Prettier configuration.

const prettierConfig: PrettierConfig = {
  singleQuote: true,        // Use single quotes: 'hello' instead of "hello"
  trailingComma: 'all',     // Add trailing commas: [1, 2, 3,]
  printWidth: 100,          // Wrap lines at 100 characters
  proseWrap: 'never',       // Never wrap prose/markdown text
  endOfLine: 'lf',          // Use Unix line endings (\n)
  overrides: [
    {
      files: '.prettierrc',
      options: {
        parser: 'json',     // Parse .prettierrc as JSON
      },
    },
    {
      files: 'document.ejs',
      options: {
        parser: 'html',     // Parse .ejs files as HTML
      },
    },
  ],
};

File-Specific Parser Overrides

Configuration for handling specific file types with custom parsers.

interface PrettierOverride {
  /** File pattern to match */
  files: string;
  
  /** Parser options for matched files */
  options: {
    /** Parser to use for these files */
    parser: string;
  };
}

Supported Overrides:

  • .prettierrc files: Parsed as JSON for proper formatting of Prettier configuration files
  • document.ejs files: Parsed as HTML for EJS template files

Usage Examples

Basic Integration:

// .prettierrc.js
const fabric = require('@umijs/fabric');

module.exports = {
  ...fabric.prettier,
};

Custom Overrides:

// .prettierrc.js
const fabric = require('@umijs/fabric');

module.exports = {
  ...fabric.prettier,
  // Override specific rules
  printWidth: 120,
  singleQuote: false,
  // Add custom file overrides
  overrides: [
    ...fabric.prettier.overrides,
    {
      files: '*.md',
      options: {
        proseWrap: 'always',
        printWidth: 80,
      },
    },
  ],
};

Direct Configuration:

// .prettierrc.js
module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  printWidth: 100,
  proseWrap: 'never',
  endOfLine: 'lf',
  overrides: [
    {
      files: '.prettierrc',
      options: {
        parser: 'json',
      },
    },
    {
      files: 'document.ejs',
      options: {
        parser: 'html',
      },
    },
  ],
};

Package.json Scripts:

{
  "scripts": {
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,md}\"",
    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,md}\""
  }
}

Configuration Rationale

Single Quotes (singleQuote: true)

  • Consistent with JavaScript conventions
  • Fewer escape sequences needed in JSX
  • Cleaner appearance in most codebases

Trailing Commas (trailingComma: 'all')

  • Cleaner git diffs when adding/removing items
  • Easier code generation and manipulation
  • Supported in modern JavaScript environments

Print Width (printWidth: 100)

  • Balance between readability and horizontal space usage
  • Works well with modern wide screens
  • Allows for reasonable nesting depth

Prose Wrap (proseWrap: 'never')

  • Prevents unwanted line breaks in documentation
  • Preserves intended formatting in markdown files
  • Avoids issues with auto-generated documentation

Line Endings (endOfLine: 'lf')

  • Consistent Unix-style line endings
  • Prevents issues in cross-platform development
  • Standard for most web development projects

Integration with .prettierignore

The package includes a comprehensive .prettierignore template with common ignore patterns:

**/*.svg
package.json
.umi
.umi-production
/dist
.dockerignore
.DS_Store
.gitignore
.eslintignore
*.png
*.toml
docker
.editorconfig
Dockerfile*
.prettierignore
LICENSE
.eslintcache
*.lock
yarn-error.log
.history
CNAME
/build
/public
**/.umi/**
**/.umi-production/**
**/dist/**
**/lib/**
**/es/**
**/__snapshots__/**
**/.node/**

Usage:

# Copy the ignore file to your project
cp node_modules/@umijs/fabric/dist/.prettierignore .prettierignore