0
# TypeScript Configuration
1

2
Enhanced ESLint configuration for TypeScript Nuxt.js applications. This package extends the base `@nuxtjs/eslint-config` with TypeScript-specific parser, plugins, and rules for comprehensive type-safe linting.
3

4
## Package Information
5

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

11
## Core Imports
12

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

15
```json
16
{
17
  "extends": ["@nuxtjs/eslint-config-typescript"]
18
}
19
```
20

21
For programmatic access to the configuration object:
22

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

27
## Basic Usage
28

29
1. Install the package and ESLint:
30

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

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

37
```json
38
{
39
  "extends": ["@nuxtjs/eslint-config-typescript"]
40
}
41
```
42

43
## Capabilities
44

45
### TypeScript ESLint Configuration Object
46

47
The package exports a complete ESLint configuration object that extends the base `@nuxtjs` configuration with TypeScript-specific enhancements.
48

49
```javascript { .api }
50
/**
51
 * TypeScript ESLint configuration object for Nuxt.js applications
52
 * Exported as CommonJS module.exports
53
 */
54
interface TypeScriptESLintConfig {
55
  /** Extended configurations including the base @nuxtjs config */
56
  extends: ['@nuxtjs'];
57
  /** TypeScript-specific ESLint plugins */
58
  plugins: ['@typescript-eslint'];
59
  /** Vue ESLint parser for .vue files with TypeScript support */
60
  parser: 'vue-eslint-parser';
61
  /** Parser options for TypeScript integration */
62
  parserOptions: TypeScriptParserOptions;
63
  /** TypeScript-specific ESLint rules */
64
  rules: TypeScriptRulesConfig;
65
  /** TypeScript-specific import settings */
66
  settings: TypeScriptImportSettings;
67
}
68
```
69

70
### Parser Configuration
71

72
Configures Vue ESLint parser with TypeScript parser for comprehensive TypeScript support in Vue files.
73

74
```javascript { .api }
75
interface TypeScriptParserOptions {
76
  /** TypeScript ESLint parser for processing TypeScript code */
77
  parser: '@typescript-eslint/parser';
78
}
79
```
80

81
**Usage**: The configuration uses `vue-eslint-parser` as the main parser for `.vue` files, with `@typescript-eslint/parser` as the TypeScript parser for `<script>` blocks.
82

83
### Plugin Configuration
84

85
TypeScript-specific ESLint plugins providing additional TypeScript rules.
86

87
```javascript { .api }
88
/**
89
 * TypeScript ESLint plugins
90
 */
91
type TypeScriptPluginConfig = [
92
  /** TypeScript ESLint plugin for TypeScript-specific rules */
93
  '@typescript-eslint'
94
];
95
```
96

97
### Rules Configuration
98

99
TypeScript-specific ESLint rules that override and enhance the base configuration.
100

101
```javascript { .api }
102
interface TypeScriptRulesConfig {
103
  /** 
104
   * TypeScript version of no-unused-vars with argument pattern support
105
   * Allows unused parameters starting with underscore
106
   */
107
  '@typescript-eslint/no-unused-vars': ['error', { 
108
    args: 'all'; 
109
    argsIgnorePattern: '^_'; 
110
  }];
111
  
112
  /** 
113
   * Disable base no-unused-vars rule (replaced by TypeScript version)
114
   * Required per TypeScript ESLint documentation
115
   */
116
  'no-unused-vars': 'off';
117
  
118
  /** 
119
   * Disable no-undef rule for TypeScript files
120
   * TypeScript compiler handles undefined variable checking
121
   */
122
  'no-undef': 'off';
123
}
124
```
125

126
**Rule Details:**
127

128
- **`@typescript-eslint/no-unused-vars`**: Enhanced unused variable detection with TypeScript type information
129
- **`no-unused-vars: 'off'`**: Base rule disabled to prevent conflicts with TypeScript rule
130
- **`no-undef: 'off'`**: Disabled as TypeScript compiler provides superior undefined variable checking
131

132
### Import Settings Configuration
133

134
TypeScript-specific import resolution settings for proper module resolution.
135

136
```javascript { .api }
137
interface TypeScriptImportSettings {
138
  /** Parser configuration for TypeScript files */
139
  'import/parsers': {
140
    /** Use TypeScript parser for .ts and .tsx files */
141
    '@typescript-eslint/parser': ['.ts', '.tsx'];
142
  };
143
  /** Import resolver configuration */
144
  'import/resolver': {
145
    /** TypeScript import resolver for path resolution */
146
    typescript: {};
147
  };
148
}
149
```
150

151
**Configuration Details:**
152

153
- **`import/parsers`**: Maps TypeScript parser to `.ts` and `.tsx` file extensions
154
- **`import/resolver`**: Enables TypeScript-aware import resolution using `eslint-import-resolver-typescript`
155

156
## Dependencies
157

158
### Runtime Dependencies
159

160
```javascript { .api }
161
interface TypeScriptPackageDependencies {
162
  /** Base Nuxt.js ESLint configuration */
163
  '@nuxtjs/eslint-config': '^11.0.0';
164
  /** TypeScript ESLint plugin for TypeScript-specific rules */
165
  '@typescript-eslint/eslint-plugin': '^5.36.1';
166
  /** TypeScript ESLint parser for parsing TypeScript code */
167
  '@typescript-eslint/parser': '^5.36.1';
168
  /** TypeScript import resolver for ESLint import plugin */
169
  'eslint-import-resolver-typescript': '^3.5.0';
170
  /** Import plugin for import statement validation */
171
  'eslint-plugin-import': '^2.26.0';
172
}
173
```
174

175
### Peer Dependencies
176

177
```javascript { .api }
178
interface TypeScriptPeerDependencies {
179
  /** ESLint core package required for configuration usage */
180
  eslint: '^8.23.0';
181
}
182
```
183

184
## Configuration Usage Patterns
185

186
### Basic TypeScript Nuxt.js Project
187

188
```json
189
{
190
  "root": true,
191
  "extends": ["@nuxtjs/eslint-config-typescript"]
192
}
193
```
194

195
### With Additional TypeScript Rules
196

197
```json
198
{
199
  "root": true,
200
  "extends": ["@nuxtjs/eslint-config-typescript"],
201
  "rules": {
202
    "@typescript-eslint/explicit-function-return-type": "warn"
203
  }
204
}
205
```
206

207
### Multi-Environment Configuration
208

209
```json
210
{
211
  "root": true,
212
  "extends": ["@nuxtjs/eslint-config-typescript"],
213
  "overrides": [
214
    {
215
      "files": ["*.ts", "*.tsx"],
216
      "rules": {
217
        "@typescript-eslint/strict-boolean-expressions": "error"
218
      }
219
    }
220
  ]
221
}
222
```
223

224
## Types
225

226
```javascript { .api }
227
/**
228
 * TypeScript ESLint rule severity levels
229
 */
230
type TypeScriptRuleSeverity = 'off' | 'warn' | 'error' | 0 | 1 | 2;
231

232
/**
233
 * TypeScript ESLint rule configuration
234
 */
235
type TypeScriptRuleConfig = TypeScriptRuleSeverity | [TypeScriptRuleSeverity, ...any[]];
236

237
/**
238
 * Complete TypeScript ESLint configuration structure
239
 */
240
interface TypeScriptESLintConfig {
241
  extends?: string | string[];
242
  plugins?: string[];
243
  parser?: string;
244
  parserOptions?: { [key: string]: any };
245
  settings?: { [key: string]: any };
246
  rules?: { [ruleName: string]: TypeScriptRuleConfig };
247
}
248
```