0
# @nuxtjs/eslint-config
1

2
@nuxtjs/eslint-config is a comprehensive ESLint configuration specifically designed for Nuxt.js applications. It provides a curated set of linting rules that enforce code quality standards, Vue.js best practices, and import management for modern Nuxt.js development workflows.
3

4
## Package Information
5

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

11
## Core Imports
12

13
ESLint configuration packages are consumed by extending them in `.eslintrc` files:
14

15
```json
16
{
17
  "extends": ["@nuxtjs"]
18
}
19
```
20

21
For programmatic access to the configuration object:
22

23
```javascript
24
const config = require("@nuxtjs/eslint-config");
25
```
26

27
## Basic Usage
28

29
1. Install the package and ESLint:
30

31
```bash
32
npm install -D @nuxtjs/eslint-config eslint
33
```
34

35
2. Create a `.eslintrc` file in your project root:
36

37
```json
38
{
39
  "extends": ["@nuxtjs"]
40
}
41
```
42

43
3. Optionally add parser configuration for Babel or TypeScript:
44

45
```json
46
{
47
  "root": true,
48
  "parser": "@babel/eslint-parser",
49
  "parserOptions": {
50
    "sourceType": "module"
51
  },
52
  "extends": ["@nuxtjs"]
53
}
54
```
55

56
## Capabilities
57

58
### ESLint Configuration Object
59

60
The package exports a complete ESLint configuration object that defines environment settings, extended configurations, plugins, and rules specifically tailored for Nuxt.js applications.
61

62
```javascript { .api }
63
/**
64
 * Main ESLint configuration object for Nuxt.js applications
65
 * Exported as CommonJS module.exports
66
 */
67
interface ESLintConfig {
68
  /** Environment settings for browser and Node.js */
69
  env: {
70
    browser: boolean;
71
    node: boolean;
72
  };
73
  /** Extended ESLint configurations */
74
  extends: string[];
75
  /** ESLint plugins used for additional rules */
76
  plugins: string[];
77
  /** Settings for import resolution and other configurations */
78
  settings: {
79
    'import/resolver': {
80
      node: {
81
        extensions: string[];
82
      };
83
    };
84
  };
85
  /** ESLint rules configuration organized by category */
86
  rules: ESLintRulesConfig;
87
  /** File-specific rule overrides */
88
  overrides: ESLintOverride[];
89
}
90
```
91

92
### Environment Configuration
93

94
Configures ESLint to recognize both browser and Node.js environment globals.
95

96
```javascript { .api }
97
interface EnvironmentConfig {
98
  /** Enable browser environment globals (window, document, etc.) */
99
  browser: true;
100
  /** Enable Node.js environment globals (process, __dirname, etc.) */
101
  node: true;
102
}
103
```
104

105
### Extended Configurations
106

107
The configuration extends several base ESLint configurations for comprehensive coverage.
108

109
```javascript { .api }
110
/**
111
 * Extended ESLint configurations
112
 * These provide the foundation rules that are enhanced by custom rules
113
 */
114
type ExtendedConfigs = [
115
  /** ESLint Standard configuration for general JavaScript rules */
116
  'standard',
117
  /** Import plugin error rules for import statement validation */
118
  'plugin:import/errors',
119
  /** Import plugin warning rules for import statement best practices */
120
  'plugin:import/warnings',
121
  /** Vue.js recommended rules for Vue component development */
122
  'plugin:vue/recommended'
123
];
124
```
125

126
### Plugin Configuration
127

128
ESLint plugins that provide additional rules beyond the standard set.
129

130
```javascript { .api }
131
/**
132
 * ESLint plugins providing additional rules
133
 */
134
type PluginConfig = [
135
  /** Unicorn plugin for code quality and best practices */
136
  'unicorn',
137
  /** Vue plugin for Vue.js specific linting */
138
  'vue'
139
];
140
```
141

142
### Import Resolver Settings
143

144
Configuration for resolving import statements in JavaScript modules.
145

146
```javascript { .api }
147
interface ImportResolverSettings {
148
  'import/resolver': {
149
    /** Node.js resolver configuration */
150
    node: {
151
      /** File extensions to resolve */
152
      extensions: ['.js', '.mjs'];
153
    };
154
  };
155
}
156
```
157

