htmlhint.md

Linting HTML with HTMLHint

In this very simple recipe you'll learn how to set up linting with HTMLHint using gulp-htmlhint.

Steps

1. Install dependencies

We need to install gulp-htmlhint as a dependency:

$ npm install --save-dev gulp-htmlhint

2. Create the task

Let's create a task in our gulpfile.js which runs HTMLHint across all our HTML files and outputs the error in the terminal:

gulp.task('htmlhint', () => {
  return gulp.src('app/**/*.html')
    .pipe($.htmlhint())
    .pipe($.htmlhint.reporter());
});

Read gulp-htmlhint's docs to find out how you can pass options to HTMLHint.

3. Add the task as the dependency of serve and html

HTMLHint should run on serve and build.

gulp.task('html', ['htmlhint', 'styles', 'scripts'], () => {

gulp.task('serve', () => {
  runSequence(['clean', 'wiredep'], ['htmlhint', 'styles', 'scripts', 'fonts'], () => {

4. Run the task on each HTML change

In the serve task add the following line to run htmlhint every time a HTML file in the app directory changes:

+gulp.watch('app/**/*.html', ['htmlhint']);
 gulp.watch('app/styles/**/*.scss', ['styles']);
 gulp.watch('app/scripts/**/*.js', ['scripts']);
 gulp.watch('app/fonts/**/*', ['fonts']);
 gulp.watch('bower.json', ['wiredep', 'fonts']);

Usage

This is it! To test if everything is working correctly, try making a syntax error in your HTML file and saving it. You should see the error report in your terminal.