jshint-loader

0.8.4 verified Sat Apr 25 auth: no javascript maintenance

jshint-loader is a Webpack loader that integrates JSHint linting into the Webpack build process. The current stable version is 0.8.4, released in February 2017, with no further updates. It runs JSHint as a pre-loader to check JavaScript files before bundling. Key differentiators: it supports custom reporters and can emit errors or warnings, but reporters are not compatible with standard JSHint reporters. It requires JSHint as a peer dependency.

Common errors

error Module parse failed: Unexpected token (1:2) You may need an appropriate loader to handle this file type. ↓

cause jshint-loader is used as pre-loader but Webpack 2+ expects 'enforce: pre' instead of preLoaders.

fix

Update config: module: { rules: [{ test: /\.js$/, enforce: 'pre', loader: 'jshint-loader' }] }

error ERROR in ./src/app.js Module build failed: TypeError: Cannot read property 'length' of undefined ↓

cause jshint options object is missing or malformed.

fix

Ensure jshint key in config is an object with valid options.

error WARNING: No reporter specified. Using default. ↓

cause Custom reporter function may not be passed correctly or is not exporting properly.

fix

Check that reporter is a function set under jshint.reporter.

Warnings

breaking In Webpack 1, preLoaders key is used; in Webpack 2+ it has been replaced by 'rules' with 'enforce: pre'. ↓

fix For Webpack 2+, use: rules: [{ test: /\.js$/, enforce: 'pre', exclude: /node_modules/, loader: 'jshint-loader' }]

deprecated Webpack 2+ deprecated preLoaders in favor of enforce: pre. ↓

fix Use module.rules with enforce: 'pre' instead of preLoaders.

gotcha Standard JSHint reporters are not compatible with jshint-loader. They will not produce output. ↓

fix Implement a custom reporter function that uses this.emitWarning() or this.emitError()

gotcha Loader will not run on files excluded by /node_modules/ unless explicitly included. ↓

fix Ensure test pattern includes files you want linted and exclude node_modules.

Install

npm install jshint-loader

yarn add jshint-loader

pnpm add jshint-loader

Imports

default

wrong

const jshintLoader = require('jshint-loader');

correct

module.exports = { module: { preLoaders: [{ test: /\.js$/, exclude: /node_modules/, loader: 'jshint-loader' }] } }

Loader is used via Webpack config, not imported directly.

jshint config object

wrong

const jshint = require('jshint-loader').config;

correct

module.exports = { jshint: { camelcase: true } }

Options are placed under the 'jshint' key in Webpack config.

reporter function

wrong

// Using standard JSHint reporter like 'jshint-stylish'

correct

module.exports = { jshint: { reporter: function(errors) { this.emitWarning(errors[0].reason); } } }

Reporter receives array of errors and uses loader context (this.emitWarning/Error). Standard JSHint reporters are not compatible.

Quickstart

Install jshint-loader and jshint, then configure Webpack to run JSHint as a pre-loader with options.

npm install jshint-loader jshint --save-dev

// webpack.config.js
module.exports = {
  module: {
    preLoaders: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'jshint-loader'
      }
    ]
  },
  jshint: {
    curly: true,
    eqeqeq: true,
    emitErrors: true,
    failOnHint: false
  }
};