0
# TSLint Loader
1

2
TSLint Loader is a webpack loader that integrates TSLint (TypeScript linter) into the webpack build process. It enables developers to automatically lint TypeScript files during compilation, catching code quality issues and style violations early in the development workflow with comprehensive configuration options.
3

4
## Package Information
5

6
- **Package Name**: tslint-loader
7
- **Package Type**: npm
8
- **Language**: JavaScript (with TypeScript support)
9
- **Installation**: `npm install tslint tslint-loader --save-dev`
10
- **Peer Dependency**: tslint >= 4.0.0
11

12
## Core Imports
13

14
TSLint Loader is used as a webpack loader, not directly imported in application code. It's configured in webpack configuration files.
15

16
## Basic Usage
17

18
### Webpack 4+ Configuration
19

20
```javascript
21
module.exports = {
22
  module: {
23
    rules: [
24
      {
25
        test: /\.ts$/,
26
        enforce: 'pre',
27
        use: [
28
          {
29
            loader: 'tslint-loader',
30
            options: {
31
              // Loader configuration options
32
              emitErrors: false,
33
              failOnHint: true,
34
              typeCheck: false
35
            }
36
          }
37
        ]
38
      }
39
    ]
40
  }
41
}
42
```
43

44
### Webpack 1.x Configuration
45

46
```javascript
47
module.exports = {
48
  module: {
49
    preLoaders: [
50
      {
51
        test: /\.ts$/,
52
        loader: 'tslint-loader'
53
      }
54
    ]
55
  },
56
  tslint: {
57
    // Loader configuration options
58
    emitErrors: false,
59
    failOnHint: true
60
  }
61
}
62
```
63

64
## Capabilities
65

66
### Main Loader Function
67

68
The primary webpack loader function that processes TypeScript files through TSLint.
69

70
```javascript { .api }
71
/**
72
 * Main webpack loader function for TSLint integration
73
 * @param {string} input - Source code content of the file being processed
74
 * @param {object} map - Optional source map for the file
75
 * @returns {void} Calls webpack callback with original source code unchanged
76
 */
77
function loader(input, map);
78
```
79

80
The loader:
81
- Validates TSLint version (requires 4.0+)
82
- Resolves configuration options from webpack config
83
- Executes TSLint on the input file
84
- Emits warnings or errors based on configuration
85
- Passes through original source code unchanged
86

87
### Configuration Options
88

89
Comprehensive configuration system supporting inline rules, external config files, and output customization.
90

91
```javascript { .api }
92
interface LoaderOptions {
93
  /** Inline TSLint configuration rules */
94
  configuration?: TSLintConfiguration;
95
  
96
  /** Path to TSLint configuration file or false to disable */
97
  configFile?: string | false;
98
  
99
  /** Emit lint issues as errors instead of warnings */
100
  emitErrors?: boolean;
101
  
102
  /** Fail compilation when lint errors are found */
103
  failOnHint?: boolean;
104
  
105
  /** Enable type-checked TSLint rules */
106
  typeCheck?: boolean;
107
  
108
  /** Path to TypeScript configuration file for type checking */
109
  tsConfigFile?: string;
110
  
111
  /** Automatically fix linting errors where possible */
112
  fix?: boolean;
113
  
114
  /** TSLint formatter to use */
115
  formatter?: string;
116
  
117
  /** Directory containing custom formatters */
118
  formattersDirectory?: string;
119
  
120
  /** Directory containing custom TSLint rules */
121
  rulesDirectory?: string;
122
  
123
  /** Configuration for saving lint results to files */
124
  fileOutput?: FileOutputOptions;
125
}
126

127
interface TSLintConfiguration {
128
  rules: {
129
    [ruleName: string]: boolean | [boolean, ...any[]];
130
  };
131
  [key: string]: any;
132
}
133

134
interface FileOutputOptions {
135
  /** Output directory for lint reports */
136
  dir: string;
137
  
138
  /** File extension for reports (default: 'txt') */
139
  ext?: string;
140
  
141
  /** Clean output directory before writing */
142
  clean?: boolean;
143
  
144
  /** Content to prepend to each report file */
145
  header?: string;
146
  
147
  /** Content to append to each report file */
148
  footer?: string;
149
}
150
```
151

