CODEWITHSUNDEEP
javascriptgulplint
Mike Lynnick
Mike Lynnick

Reputation: 45

Set options/rules for gulp HTML linter

How do I set the options for gulp-htmllint ?

I want to exclude any rules pertaining to indent style and id or class style. However, its documentation shows the keys for those has having dashes, ex indent-style or id-class-style, but the dash breaks the code. I tried camelcasing or writing the keys as a string but that didn't seem to make a difference.

From what I understand, this is what defines the task, and this is where I have tried to define the rule options:

gulp.task('default', function() {
 return gulp.src('src/index.html')
    .pipe(htmllint({
      indent-style: false,
      id-class-style: false
    }, htmllintReporter));
});

And this is the function that defines what you will see in the terminal:

function htmllintReporter(filepath, issues) {
 if (issues.length > 0) {
    issues.forEach(function (issue) {
     gutil.log(gutil.colors.cyan('[gulp-htmllint] ') + 
     gutil.colors.white(filepath + ' [' + issue.line + ',' + 
     issue.column + ']: ') + gutil.colors.red('(' + issue.code + ') ' + 
     issue.msg));
  });
   process.exitCode = 1;
  }
}

Upvotes: 2

Views: 1163

Answers (2)

BradChesney79
BradChesney79

Reputation: 668

Here is an example of the contents of a .htmllintrc file:

{
  "attr-name-style": "dash",
  "attr-quote-style": "double",
  "id-class-style": "dash",
  "indent-style": "spaces",
  "indent-width": 2,
  "line-end-style": "lf",
  "attr-req-value": false,
  "html-req-lang": true,
  "title-max-length": 120,
  "img-req-src": false,
  "tag-bans": ["!style"]
}

That literally goes in the same directory as your gulpfile.js or Gruntfile.js-- the same directory as your package.json. (Given super common placement of these files...) You put the above options inside a plain text file and name it ".htmllintrc". There is no file extension, it is literally named just ".htmllintrc".

Stolen from: https://github.com/thisissoon/angular-start/blob/master/.htmllintrc

I am currently enjoying putting together a buildchain for multiple environments. To pass a dev build, regular non-functional html comments are allowed. For a prod build, those unnecessary comments should be removed... How this is relevant is that I am using the same buildchain for all environments and specifying a different options file as needed-- you can pass which options file you want to use and it will override the default .htmllintrc file.

options.config

Type: String Default value: .htmllintrc

Configuration file containing htmllint options.

https://github.com/yvanavermaet/gulp-htmllint#optionsconfig

Upvotes: 2

ricardoNava
ricardoNava

Reputation: 722

Never used gulp but just from reading the docs I can see you can define a .htmllintrc file and add the options there.

{
    "indent-style": false,
    "id-class-style": false
}

Upvotes: 0

Related Questions