0
# @nuxt/eslint
1

2
@nuxt/eslint is an all-in-one ESLint integration for Nuxt applications that generates project-aware ESLint flat configuration files. It automatically detects Nuxt project settings and creates appropriate ESLint configurations, with optional development server integration for real-time linting. The module serves as a bridge between Nuxt's development environment and ESLint's code quality checks, offering seamless integration that adapts to the specific requirements of each Nuxt project.
3

4
## Package Information
5

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

11
## Core Imports
12

13
```typescript
14
import { defineNuxtConfig } from "@nuxt/nuxt/config";
15
```
16

17
## Basic Usage
18

19
```typescript
20
// nuxt.config.ts
21
export default defineNuxtConfig({
22
  modules: ['@nuxt/eslint'],
23
  eslint: {
24
    config: {
25
      autoInit: true,
26
      configFile: '.nuxt/eslint.config.mjs'
27
    },
28
    checker: {
29
      lintOnStart: true,
30
      emitWarning: true,
31
      emitError: true
32
    }
33
  }
34
})
35
```
36

37
## Architecture
38

39
@nuxt/eslint is built around several key components:
40

41
- **Module Registration**: Nuxt module that integrates with the Nuxt build system
42
- **Config Generation**: Automatic generation of ESLint flat configs based on project structure
43
- **Development Server Integration**: Optional real-time linting during development
44
- **DevTools Integration**: ESLint config inspector integration with Nuxt DevTools
45
- **Hook System**: Extensible addon system for custom ESLint configurations
46

47
## Capabilities
48

49
### Module Configuration
50

51
Core module options and setup for integrating ESLint with Nuxt applications.
52

53
```typescript { .api }
54
interface ModuleOptions {
55
  /** Options for ESLint flat config generation (.nuxt/eslint.config.mjs) */
56
  config?: ConfigGenOptions | boolean;
57
  /** Enable ESLint checker align with dev server or build process */
58
  checker?: CheckerOptions | boolean;
59
}
60
```
61

62
[Module Configuration](./module-configuration.md)
63

64
### Config Generation
65

66
Automatic ESLint configuration generation based on Nuxt project structure and settings.
67

68
```typescript { .api }
69
interface ConfigGenOptions extends NuxtESLintFeaturesOptions {
70
  /** File path to the generated ESLint config */
71
  configFile?: string;
72
  /** Create `eslint.config.mjs` file automatically if not exists */
73
  autoInit?: boolean;
74
  /** Override rootDir for the generated ESLint config */
75
  rootDir?: string;
76
  /** Options for DevTools integration */
77
  devtools?: DevToolsOptions;
78
}
79

80
interface DevToolsOptions {
81
  /** Enable ESLint config inspector in DevTools */
82
  enabled?: boolean | 'lazy';
83
  /** Port for the ESLint config inspector */
84
  port?: number;
85
}
86
```
87

88
[Config Generation](./config-generation.md)
89

90
### Development Server Integration
91

92
Real-time ESLint checking during development with Vite or Webpack integration.
93

94
```typescript { .api }
95
interface CheckerOptions {
96
  /** Use ESLint cache to improve performance */
97
  cache?: boolean;
98
  /** ESLint config type */
99
  configType?: 'flat' | 'eslintrc';
100
  /** Files to include for linting */
101
  include?: string[];
102
  /** Files to exclude from linting */
103
  exclude?: string[];
104
  /** ESLint formatter for the output */
105
  formatter?: string;
106
  /** Path to the ESLint module */
107
  eslintPath?: string;
108
  /** Lint on start */
109
  lintOnStart?: boolean;
110
  /** The warnings found will printed */
111
  emitWarning?: boolean;
112
  /** The errors found will printed */
113
  emitError?: boolean;
114
  /** Run ESLint fix */
115
  fix?: boolean;
116
  /** Vite specific options */
117
  vite?: ViteCheckerOptions;
118
  /** Webpack specific options */
119
  webpack?: WebpackCheckerOptions;
120
}
121
```
122

123
[Development Server Integration](./dev-server-integration.md)
124

125
### Extensibility
126

127
Hook system and addon support for extending ESLint configuration.
128

129
```typescript { .api }
130
interface ESLintConfigGenAddon {
131
  name: string;
132
  getConfigs: () => Awaitable<ESLintConfigGenAddonResult | undefined>;
133
}
134

135
interface ESLintConfigGenAddonResult {
136
  /** Imports statements to add to the generated ESLint config */
137
  imports?: Import[];
138
  /** Flat config items, should be stringified lines */
139
  configs?: string[];
140
}
141

142
type Awaitable<T> = T | Promise<T>;
143
```
144

145
[Extensibility](./extensibility.md)
146

147
## Types
148

149
```typescript { .api }
150
type Awaitable<T> = T | Promise<T>;
151

152
interface Import {
153
  from: string;
154
  name: string;
155
  as?: string;
156
}
157

158
// External types from dependencies
159
interface NuxtESLintFeaturesOptions {
160
  /** Setup basic JavaScript, TypeScript and Vue plugins and rules */
161
  standalone?: boolean;
162
  /** Enable rules for Nuxt module authors or library authors */
163
  tooling?: boolean | ToolingOptions;
164
  /** Enable the import plugin */
165
  import?: boolean | ImportPluginOptions;
166
  /** Enable stylistic ESLint rules for formatting and code style check */
167
  stylistic?: boolean | StylisticCustomizeOptions;
168
  /** Enable formatters to handling formatting for different file types */
169
  formatters?: boolean | OptionsFormatters;
170
  /** Options for Nuxt specific rules */
171
  nuxt?: NuxtSpecificOptions;
172
  /** Enable TypeScript support */
173
  typescript?: boolean | {
174
    strict?: boolean;
175
    tsconfigPath?: string;
176
  };
177
}
178

179
interface ViteCheckerOptions {
180
  /** Run linting in a worker thread */
181
  lintInWorker?: boolean;
182
  [key: string]: any;
183
}
184

185
interface WebpackCheckerOptions {
186
  /** Context directory for linting */
187
  context?: string;
188
  /** Files pattern to lint */
189
  files?: string[];
190
  /** Only lint changed files */
191
  lintDirtyModulesOnly?: boolean;
192
  [key: string]: any;
193
}
194

195
interface FlatConfigComposer {
196
  /** Clone the composer */
197
  clone(): FlatConfigComposer;
198
  /** Append configurations */
199
  append(...configs: any[]): FlatConfigComposer;
200
  /** Execute callback when resolved */
201
  onResolved(callback: (configs: any[]) => void): FlatConfigComposer;
202
}
203

204
interface NuxtESLintConfigOptionsResolved {
205
  features: any;
206
  dirs: any;
207
}
208

209
// Configuration option types from @nuxt/eslint-config/flat
210
interface ToolingOptions {
211
  [key: string]: any;
212
}
213

214
interface ImportPluginOptions {
215
  [key: string]: any;
216
}
217

218
interface StylisticCustomizeOptions {
219
  [key: string]: any;
220
}
221

222
interface OptionsFormatters {
223
  [key: string]: any;
224
}
225

226
interface NuxtSpecificOptions {
227
  [key: string]: any;
228
}
229
```