0
# @umijs/fabric
1

2
@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.
3

4
## Package Information
5

6
- **Package Name**: @umijs/fabric
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @umijs/fabric --save-dev`
10

11
## Core Imports
12

13
Import individual configurations:
14

15
```javascript
16
const fabric = require('@umijs/fabric');
17

18
// Access configurations
19
const eslintConfig = fabric.eslint;           // Default ESLint config (softy)
20
const strictEslintConfig = fabric.strictEslint; // Strict ESLint config
21
const prettierConfig = fabric.prettier;         // Prettier config
22
const stylelintConfig = fabric.stylelint;       // Stylelint config
23
```
24

25
Direct imports for specific configurations:
26

27
```javascript
28
const eslintConfig = require('@umijs/fabric/dist/eslint');
29
const prettierConfig = require('@umijs/fabric/dist/prettier');
30
const stylelintConfig = require('@umijs/fabric/dist/stylelint');
31
```
32

33
## Basic Usage
34

35
### ESLint Configuration
36

37
```javascript
38
// .eslintrc.js
39
module.exports = {
40
  extends: [require.resolve('@umijs/fabric/dist/eslint')],
41
  rules: {
42
    // your custom rules
43
  },
44
};
45
```
46

47
### Prettier Configuration
48

49
```javascript
50
// .prettierrc.js
51
const fabric = require('@umijs/fabric');
52

53
module.exports = {
54
  ...fabric.prettier,
55
};
56
```
57

58
### Stylelint Configuration
59

60
```javascript
61
// .stylelintrc.js
62
module.exports = {
63
  extends: [require.resolve('@umijs/fabric/dist/stylelint')],
64
  rules: {
65
    // your custom rules
66
  },
67
};
68
```
69

70
### CLI Usage
71

72
```bash
73
# Validate commit messages (used in git hooks)
74
fabric verify-commit
75

76
# Show version
77
fabric --version
78

79
# Show help
80
fabric --help
81
```
82

83
## Architecture
84

85
@umijs/fabric is structured around several key components:
86

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

92
## Capabilities
93

94
### ESLint Configurations
95

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

98
```javascript { .api }
99
// Main configuration exports
100
interface FabricExports {
101
  eslint: ESLintConfig;           // Default (softy) configuration
102
  strictEslint: ESLintConfig;     // Strict configuration
103
  default: ESLintConfig;          // Alias for eslint
104
}
105

106
interface ESLintConfig {
107
  extends: string[];
108
  parser: string;
109
  plugins: string[];
110
  env: Record<string, boolean>;
111
  rules: Record<string, any>;
112
  settings: Record<string, any>;
113
  overrides?: Array<{
114
    files: string[];
115
    parser?: string;
116
    rules?: Record<string, any>;
117
    extends?: string[];
118
  }>;
119
  parserOptions: {
120
    ecmaFeatures: {
121
      jsx: boolean;
122
    };
123
    babelOptions: {
124
      presets: string[];
125
      plugins: Array<string | [string, any]>;
126
    };
127
    requireConfigFile: boolean;
128
    project?: string;
129
  };
130
}
131
```
132

133
[ESLint Configurations](./eslint-configs.md)
134

135
### Prettier Configuration
136

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

139
```javascript { .api }
140
interface PrettierConfig {
141
  singleQuote: boolean;
142
  trailingComma: string;
143
  printWidth: number;
144
  proseWrap: string;
145
  endOfLine: string;
146
  overrides: Array<{
147
    files: string;
148
    options: {
149
      parser: string;
150
    };
151
  }>;
152
}
153
```
154

155
[Prettier Configuration](./prettier-config.md)
156

157
### Stylelint Configuration
158

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

161
```javascript { .api }
162
interface StylelintConfig {
163
  extends: string[];
164
  plugins: string[];
165
  rules: Record<string, any>;
166
  overrides: Array<{
167
    files: string[];
168
    customSyntax: string;
169
  }>;
170
  ignoreFiles: string[];
171
}
172
```
173

174
[Stylelint Configuration](./stylelint-config.md)
175

176
### CLI Tool
177

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

180
```bash { .api }
181
# CLI commands and options
182
fabric verify-commit    # Validate git commit messages
183
fabric --version        # Display package version
184
fabric --help          # Show help information
185
```
186

187
[CLI Tool](./cli-tool.md)
188

189
## Environment Variables
190

191
### `DISABLE_TYPE_AWARE`
192
- **Type**: Environment variable
193
- **Purpose**: Disables TypeScript type-aware ESLint rules when set
194
- **Default**: undefined (type-aware rules enabled)
195

196
### `GIT_PARAMS` / `HUSKY_GIT_PARAMS`
197
- **Type**: Environment variables
198
- **Purpose**: Git hook parameters for commit message file path
199
- **Usage**: Used by `verify-commit` command to read commit message content