0
# @umijs/fabric
1

2
@umijs/fabric is a comprehensive collection of configuration files and utilities for code quality tools including ESLint, Prettier, and Stylelint. It provides opinionated, pre-configured settings specifically designed for UmiJS ecosystem projects and Ant Design Pro applications.
3

4
## Package Information
5

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

11
## Core Imports
12

13
```javascript
14
// CommonJS imports (primary method)
15
const { eslint, strictEslint, prettier, stylelint } = require("@umijs/fabric");
16

17
// Individual configuration imports
18
const eslintConfig = require("@umijs/fabric/dist/eslint");
19
const prettierConfig = require("@umijs/fabric/dist/prettier");
20
const stylelintConfig = require("@umijs/fabric/dist/stylelint");
21
```
22

23
## Basic Usage
24

25
```typescript
26
// .eslintrc.js
27
module.exports = {
28
  extends: [require.resolve('@umijs/fabric/dist/eslint')],
29
  rules: {
30
    // your custom rules
31
  },
32
};
33

34
// .prettierrc.js
35
const fabric = require('@umijs/fabric');
36
module.exports = {
37
  ...fabric.prettier,
38
};
39

40
// .stylelintrc.js
41
module.exports = {
42
  extends: [require.resolve('@umijs/fabric/dist/stylelint')],
43
  rules: {
44
    // your custom rules
45
  },
46
};
47
```
48

49
## Architecture
50

51
@umijs/fabric is organized into several key components:
52

53
- **Main Module** (`src/index.ts`): Exports all configuration objects as named exports
54
- **Configuration Modules**: Individual TypeScript modules for each tool (ESLint, Prettier, Stylelint)
55
- **CLI Tools**: Command-line utilities for code quality validation
56
- **Build System**: Compiles TypeScript source to distributable JavaScript in the `dist/` directory
57

58
The package provides a comprehensive ESLint configuration with automatic TypeScript project detection and environment-specific rule adjustments. Note that both `eslint` and `strictEslint` exports provide the same configuration.
59

60
## Capabilities
61

62
### ESLint Configuration
63

64
Pre-configured ESLint settings with React, TypeScript, Jest, and modern JavaScript support.
65

66
```typescript { .api }
67
/**
68
 * Main ESLint configuration object
69
 * Note: Both eslint and strictEslint export the same configuration
70
 */
71
const eslint: ESLintConfig;
72

73
/**
74
 * ESLint configuration object (same as eslint)
75
 * Note: Despite the name, this exports the same configuration as eslint
76
 */
77
const strictEslint: ESLintConfig;
78

79
/**
80
 * Default export - same as eslint configuration
81
 */
82
const default: ESLintConfig;
83

84
interface ESLintConfig {
85
  extends: string[];
86
  parser: string;
87
  plugins: string[];
88
  env: {
89
    browser: boolean;
90
    node: boolean;
91
    es6: boolean;
92
    mocha: boolean;
93
    jest: boolean;
94
    jasmine: boolean;
95
  };
96
  rules: Record<string, any>;
97
  settings: {
98
    'import/resolver': any;
99
    'import/parsers': Record<string, string[]>;
100
    'import/extensions': string[];
101
    'import/external-module-folders': string[];
102
    polyfills: string[];
103
    react: { version: string };
104
  };
105
  overrides: Array<any>;
106
  parserOptions: any;
107
}
108
```
109

110
[ESLint Configuration Details](./eslint-configuration.md)
111

112
### Prettier Configuration
113

114
Opinionated Prettier formatting configuration with sensible defaults.
115

116
```typescript { .api }
117
/**
118
 * Prettier configuration object
119
 */
120
const prettier: PrettierConfig;
121

122
interface PrettierConfig {
123
  singleQuote: boolean;
124
  trailingComma: 'all';
125
  printWidth: number;
126
  proseWrap: 'never';
127
  endOfLine: 'lf';
128
  overrides: Array<{
129
    files: string;
130
    options: {
131
      parser: string;
132
    };
133
  }>;
134
}
135
```
136

137
[Prettier Configuration Details](./prettier-configuration.md)
138

139
### Stylelint Configuration
140

141
CSS and SCSS linting configuration with support for CSS modules and modern CSS features.
142

143
```typescript { .api }
144
/**
145
 * Stylelint configuration object
146
 */
147
const stylelint: StylelintConfig;
148

149
interface StylelintConfig {
150
  extends: string[];
151
  plugins: string[];
152
  rules: Record<string, any>;
153
  ignoreFiles: string[];
154
}
155
```
156

157
[Stylelint Configuration Details](./stylelint-configuration.md)
158

159
### CLI Tools
160

161
Command-line utilities for code quality validation and commit message verification.
162

163
```bash { .api }
164
# Main CLI command
165
fabric [command] [options]
166

167
# Display version
168
fabric --version
169
fabric -v
170

171
# Display help
172
fabric --help
173
fabric -h
174

175
# Verify commit messages (used with git hooks)
176
fabric verify-commit
177
```
178

179
[CLI Tools Details](./cli-tools.md)
180

181
## Environment Variables
182

183
- **`DISABLE_TYPE_AWARE`**: When set, disables TypeScript type-aware ESLint rules for better performance
184
- **`GIT_PARAMS`** / **`HUSKY_GIT_PARAMS`**: Used by commit verification tool to read commit messages
185

186
## Project Detection
187

188
@umijs/fabric automatically detects project characteristics:
189

190
- **TypeScript Projects**: Detected by presence of `tsconfig.json`
191
- **File Type Preference**: Analyzes `src/` directory to determine if project uses more JavaScript or TypeScript files
192
- **Environment Contexts**: Configures rules based on detected frameworks and environments
193

194
## Integration Examples
195

196
### With UmiJS Projects
197

198
```javascript
199
// .umirc.ts
200
export default {
201
  eslint: {
202
    configFile: require.resolve('@umijs/fabric/dist/eslint'),
203
  },
204
};
205
```
206

207
### With Git Hooks (Husky)
208

209
```json
210
// package.json
211
{
212
  "husky": {
213
    "hooks": {
214
      "commit-msg": "fabric verify-commit"
215
    }
216
  }
217
}
218
```
219

220
### With IDE Integration
221

222
Most modern IDEs will automatically detect and use the configurations when they are properly set up in your project's configuration files (.eslintrc.js, .prettierrc.js, .stylelintrc.js).