0
# @unocss/eslint-config
1

2
ESLint configuration for UnoCSS projects that provides ready-to-use ESLint rules and configurations to help developers maintain code quality and consistency when working with UnoCSS utility classes and directives. The package supports both legacy and flat ESLint configurations through separate entry points.
3

4
## Package Information
5

6
- **Package Name**: @unocss/eslint-config
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @unocss/eslint-config`
10

11
## Core Imports
12

13
```typescript
14
import config from "@unocss/eslint-config";
15
```
16

17
For flat configuration:
18

19
```typescript
20
import flatConfig from "@unocss/eslint-config/flat";
21
```
22

23
CommonJS support:
24

25
```javascript
26
const config = require("@unocss/eslint-config");
27
const flatConfig = require("@unocss/eslint-config/flat");
28
```
29

30
## Basic Usage
31

32
**Legacy ESLint Configuration:**
33

34
```javascript
35
// .eslintrc.js
36
module.exports = {
37
  extends: ["@unocss/eslint-config"],
38
  // Your other config...
39
};
40
```
41

42
**Flat ESLint Configuration:**
43

44
```javascript
45
// eslint.config.js
46
import unocssConfig from "@unocss/eslint-config/flat";
47

48
export default [
49
  unocssConfig,
50
  // Your other config...
51
];
52
```
53

54
## Architecture
55

56
@unocss/eslint-config is a lightweight wrapper around @unocss/eslint-plugin that provides:
57

58
- **Legacy Configuration**: Traditional extends-based configuration format for older ESLint setups
59
- **Flat Configuration**: New flat configuration format for modern ESLint (v9+)
60
- **Zero Configuration**: Ready-to-use configurations with sensible defaults
61
- **Plugin Integration**: Seamless integration with @unocss/eslint-plugin rules
62

63
## Capabilities
64

65
### Legacy ESLint Configuration
66

67
Traditional ESLint configuration object that extends the UnoCSS plugin's recommended configuration.
68

69
```typescript { .api }
70
/**
71
 * Legacy ESLint configuration object for traditional .eslintrc files
72
 * Extends the @unocss/eslint-plugin recommended configuration
73
 */
74
declare const config: {
75
  extends: ["plugin:@unocss/recommended"];
76
};
77

78
export default config;
79
```
80

81
**Usage:**
82

83
```javascript
84
// .eslintrc.js
85
module.exports = {
86
  extends: ["@unocss/eslint-config"],
87
  rules: {
88
    // Override or add additional rules if needed
89
  },
90
};
91
```
92

93
```json
94
// .eslintrc.json
95
{
96
  "extends": ["@unocss/eslint-config"]
97
}
98
```
99

100
### Flat ESLint Configuration
101

102
Flat configuration object for the new ESLint configuration format (ESLint v9+).
103

104
```typescript { .api }
105
/**
106
 * Flat ESLint configuration object for eslint.config.js files
107
 * Uses the @unocss/eslint-plugin flat configuration
108
 */
109
declare const flatConfig: ESLintFlatConfig;
110

111
export default flatConfig;
112
```
113

114
**Usage:**
115

116
```javascript
117
// eslint.config.js
118
import unocssConfig from "@unocss/eslint-config/flat";
119

120
export default [
121
  unocssConfig,
122
  {
123
    // Your additional configuration
124
    rules: {
125
      // Override or add rules
126
    },
127
  },
128
];
129
```
130

131
**TypeScript usage:**
132

133
```typescript
134
// eslint.config.ts
135
import type { Linter } from "eslint";
136
import unocssConfig from "@unocss/eslint-config/flat";
137

138
const config: Linter.FlatConfig[] = [
139
  unocssConfig,
140
  {
141
    rules: {
142
      // Your rules
143
    },
144
  },
145
];
146

147
export default config;
148
```
149

150
## Types
151

152
```typescript { .api }
153
/**
154
 * ESLint flat configuration type
155
 * Represents the structure of modern ESLint flat configuration objects
156
 */
157
interface ESLintFlatConfig {
158
  name?: string;
159
  files?: string[];
160
  ignores?: string[];
161
  languageOptions?: {
162
    ecmaVersion?: number;
163
    sourceType?: "script" | "module";
164
    parser?: any;
165
    parserOptions?: Record<string, any>;
166
  };
167
  plugins?: Record<string, any>;
168
  rules?: Record<string, any>;
169
  settings?: Record<string, any>;
170
}
171

172
/**
173
 * Legacy ESLint configuration type
174
 * Represents traditional .eslintrc configuration format
175
 */
176
interface ESLintLegacyConfig {
177
  extends?: string[];
178
  plugins?: string[];
179
  rules?: Record<string, any>;
180
  env?: Record<string, boolean>;
181
  parserOptions?: Record<string, any>;
182
  settings?: Record<string, any>;
183
}
184
```
185

186
## Configuration Details
187

188
Both configurations provide:
189

190
- **UnoCSS-specific linting rules** for utility class validation
191
- **Syntax support** for UnoCSS directives and patterns
192
- **Best practices enforcement** for UnoCSS usage
193
- **Error detection** for common UnoCSS mistakes
194

195
The configurations are designed to work seamlessly with UnoCSS projects and enforce consistent code quality standards for utility-first CSS approaches.