0
# Configuration Setup
1

2
Pre-configured ESLint configurations for quick setup with the UnoCSS ESLint plugin, supporting both legacy and modern ESLint config formats.
3

4
## Capabilities
5

6
### Recommended Configuration
7

8
Legacy ESLint configuration format for older ESLint versions and traditional setups.
9

10
```typescript { .api }
11
/**
12
 * Legacy ESLint configuration preset
13
 * Compatible with ESLint versions before v9
14
 */
15
interface RecommendedConfig {
16
  /** Plugin names to load */
17
  plugins: ["@unocss"];
18
  /** Rule configurations with recommended settings */
19
  rules: {
20
    "@unocss/order": "warn";
21
    "@unocss/order-attributify": "warn";
22
  };
23
}
24
```
25

26
**Usage Example:**
27

28
```javascript
29
// .eslintrc.js or .eslintrc.json
30
module.exports = {
31
  extends: ["@unocss/eslint-plugin/recommended"],
32
  // Additional customization
33
  rules: {
34
    "@unocss/blocklist": "error",
35
    "@unocss/enforce-class-compile": "warn"
36
  }
37
};
38
```
39

40
### Flat Configuration
41

42
Modern ESLint flat configuration format for ESLint v9+ and future-compatible setups.
43

44
```typescript { .api }
45
/**
46
 * Flat ESLint configuration preset  
47
 * Compatible with ESLint v9+ flat config format
48
 */
49
interface FlatConfig {
50
  /** Plugin instances mapped by name */
51
  plugins: {
52
    unocss: UnoCSSSLintPlugin;
53
  };
54
  /** Rule configurations with recommended settings */
55
  rules: {
56
    "unocss/order": "warn";
57
    "unocss/order-attributify": "warn"; 
58
  };
59
}
60
```
61

62
**Usage Example:**
63

64
```javascript
65
// eslint.config.js
66
import unocssPlugin from "@unocss/eslint-plugin";
67

68
export default [
69
  unocssPlugin.configs.flat,
70
  {
71
    // Additional customization
72
    rules: {
73
      "unocss/blocklist": "error",
74
      "unocss/enforce-class-compile": "warn"
75
    }
76
  }
77
];
78
```
79

80
## Configuration Patterns
81

82
### Basic Setup
83

84
**Legacy Format:**
85

86
```javascript
87
// .eslintrc.js
88
module.exports = {
89
  extends: ["@unocss/eslint-plugin/recommended"]
90
};
91
```
92

93
**Flat Format:**
94

95
```javascript
96
// eslint.config.js  
97
import unocssPlugin from "@unocss/eslint-plugin";
98

99
export default [unocssPlugin.configs.flat];
100
```
101

102
### Custom Rule Configuration
103

104
**Legacy Format:**
105

106
```javascript
107
// .eslintrc.js
108
module.exports = {
109
  plugins: ["@unocss"],
110
  rules: {
111
    "@unocss/order": ["warn", {
112
      unoFunctions: ["clsx", "classnames", "cn"],
113
      unoVariables: ["^cls", "className$"]
114
    }],
115
    "@unocss/order-attributify": "warn",
116
    "@unocss/blocklist": "error",
117
    "@unocss/enforce-class-compile": ["error", {
118
      prefix: ":unocss:",
119
      enableFix: true
120
    }]
121
  }
122
};
123
```
124

125
**Flat Format:**
126

127
```javascript
128
// eslint.config.js
129
import unocssPlugin from "@unocss/eslint-plugin";
130

131
export default [
132
  {
133
    plugins: {
134
      unocss: unocssPlugin
135
    },
136
    rules: {
137
      "unocss/order": ["warn", {
138
        unoFunctions: ["clsx", "classnames", "cn"],
139
        unoVariables: ["^cls", "className$"]  
140
      }],
141
      "unocss/order-attributify": "warn",
142
      "unocss/blocklist": "error",
143
      "unocss/enforce-class-compile": ["error", {
144
        prefix: ":unocss:",
145
        enableFix: true
146
      }]
147
    }
148
  }
149
];
150
```
151

152
### UnoCSS Configuration Integration
153

