0
# @nuxtjs/eslint-config-typescript
1

2
@nuxtjs/eslint-config-typescript provides a TypeScript-specific ESLint configuration for Nuxt.js projects. It extends the base @nuxtjs/eslint-config with TypeScript-specific rules and plugins, offering comprehensive TypeScript linting capabilities including Vue.js single-file component support.
3

4
## Package Information
5

6
- **Package Name**: @nuxtjs/eslint-config-typescript
7
- **Package Type**: npm
8
- **Language**: JavaScript (ESLint configuration)
9
- **Installation**: `npm install --save-dev @nuxtjs/eslint-config-typescript eslint`
10

11
## Core Imports
12

13
This package exports a single ESLint configuration object using CommonJS:
14

15
```javascript
16
const config = require("@nuxtjs/eslint-config-typescript");
17
```
18

19
ES modules (when using bundlers that support CommonJS imports):
20

21
```javascript
22
import config from "@nuxtjs/eslint-config-typescript";
23
```
24

25
## Basic Usage
26

27
### ESLint Configuration File
28

29
The most common usage is extending this configuration in your ESLint configuration:
30

31
```javascript
32
// .eslintrc.js
33
module.exports = {
34
  extends: ["@nuxtjs/eslint-config-typescript"]
35
};
36
```
37

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

45
### Direct Configuration Object Access
46

47
```javascript
48
const nuxtTsConfig = require("@nuxtjs/eslint-config-typescript");
49

50
// Access configuration properties
51
console.log(nuxtTsConfig.extends);    // ['@nuxtjs', 'plugin:@typescript-eslint/recommended']
52
console.log(nuxtTsConfig.plugins);    // ['@typescript-eslint']
53
console.log(nuxtTsConfig.parser);     // 'vue-eslint-parser'
54
```
55

56
## Architecture
57

58
@nuxtjs/eslint-config-typescript is built around a layered configuration approach:
59

60
- **Base Extension**: Extends `@nuxtjs` (base Nuxt ESLint config) and `plugin:@typescript-eslint/recommended` 
61
- **Parser Strategy**: Uses `vue-eslint-parser` as primary parser with `@typescript-eslint/parser` for TypeScript code blocks
62
- **Plugin Integration**: Integrates `@typescript-eslint` plugin for TypeScript-specific linting rules
63
- **Migration-Friendly Rules**: Disables strict TypeScript rules to ease JavaScript-to-TypeScript migration
64
- **Import Resolution**: Configures TypeScript-aware import resolution for `.ts` and `.tsx` files
65

66
## Capabilities
67

68
### ESLint Configuration Export
69

70
The package exports a complete ESLint configuration object optimized for TypeScript projects in the Nuxt.js ecosystem.
71