158
### Rules Configuration
159

160
Comprehensive set of ESLint rules organized by functional categories.
161

162
```javascript { .api }
163
interface ESLintRulesConfig {
164
  /** Import statement ordering and validation rules */
165
  'import/order': 'error';
166
  'import/first': 'error';
167
  'import/no-mutable-exports': 'error';
168
  'import/no-unresolved': 'off';
169
  
170
  /** Arrow function and async/await rules */
171
  'arrow-parens': ['error', 'as-needed', { requireForBlockBody: true }];
172
  'generator-star-spacing': 'off';
173
  
174
  /** Development vs production environment rules */
175
  'no-debugger': 'error' | 'warn'; // 'error' in production, 'warn' in development
176
  'no-console': 'error' | 'warn';   // 'error' in production, 'warn' in development
177
  
178
  /** Variable declaration and usage rules */
179
  'prefer-const': ['error', { destructuring: 'any', ignoreReadBeforeAssign: false }];
180
  'no-lonely-if': 'error';
181
  'curly': ['error', 'all'];
182
  'require-await': 'error';
183
  'dot-notation': 'error';
184
  'no-var': 'error';
185
  'object-shorthand': 'error';
186
  'no-useless-rename': 'error';
187
  
188
  /** Unicorn plugin rules for code quality */
189
  'unicorn/error-message': 'error';
190
  'unicorn/escape-case': 'error';
191
  'unicorn/no-array-instanceof': 'error';
192
  'unicorn/no-new-buffer': 'error';
193
  'unicorn/no-unsafe-regex': 'off';
194
  'unicorn/number-literal-case': 'error';
195
  'unicorn/prefer-exponentiation-operator': 'error';
196
  'unicorn/prefer-includes': 'error';
197
  'unicorn/prefer-starts-ends-with': 'error';
198
  'unicorn/prefer-text-content': 'error';
199
  'unicorn/prefer-type-error': 'error';
200
  'unicorn/throw-new-error': 'error';
201
  
202
  /** Vue.js specific rules */
203
  'vue/no-parsing-error': ['error', { 'x-invalid-end-tag': false }];
204
  'vue/max-attributes-per-line': ['error', { singleline: 5 }];
205
}
206
```
207

208
### File Override Configuration
209

210
Special rule configurations for Nuxt.js-specific file patterns.
211

212
```javascript { .api }
213
interface ESLintOverride {
214
  /** File patterns that match Nuxt.js pages, layouts, and app files */
215
  files: [
216
    '**/pages/**/*.{js,ts,vue}',
217
    '**/layouts/**/*.{js,ts,vue}',
218
    '**/app.{js,ts,vue}',
219
    '**/error.{js,ts,vue}'
220
  ];
221
  /** Rules to override for these specific files */
222
  rules: {
223
    /** Disable multi-word component name requirement for Nuxt.js conventions */
224
    'vue/multi-word-component-names': 'off';
225
  };
226
}
227
```
228

229
## Rule Categories
230

231
### General Code Rules
232

233
Rules for general JavaScript code quality and consistency:
234

235
- **Import Management**: Enforces import ordering, placement, and prevents mutable exports
236
- **Arrow Functions**: Controls parentheses usage in arrow functions based on body type
237
- **Development Controls**: Environment-aware debugger and console statement handling
238
- **Variable Declarations**: Prefers const over let, requires curly braces, enforces dot notation
239
- **Code Quality**: Prevents useless patterns and enforces modern JavaScript practices
240

241
### Unicorn Rules
242

243
Enhanced code quality rules from the eslint-plugin-unicorn:
244

245
- **Error Handling**: Requires error messages and proper error throwing patterns
246
- **Modern JavaScript**: Prefers modern methods like Array.isArray(), exponentiation operator
247
- **String Operations**: Prefers includes() over indexOf(), startsWith/endsWith over regex
248
- **DOM Operations**: Prefers textContent over innerText
249
- **Security**: Prevents deprecated Buffer constructor usage
250

251
### Vue.js Rules
252

253
Specialized rules for Vue.js component development:
254

