What is grunt-contrib-jshint?
grunt-contrib-jshint is a Grunt plugin for running JSHint, a tool that helps to detect errors and potential problems in JavaScript code. It allows you to integrate JSHint into your Grunt build process, enabling automated code quality checks.
What are grunt-contrib-jshint's main functionalities?
Basic JSHint Task
This feature allows you to define a basic JSHint task in your Gruntfile. It specifies the files to be linted and sets JSHint options, such as ECMAScript version.
{
"grunt.initConfig": {
"jshint": {
"files": ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
"options": {
"esversion": 6
}
}
},
"grunt.loadNpmTasks": "grunt-contrib-jshint",
"grunt.registerTask": ["default", ["jshint"]]
}
Custom JSHint Reporter
This feature allows you to use a custom reporter for JSHint, such as 'jshint-stylish', to format the output of linting results in a more readable manner.
{
"grunt.initConfig": {
"jshint": {
"files": ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
"options": {
"reporter": require('jshint-stylish')
}
}
},
"grunt.loadNpmTasks": "grunt-contrib-jshint",
"grunt.registerTask": ["default", ["jshint"]]
}
JSHint with Custom Configuration File
This feature allows you to specify a custom JSHint configuration file (.jshintrc) to define your linting rules and options.
{
"grunt.initConfig": {
"jshint": {
"files": ['Gruntfile.js', 'src/**/*.js', 'test/**/*.js'],
"options": {
"jshintrc": '.jshintrc'
}
}
},
"grunt.loadNpmTasks": "grunt-contrib-jshint",
"grunt.registerTask": ["default", ["jshint"]]
}
Other packages similar to grunt-contrib-jshint
eslint
ESLint is a popular linting tool for JavaScript and TypeScript. It is highly configurable and supports a wide range of plugins and rules. Compared to grunt-contrib-jshint, ESLint offers more flexibility and a larger ecosystem of plugins.
jscs
JSCS (JavaScript Code Style) is a code style linter for JavaScript. It focuses on enforcing coding conventions and style guidelines. While JSHint checks for potential errors and code quality, JSCS is more focused on code style.
tslint
TSLint is a linter for TypeScript code. It helps to enforce coding standards and catch potential errors in TypeScript projects. While grunt-contrib-jshint is for JavaScript, TSLint is specifically designed for TypeScript.
grunt-contrib-jshint
Validate files with JSHint.
Note that this plugin has not yet been released, and only works with the latest bleeding-edge, in-development version of grunt. See the When will I be able to use in-development feature 'X'? FAQ entry for more information.
Getting Started
If you haven't used grunt before, be sure to check out the Getting Started guide, as it explains how to create a gruntfile as well as install and use grunt plugins. Once you're familiar with that process, install this plugin with this command:
npm install grunt-contrib-jshint --save-dev
Jshint task
Run this task with the grunt jshint
command.
This task is a [multi task][] so any targets, files and options should be specified according to the [multi task][] documentation.
[multi task]: https://github.com/gruntjs/grunt/wiki/Configuring-tasks
Options
Any specified option will be passed through directly to JSHint, thus you can specify any option that JSHint supports. See the JSHint documentation for a list of supported options.
A few additional options are supported:
globals
Type: Object
Default value: null
A map of global variables, with keys as names and a boolean value to determine if they are assignable. This is not a standard JSHint option, but is passed into the JSHINT
function as its third argument. See the JSHint documentation for more information.
jshintrc
Type: String
Default value: null
If this filename is specified, options and globals defined therein will be used. The jshintrc
file must be valid JSON and looks something like this:
{
"curly": true,
"eqnull": true,
"eqeqeq": true,
"undef": true,
"globals": {
"jQuery": true
}
}
Usage examples
Wildcards
In this example, running grunt jshint:all
(or grunt jshint
because jshint
is a [multi task][]) will lint the project's Gruntfile as well as all JavaScript files in the lib
and test
directories and their subdirectores, using the default JSHint options.
grunt.initConfig({
jshint: {
all: ['Gruntfile.js', 'lib/**/*.js', 'test/**/*.js']
}
});
Linting before and after concatenating
In this example, running grunt jshint
will lint both the "beforeconcat" set and "afterconcat" sets of files. This is not ideal, because dist/output.js
may get linted before it gets created via the grunt-contrib-concat plugin concat
task.
In this case, you should lint the "beforeconcat" files first, then concat, then lint the "afterconcat" files, by running grunt jshint:beforeconcat concat jshint:afterconcat
.
grunt.initConfig({
concat: {
dist: {
src: ['src/foo.js', 'src/bar.js'],
dest: 'dist/output.js'
}
},
jshint: {
beforeconcat: ['src/foo.js', 'src/bar.js'],
afterconcat: ['dist/output.js']
}
});
Specifying JSHint options and globals
In this example, custom JSHint options are specified. Note that when grunt jshint:uses_defaults
is run, those files are linted using the default options, but when grunt jshint:with_overrides
is run, those files are linted using merged task/target options.
grunt.initConfig({
jshint: {
options: {
curly: true,
eqeqeq: true,
eqnull: true,
browser: true,
globals: {
jQuery: true
},
},
uses_defaults: ['dir1/**/*.js', 'dir2/**/*.js'],
with_overrides: {
options: {
curly: false,
undef: true,
},
files: {
src: ['dir3/**/*.js', 'dir4/**/*.js']
},
}
},
});
Release History
- 2013-01-08 v0.1.1rc5 Updating to work with grunt v0.4.0rc5. Switching to this.filesSrc api.
- 2012-10-17 v0.1.0 Work in progress, not yet officially released.
Task submitted by "Cowboy" Ben Alman
This file was generated on Wed Jan 09 2013 14:12:19.