0
# JSHint Stylish
1

2
JSHint Stylish is a stylish reporter for JSHint that transforms the default lint output into an elegant, colorized format with organized table layout and visual symbols. It enhances code quality feedback readability by presenting errors and warnings in a clean, structured format with proper categorization and line/column information.
3

4
## Package Information
5

6
- **Package Name**: jshint-stylish
7
- **Package Type**: npm
8
- **Language**: JavaScript
9
- **Installation**: `npm install --save-dev jshint-stylish`
10

11
## Core Imports
12

13
```javascript
14
const stylish = require('jshint-stylish');
15
```
16

17
For use with various JSHint integrations:
18

19
```javascript
20
// Direct reporter reference
21
const reporter = require('jshint-stylish');
22

23
// Accessing specific methods
24
const { reporter, toString } = require('jshint-stylish');
25
```
26

27
## Basic Usage
28

29
### JSHint CLI Integration
30

31
```bash
32
$ jshint --reporter=node_modules/jshint-stylish file.js
33
```
34

35
### Gulp Integration
36

37
```javascript
38
const gulp = require('gulp');
39
const jshint = require('gulp-jshint');
40

41
gulp.task('lint', () =>
42
  gulp.src(['src/**/*.js'])
43
    .pipe(jshint('.jshintrc'))
44
    .pipe(jshint.reporter('jshint-stylish'))
45
);
46
```
47

48
### Grunt Integration
49

50
```javascript
51
grunt.initConfig({
52
  jshint: {
53
    options: {
54
      reporter: require('jshint-stylish')
55
    },
56
    target: ['src/**/*.js']
57
  }
58
});
59
```
60

61
## Capabilities
62

63
### Reporter Function
64

65
The main reporter function that formats JSHint results with stylish output including colorized text, organized tables, and visual symbols. Categorizes results as errors (codes starting with 'E') or warnings (all other codes).
66

67
```javascript { .api }
68
/**
69
 * Main reporter function that formats JSHint results with stylish output
70
 * @param {Array} result - Array of JSHint result objects containing error/warning data
71
 * @param {Object} config - JSHint configuration object
72
 * @param {Object} [options] - Reporter options
73
 * @param {boolean} [options.beep=false] - Enable system bell sound for warnings/errors
74
 * @param {boolean} [options.verbose=false] - Include error codes in output
75
 * @returns {void} - Outputs formatted results directly to console via console.log
76
 */
77
function reporter(result, config, options);
78
```
79

80
**Usage Example:**
81

82
```javascript
83
const jshint = require('jshint/src/cli');
84
const stylish = require('jshint-stylish');
85

86
// Use with JSHint programmatically
87
jshint.run({
88
  args: ['file.js'],
89
  reporter: stylish.reporter
90
});
91

92
// With options
93
jshint.run({
94
  args: ['file.js'],
95
  reporter: (result, config) => {
96
    stylish.reporter(result, config, { beep: true, verbose: true });
97
  }
98
});
99
```
100

101
### Module Identification
102

103
Returns the filename of the module for JSHint internal identification purposes.
104

105
```javascript { .api }
106
/**
107
 * Returns the filename of the module for JSHint internal identification
108
 * @returns {string} - The module's filename
109
 */
110
function toString();
111
```
112

113
## Types
114

115
### Result Object Structure
116

117
The result array contains objects with the following structure:
118

119
```javascript { .api }
120
interface ResultItem {
121
  /** File path */
122
  file: string;
123
  /** Error/warning details */
124
  error: {
125
    /** Line number where the issue occurs */
126
    line: number;
127
    /** Column number where the issue occurs */
128
    character: number;
129
    /** Error/warning message */
130
    reason: string;
131
    /** JSHint error code (E=Error, W=Warning, I=Info) */
132
    code: string;
133
  };
134
}
135
```
136

137
### Options Object
138

139
Configuration options for the reporter function:
140

141
```javascript { .api }
142
interface ReporterOptions {
143
  /** Enable system bell sound for warnings/errors */
144
  beep?: boolean;
145
  /** Include error codes in output */
146
  verbose?: boolean;
147
}
148
```
149

150
## Output Features
151

152
- **Colorized Output**: Errors in red, warnings in blue, file paths underlined
153
- **Table Format**: Organized columns for line numbers, column numbers, and messages
154
- **Visual Symbols**: Cross-platform symbols for errors, warnings, and success
155
- **Summary Statistics**: Count of errors and warnings (note: warning pluralization uses total count)
156
- **File Grouping**: Results grouped by file with clear separation
157
- **System Bell**: Optional audio notification for issues (when `beep: true`)
158
- **Verbose Mode**: Optional error code display (when `verbose: true`)
159

160
## Integration Notes
161

162
- **JSHint CLI**: Use with `--reporter` flag pointing to the module path
163
- **Gulp**: Works with `gulp-jshint` plugin via reporter name string
164
- **Grunt**: Works with `grunt-contrib-jshint` by requiring the module
165
- **Build Tools**: Compatible with any tool that supports JSHint custom reporters
166
- **Zero Configuration**: Works out of the box with default settings