255
- **Template Parsing**: Handles Vue.js template parsing with flexibility for invalid end tags
256
- **Component Formatting**: Allows up to 5 attributes per line in single-line tags
257
- **Nuxt.js Integration**: Disables multi-word component names for Nuxt.js conventions
258

259
## Dependencies
260

261
### Runtime Dependencies
262

263
```javascript { .api }
264
interface PackageDependencies {
265
  'eslint-config-standard': '^17.0.0';
266
  'eslint-plugin-import': '^2.26.0';
267
  'eslint-plugin-n': '^15.2.5';
268
  'eslint-plugin-node': '^11.1.0';
269
  'eslint-plugin-promise': '^6.0.1';
270
  'eslint-plugin-unicorn': '^43.0.2';
271
  'eslint-plugin-vue': '^9.4.0';
272
}
273
```
274

275
### Peer Dependencies
276

277
```javascript { .api }
278
interface PeerDependencies {
279
  /** ESLint core package required for configuration usage */
280
  eslint: '^8.23.0';
281
}
282
```
283

284
## Configuration Usage Patterns
285

286
### Basic Nuxt.js Project
287

288
```json
289
{
290
  "root": true,
291
  "extends": ["@nuxtjs"]
292
}
293
```
294

295
### With Babel Parser
296

297
```json
298
{
299
  "root": true,
300
  "parser": "@babel/eslint-parser",
301
  "parserOptions": {
302
    "sourceType": "module"
303
  },
304
  "extends": ["@nuxtjs"]
305
}
306
```
307

308
### With Additional Rules
309

310
```json
311
{
312
  "root": true,
313
  "extends": ["@nuxtjs"],
314
  "rules": {
315
    "no-console": "off"
316
  }
317
}
318
```
319

320
## Types
321

322
```javascript { .api }
323
/**
324
 * ESLint rule severity levels
325
 */
326
type RuleSeverity = 'off' | 'warn' | 'error' | 0 | 1 | 2;
327

328
/**
329
 * ESLint rule configuration can be severity only or array with options
330
 */
331
type RuleConfig = RuleSeverity | [RuleSeverity, ...any[]];
332

333
/**
334
 * Complete ESLint configuration object structure
335
 */
336
interface ESLintConfig {
337
  env?: { [key: string]: boolean };
338
  extends?: string | string[];
339
  plugins?: string[];
340
  settings?: { [key: string]: any };
341
  rules?: { [ruleName: string]: RuleConfig };
342
  overrides?: ESLintOverride[];
343
}
344

345
/**
346
 * File-specific rule overrides
347
 */
348
interface ESLintOverride {
349
  files: string | string[];
350
  rules?: { [ruleName: string]: RuleConfig };
351
}
352
```
353

354
### TypeScript Configuration
355

356
Enhanced ESLint configuration for TypeScript Nuxt.js applications, extending the base configuration with TypeScript-specific parser, plugins, and rules.
357

358
```javascript { .api }
359
/**
360
 * TypeScript ESLint configuration object for Nuxt.js applications
361
 * Extends the base @nuxtjs configuration with TypeScript support
362
 */
363
interface TypeScriptESLintConfig {
364
  /** Extended configurations including the base @nuxtjs config */
365
  extends: ['@nuxtjs'];
366
  /** TypeScript-specific ESLint plugins */
367
  plugins: ['@typescript-eslint'];
368
  /** Vue ESLint parser for .vue files */
369
  parser: 'vue-eslint-parser';
370
  /** Parser options for TypeScript support */
371
  parserOptions: {
372
    parser: '@typescript-eslint/parser';
373
  };
374
  /** TypeScript-specific ESLint rules */
375
  rules: {
376
    '@typescript-eslint/no-unused-vars': ['error', { args: 'all', argsIgnorePattern: '^_' }];
377
    'no-unused-vars': 'off';
378
    'no-undef': 'off';
379
  };
380
  /** TypeScript-specific import settings */
381
  settings: {
382
    'import/parsers': {
383
      '@typescript-eslint/parser': ['.ts', '.tsx'];
384
    };
385
    'import/resolver': {
386
      typescript: {};
387
    };
388
  };
389
}
390
```
391

392
[TypeScript Configuration](./typescript-config.md)