CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-umijs--fabric

A collection of configuration files containing prettier, eslint, stylelint for the Umi.js ecosystem

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

@umijs/fabric

@umijs/fabric is a comprehensive collection of pre-configured linting and formatting configurations for JavaScript and TypeScript projects, specifically tailored for the Umi.js ecosystem. It provides ready-to-use ESLint, Prettier, and Stylelint configurations along with a CLI tool for commit message validation.

Package Information

  • Package Name: @umijs/fabric
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install @umijs/fabric --save-dev

Core Imports

Import individual configurations:

const fabric = require('@umijs/fabric');

// Access configurations
const eslintConfig = fabric.eslint;           // Default ESLint config (softy)
const strictEslintConfig = fabric.strictEslint; // Strict ESLint config
const prettierConfig = fabric.prettier;         // Prettier config
const stylelintConfig = fabric.stylelint;       // Stylelint config

Direct imports for specific configurations:

const eslintConfig = require('@umijs/fabric/dist/eslint');
const prettierConfig = require('@umijs/fabric/dist/prettier');
const stylelintConfig = require('@umijs/fabric/dist/stylelint');

Basic Usage

ESLint Configuration

// .eslintrc.js
module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/eslint')],
  rules: {
    // your custom rules
  },
};

Prettier Configuration

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

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

Stylelint Configuration

// .stylelintrc.js
module.exports = {
  extends: [require.resolve('@umijs/fabric/dist/stylelint')],
  rules: {
    // your custom rules
  },
};

CLI Usage

# Validate commit messages (used in git hooks)
fabric verify-commit

# Show version
fabric --version

# Show help
fabric --help

Architecture

@umijs/fabric is structured around several key components:

  • Configuration Objects: Pre-configured rule sets for ESLint, Prettier, and Stylelint
  • TypeScript Integration: Automatic TypeScript project detection and enhanced rules
  • CLI Tool: Command-line interface for git commit validation
  • Environment Adaptation: Conditional rule application based on project structure

Capabilities

ESLint Configurations

Provides both strict and lenient ESLint configurations with React, TypeScript, and modern JavaScript support.

// Main configuration exports
interface FabricExports {
  eslint: ESLintConfig;           // Default (softy) configuration
  strictEslint: ESLintConfig;     // Strict configuration
  default: ESLintConfig;          // Alias for eslint
}

interface ESLintConfig {
  extends: string[];
  parser: string;
  plugins: string[];
  env: Record<string, boolean>;
  rules: Record<string, any>;
  settings: Record<string, any>;
  overrides?: Array<{
    files: string[];
    parser?: string;
    rules?: Record<string, any>;
    extends?: string[];
  }>;
  parserOptions: {
    ecmaFeatures: {
      jsx: boolean;
    };
    babelOptions: {
      presets: string[];
      plugins: Array<string | [string, any]>;
    };
    requireConfigFile: boolean;
    project?: string;
  };
}

ESLint Configurations

Prettier Configuration

Pre-configured Prettier settings optimized for Umi.js projects with specific formatting rules.

interface PrettierConfig {
  singleQuote: boolean;
  trailingComma: string;
  printWidth: number;
  proseWrap: string;
  endOfLine: string;
  overrides: Array<{
    files: string;
    options: {
      parser: string;
    };
  }>;
}

Prettier Configuration

Stylelint Configuration

Comprehensive Stylelint configuration with CSS modules and SCSS/Less support.

interface StylelintConfig {
  extends: string[];
  plugins: string[];
  rules: Record<string, any>;
  overrides: Array<{
    files: string[];
    customSyntax: string;
  }>;
  ignoreFiles: string[];
}

Stylelint Configuration

CLI Tool

Command-line interface for commit message validation and package information.

# CLI commands and options
fabric verify-commit    # Validate git commit messages
fabric --version        # Display package version
fabric --help          # Show help information

CLI Tool

Environment Variables

DISABLE_TYPE_AWARE

  • Type: Environment variable
  • Purpose: Disables TypeScript type-aware ESLint rules when set
  • Default: undefined (type-aware rules enabled)

GIT_PARAMS / HUSKY_GIT_PARAMS

  • Type: Environment variables
  • Purpose: Git hook parameters for commit message file path
  • Usage: Used by verify-commit command to read commit message content
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@umijs/fabric@4.0.x
Publish Source
CLI
Badge
tessl/npm-umijs--fabric badge