0
# Configuration Options
1

2
Comprehensive type system for configuring all aspects of the ESLint setup, from feature toggles to formatting options.
3

4
## Capabilities
5

6
### Formatter Options
7

8
Configuration for file formatters supporting multiple tools and file types.
9

10
```typescript { .api }
11
interface OptionsFormatters {
12
  /**
13
   * Enable formatting support for CSS, Less, Sass, and SCSS.
14
   * Currently only supports Prettier.
15
   */
16
  css?: 'prettier' | boolean;
17

18
  /**
19
   * Enable formatting support for HTML.
20
   * Currently only supports Prettier.
21
   */
22
  html?: 'prettier' | boolean;
23

24
  /**
25
   * Enable formatting support for XML.
26
   * Currently only supports Prettier.
27
   */
28
  xml?: 'prettier' | boolean;
29

30
  /**
31
   * Enable formatting support for SVG.
32
   * Currently only supports Prettier.
33
   */
34
  svg?: 'prettier' | boolean;
35

36
  /**
37
   * Enable formatting support for Markdown.
38
   * Support both Prettier and dprint.
39
   * When set to true, it will use Prettier.
40
   */
41
  markdown?: 'prettier' | 'dprint' | boolean;
42

43
  /**
44
   * Enable formatting support for GraphQL.
45
   */
46
  graphql?: 'prettier' | boolean;
47

48
  /**
49
   * Custom options for Prettier.
50
   * By default it's controlled by our own config.
51
   */
52
  prettierOptions?: any;
53

54
  /**
55
   * Custom options for dprint.
56
   * By default it's controlled by our own config.
57
   */
58
  dprintOptions?: boolean;
59
}
60
```
61

62
**Usage Examples:**
63

64
```typescript
65
import { createConfigForNuxt } from "@nuxt/eslint-config";
66

67
// Enable all formatters with Prettier
68
export default createConfigForNuxt({
69
  features: {
70
    formatters: {
71
      css: true,
72
      html: true,
73
      xml: true,
74
      svg: true,
75
      markdown: "prettier",
76
      graphql: true
77
    }
78
  }
79
});
80

81
// Mixed formatter configuration
82
export default createConfigForNuxt({
83
  features: {
84
    formatters: {
85
      css: "prettier",
86
      html: "prettier",
87
      markdown: "dprint", // Use dprint for markdown
88
      prettierOptions: {
89
        printWidth: 100,
90
        singleQuote: true,
91
        trailingComma: "es5"
92
      }
93
    }
94
  }
95
});
96

97
// Enable formatters with boolean shorthand
98
export default createConfigForNuxt({
99
  features: {
100
    formatters: true // Enables CSS, HTML, GraphQL with Prettier; SVG/XML if @prettier/plugin-xml is available
101
  }
102
});
103
```
104

105
### Stylistic Customization Options
106

107
Configuration for stylistic rules and formatting preferences, integrated with @stylistic/eslint-plugin.
108

109
```typescript { .api }
110
/**
111
 * Stylistic customization options from @stylistic/eslint-plugin
112
 * Controls code formatting and style preferences
113
 */
114
interface StylisticCustomizeOptions {
115
  /**
116
   * Indentation configuration
117
   * @default 2
118
   */
119
  indent?: number | 'tab';
120
  
121
  /**
122
   * Quote style preference
123
   * @default 'single'
124
   */
125
  quotes?: 'single' | 'double';
126
  
127
  /**
128
   * Semicolon usage
129
   * @default false
130
   */
131
  semi?: boolean;
132
  
133
  /**
134
   * Additional stylistic options
135
   */
136
  [key: string]: any;
137
}
138
```
139

140
**Usage Examples:**
141

142
```typescript
143
// Custom stylistic configuration
144
export default createConfigForNuxt({
145
  features: {
146
    stylistic: {
147
      indent: 4,
148
      quotes: "double",
149
      semi: true
150
    }
151
  }
152
});
153

154
// Tab-based indentation
155
export default createConfigForNuxt({
156
  features: {
157
    stylistic: {
158
      indent: "tab",
159
      quotes: "single",
160
      semi: false
161
    }
162
  }
163
});
164

165
// Enable with defaults
166
export default createConfigForNuxt({
167
  features: {
168
    stylistic: true // Uses: indent: 2, quotes: 'single', semi: false
169
  }
170
});
171
```
172

173
### Resolved Configuration Type
174

175
The internal resolved configuration type with all defaults applied and required fields populated.
176

177
```typescript { .api }
178
interface NuxtESLintConfigOptionsResolved {
179
  /** Resolved feature configuration with all defaults applied */
180
  features: Required<NotNill<NuxtESLintFeaturesOptions>>;
181
  /** Resolved directory configuration with all defaults applied */
182
  dirs: Required<NotNill<DirectoriesConfig>>;
183
}
184

185
/**
186
 * Utility type that excludes null and undefined
187
 */
188
type NotNill<T> = T extends null | undefined ? never : T;
189
```
190

191
### Awaitable Type
192

193
Generic utility type for handling synchronous and asynchronous values.
194

195
```typescript { .api }
196
/**
197
 * Type that can be a value or promise of that value
198
 */
199
type Awaitable<T> = T | Promise<T>;
200
```
201

202
**Usage Examples:**
203

204
```typescript
205
// Function that accepts both sync and async configs
206
function processConfig(config: Awaitable<ESLintConfig>) {
207
  // Handle both sync and async cases
208
  return Promise.resolve(config).then(resolvedConfig => {
209
    // Process the resolved config
210
    return resolvedConfig;
211
  });
212
}
213

214
// Using with different input types
215
processConfig({ rules: { "no-console": "warn" } }); // Sync
216
processConfig(import("./config.js")); // Async
217
```
218

219
### Default Resolution Behavior
220

221
Understanding how configuration options are resolved and defaults are applied.
222

223
```typescript
224
// Default values applied during resolution:
225
const defaults = {
226
  features: {
227
    standalone: true,
228
    stylistic: false,
229
    typescript: isPackageExists('typescript'), // Auto-detected
230
    tooling: false,
231
    formatters: false,
232
    nuxt: {},
233
    import: {}
234
  },
235
  dirs: {
236
    root: ['.', './app'], // Support both Nuxt 3 and 4 conventions
237
    src: [], // Defaults to root directories
238
    pages: [], // Defaults to src/pages for each src directory
239
    layouts: [], // Defaults to src/layouts for each src directory
240
    // ... other directories follow the same pattern
241
  }
242
};
243
```
244

245
**Usage Examples:**
246

247
```typescript
248
// Minimal config - uses all defaults
249
export default createConfigForNuxt();
250

251
// Partial config - merges with defaults
252
export default createConfigForNuxt({
253
  features: {
254
    typescript: { strict: true } // Only override specific options
255
  },
256
  dirs: {
257
    src: ["./src"] // Override specific directories
258
  }
259
});
260

261
// Understanding directory resolution
262
export default createConfigForNuxt({
263
  dirs: {
264
    root: ["./app"],
265
    src: ["./app"] // Will generate pages: ["./app/pages"], components: ["./app/components"], etc.
266
  }
267
});
268
```