154
Both configuration formats support UnoCSS config file integration:
155

156
```typescript { .api }
157
/**
158
 * ESLint settings for UnoCSS integration
159
 */
160
interface ESLintSettings {
161
  unocss?: {
162
    /** Path to UnoCSS configuration file */
163
    configPath?: string;
164
  };
165
}
166
```
167

168
**Legacy Format with Settings:**
169

170
```javascript
171
// .eslintrc.js
172
module.exports = {
173
  extends: ["@unocss/eslint-plugin/recommended"],
174
  settings: {
175
    unocss: {
176
      configPath: "./uno.config.ts"
177
    }
178
  }
179
};
180
```
181

182
**Flat Format with Settings:**
183

184
```javascript
185
// eslint.config.js
186
import unocssPlugin from "@unocss/eslint-plugin";
187

188
export default [
189
  unocssPlugin.configs.flat,
190
  {
191
    settings: {
192
      unocss: {
193
        configPath: "./uno.config.ts"
194
      }
195
    }
196
  }
197
];
198
```
199

200
## Framework-Specific Setup
201

202
### Vue Projects
203

204
**Legacy Configuration:**
205

206
```javascript
207
// .eslintrc.js
208
module.exports = {
209
  extends: [
210
    "@vue/typescript/recommended",
211
    "@unocss/eslint-plugin/recommended"
212
  ],
213
  parser: "vue-eslint-parser",
214
  parserOptions: {
215
    parser: "@typescript-eslint/parser"
216
  }
217
};
218
```
219

220
**Flat Configuration:**
221

222
```javascript
223
// eslint.config.js
224
import vue from "eslint-plugin-vue";
225
import unocssPlugin from "@unocss/eslint-plugin";
226

227
export default [
228
  ...vue.configs["flat/recommended"],
229
  unocssPlugin.configs.flat
230
];
231
```
232

233
### React/JSX Projects
234

235
**Legacy Configuration:**
236

237
```javascript
238
// .eslintrc.js  
239
module.exports = {
240
  extends: [
241
    "react-app",
242
    "@unocss/eslint-plugin/recommended"
243
  ],
244
  parserOptions: {
245
    ecmaFeatures: {
246
      jsx: true
247
    }
248
  }
249
};
250
```
251

252
**Flat Configuration:**
253

254
```javascript
255
// eslint.config.js
256
import react from "@eslint/js";
257
import unocssPlugin from "@unocss/eslint-plugin";
258

259
export default [
260
  react.configs.recommended,
261
  unocssPlugin.configs.flat
262
];
263
```
264

265
### Svelte Projects
266

267
**Legacy Configuration:**
268

269
```javascript
270
// .eslintrc.js
271
module.exports = {
272
  extends: ["@unocss/eslint-plugin/recommended"],
273
  parser: "svelte-eslint-parser",
274
  parserOptions: {
275
    parser: "@typescript-eslint/parser"  
276
  }
277
};
278
```
279

280
**Flat Configuration:**
281

282
```javascript
283
// eslint.config.js
284
import svelte from "eslint-plugin-svelte";  
285
import unocssPlugin from "@unocss/eslint-plugin";
286

287
export default [
288
  ...svelte.configs.recommended,
289
  unocssPlugin.configs.flat
290
];
291
```
292

293
### Rule Severity Levels
294

295
All rules support standard ESLint severity levels:
296

297
```typescript { .api }
298
type ESLintSeverity = "off" | "warn" | "error" | 0 | 1 | 2;
299

300
interface RuleConfiguration {
301
  /** Rule severity level */
302
  [ruleName: string]: ESLintSeverity | [ESLintSeverity, ...any[]];
303
}
304
```
305

306
**Configuration Examples:**
307

308
```javascript
309
{
310
  rules: {
311
    // Disable rule
312
    "unocss/order": "off",
313
    
314
    // Warning level
315
    "unocss/order-attributify": "warn",
316
    
317
    // Error level  
318
    "unocss/blocklist": "error",
319
    
320
    // With options
321
    "unocss/enforce-class-compile": ["error", { 
322
      prefix: ":uno:",
323
      enableFix: false 
324
    }]
325
  }
326
}
327
```