72
```javascript { .api }
73
/**
74
 * Complete ESLint configuration object for TypeScript projects
75
 * @returns ESLintConfig - Configuration object with extends, plugins, parser, rules, and settings
76
 */
77
module.exports: ESLintConfig;
78

79
interface ESLintConfig {
80
  /** Base configurations to extend - ["@nuxtjs", "plugin:@typescript-eslint/recommended"] */
81
  extends: ["@nuxtjs", "plugin:@typescript-eslint/recommended"];
82
  /** ESLint plugins to load - ["@typescript-eslint"] */
83
  plugins: ["@typescript-eslint"];
84
  /** Parser for JavaScript/TypeScript/Vue files - "vue-eslint-parser" */
85
  parser: "vue-eslint-parser";
86
  /** Parser configuration options */
87
  parserOptions: ParserOptions;
88
  /** ESLint rule configuration */
89
  rules: Rules;
90
  /** Additional plugin settings */
91
  settings: Settings;
92
}
93

94
interface ParserOptions {
95
  /** TypeScript parser for script blocks in Vue files - set to "@typescript-eslint/parser" */
96
  parser: "@typescript-eslint/parser";
97
}
98

99
interface Rules {
100
  /** TypeScript-specific unused variables rule - configured as error with options */
101
  "@typescript-eslint/no-unused-vars": ["error", UnusedVarsOptions];
102
  /** Disabled base no-unused-vars rule - set to "off" */
103
  "no-unused-vars": "off";
104
  /** Disabled no-undef rule for TypeScript - set to "off" */
105
  "no-undef": "off";
106
  /** TypeScript rules disabled for easier migration - all set to "off" */
107
  "@typescript-eslint/ban-ts-comment": "off";
108
  "@typescript-eslint/consistent-indexed-object-style": "off";
109
  "@typescript-eslint/naming-convention": "off";
110
  "@typescript-eslint/explicit-function-return-type": "off";
111
  "@typescript-eslint/explicit-member-accessibility": "off";
112
  "@typescript-eslint/no-explicit-any": "off";
113
  "@typescript-eslint/parameter-properties": "off";
114
  "@typescript-eslint/no-empty-interface": "off";
115
  "@typescript-eslint/ban-ts-ignore": "off";
116
  "@typescript-eslint/no-empty-function": "off";
117
  "@typescript-eslint/no-non-null-assertion": "off";
118
  "@typescript-eslint/explicit-module-boundary-types": "off";
119
  "@typescript-eslint/ban-types": "off";
120
  "@typescript-eslint/no-namespace": "off";
121
  "@typescript-eslint/triple-slash-reference": "off";
122
}
123

124
interface UnusedVarsOptions {
125
  /** Check all arguments - set to "all" */
126
  args: "all";
127
  /** Ignore arguments starting with underscore - regex pattern "^_" */
128
  argsIgnorePattern: "^_";
129
}
130

131
interface Settings {
132
  /** Import parser configuration for TypeScript files */
133
  "import/parsers": ImportParsers;
134
  /** Import resolver configuration */
135
  "import/resolver": ImportResolver;
136
}
137

138
interface ImportParsers {
139
  /** TypeScript parser for .ts and .tsx files - configured for [".ts", ".tsx"] */
140
  "@typescript-eslint/parser": [".ts", ".tsx"];
141
}
142

143
interface ImportResolver {
144
  /** TypeScript import resolution - empty configuration object enables default TypeScript resolution */
145
  typescript: {};
146
}
147
```
148

149
## Configuration Details
150

151
### Base Extensions
152

153
The configuration extends two base configurations:
154

155
- `@nuxtjs`: Base Nuxt.js ESLint configuration
156
- `plugin:@typescript-eslint/recommended`: Recommended TypeScript ESLint rules
157

158
### Plugins
159

160
- `@typescript-eslint`: TypeScript-specific ESLint plugin
161

162
### Parser Configuration
163

164
- **Primary Parser**: `vue-eslint-parser` - Handles Vue single-file components
165
- **Script Parser**: `@typescript-eslint/parser` - Handles TypeScript code within Vue files
166

167
### Key Rules
168

169
**Enabled Rules:**
170
- `@typescript-eslint/no-unused-vars`: Error for unused variables with argument checking
171

172
**Disabled Rules:**
173
- `no-unused-vars`: Disabled in favor of TypeScript-specific rule
174
- `no-undef`: Disabled as TypeScript handles undefined variable checking
175
- Multiple TypeScript strict rules disabled for easier JavaScript-to-TypeScript migration
176

177
### Import Resolution
178

179
Configured to handle TypeScript imports:
180
- `.ts` and `.tsx` file parsing via `@typescript-eslint/parser`
181
- TypeScript-aware import resolution
182

183
## Dependencies
184

185
### Required Dependencies
186

187
These dependencies are automatically installed with the package:
188

189
- `@nuxtjs/eslint-config` (^12.0.0): Base Nuxt ESLint configuration
190
- `@typescript-eslint/eslint-plugin` (^6.5.0): TypeScript ESLint plugin
191
- `@typescript-eslint/parser` (^6.5.0): TypeScript parser
192
- `eslint-import-resolver-typescript` (^3.6.0): TypeScript import resolver
193
- `eslint-plugin-import` (^2.28.1): Import/export linting
194
- `eslint-plugin-vue` (^9.17.0): Vue.js linting support
195

196
### Peer Dependencies
197

198
- `eslint` (^8.48.0): ESLint engine (must be installed separately)
199

200
### Development Dependencies
201

202
- `typescript` (^5.2.2): TypeScript compiler for development
203

204
### Usage with Package Manager Scripts
205

206
```json
207
{
208
  "scripts": {
209
    "lint": "eslint .",
210
    "lint:fix": "eslint . --fix"
211
  }
212
}
213
```