152
**Usage Examples:**
153

154
```javascript
155
// Basic configuration with inline rules
156
{
157
  loader: 'tslint-loader',
158
  options: {
159
    configuration: {
160
      rules: {
161
        quotemark: [true, 'double'],
162
        'no-console': [false]
163
      }
164
    },
165
    emitErrors: true,
166
    failOnHint: false
167
  }
168
}
169

170
// Configuration with external config file and type checking
171
{
172
  loader: 'tslint-loader',
173
  options: {
174
    configFile: './tslint-custom.json',
175
    typeCheck: true,
176
    tsConfigFile: './tsconfig.json',
177
    fix: true
178
  }
179
}
180

181
// Configuration with file output for CI systems
182
{
183
  loader: 'tslint-loader',
184
  options: {
185
    fileOutput: {
186
      dir: './lint-reports/',
187
      ext: 'xml',
188
      clean: true,
189
      header: '<?xml version="1.0" encoding="utf-8"?>\\n<checkstyle version="5.7">',
190
      footer: '</checkstyle>'
191
    }
192
  }
193
}
194
```
195

196
### Custom Formatter
197

198
Built-in custom formatter optimized for webpack integration.
199

200
```javascript { .api }
201
/**
202
 * Custom TSLint formatter class extending AbstractFormatter
203
 */
204
class Formatter extends Lint.Formatters.AbstractFormatter {
205
  /**
206
   * Format lint failures for display
207
   * @param {Array} failures - Array of TSLint failure objects
208
   * @returns {string} Formatted output with line numbers and positions
209
   */
210
  format(failures);
211
}
212
```
213

214
The custom formatter outputs failures in the format: `[line, column]: failure message`
215

216
**Example Output:**
217
```
218
[8, 1]: Calls to 'console.log' are not allowed.
219
[15, 5]: Missing semicolon.
220
```
221

222
## Error Handling
223

224
The loader handles various error conditions:
225

226
- **Version Validation**: Throws error if TSLint version < 4.0.0
227
- **Configuration Errors**: Handled by TSLint configuration parser
228
- **Lint Failures**: Emitted as webpack warnings or errors based on `emitErrors` option
229
- **Compilation Failures**: Optional compilation interruption based on `failOnHint` setting
230

231
When `failOnHint` is enabled and lint errors occur, the compilation fails with detailed error information.
232

233
## Platform Support
234

235
- **Webpack Versions**: 1.x, 2.x, 3.x, 4.x+
236
- **TSLint Versions**: 4.0.0 and above
237
- **TypeScript**: Any version supported by TSLint 4.0+
238
- **Node.js**: Compatible with webpack and TSLint requirements
239

240
## Advanced Configuration
241

242
### Type-Checked Rules
243

244
Enable advanced TSLint rules that require TypeScript type information:
245

246
```javascript
247
{
248
  loader: 'tslint-loader',
249
  options: {
250
    typeCheck: true,
251
    tsConfigFile: './tsconfig.json',
252
    configuration: {
253
      rules: {
254
        'for-in-array': true,
255
        'no-unsafe-any': true,
256
        'strict-boolean-expressions': true
257
      }
258
    }
259
  }
260
}
261
```
262

263
### Custom Rules and Formatters
264

265
Use custom TSLint rules and formatters:
266

267
```javascript
268
{
269
  loader: 'tslint-loader',
270
  options: {
271
    rulesDirectory: './custom-rules/',
272
    formatter: 'myCustomFormatter',
273
    formattersDirectory: './custom-formatters/'
274
  }
275
}
276
```
277

278
### Continuous Integration Integration
279

280
Configure file output for CI systems:
281

282
```javascript
283
{
284
  loader: 'tslint-loader',
285
  options: {
286
    emitErrors: true,
287
    failOnHint: true,
288
    fileOutput: {
289
      dir: './build-reports/tslint/',
290
      ext: 'json',
291
      clean: true
292
    }
293
  }
294
}
295
```