ERB::Linter
It's all too easy to introduce errors inside ERB files, unclosed tags, wrong attribute names, bad indentation.
ERB::Linter can check for those errors by turning your ERB tags into HTML-ish tags and run a proper HTML linter on the result:
original ERB
<div>
<% if @foo == :bar %>
<%= image_tag(item[:value], alt: item[:value]) %>
<% elsif @type == :other %>
<span><%= item[:value] %></span>
<% else %>
<% raise "unknown type" %>
<% end %>
</div>
generated HTML, for linter consumption
<div>
<erb silent erb-code=" if @foo == :bar ">
<erb loud erb-code=" image_tag(item[:value], alt: item[:value]) "></erb>
</erb>
<erb silent erb-code=" elsif @type == :other ">
<span><erb loud erb-code=" item[:value] "></erb></span>
</erb>
<erb silent erb-code=" else ">
<erb silent erb-code=" raise "unknown type" "></erb>
</erb>
</div>
Installation
Add this line to your application's Gemfile:
gem 'erb-linter'
And add linthtml
to yarn:
$ yarn add --dev @linthtml/linthtml
Usage
From the command line
ruby -rbundler/setup -rerb/linter -e "exit ERB::Linter::Checker.check_files('app/views/**/*.html.erb')"
As a Rake task
Add a task to your Rakefile:
ERB::Linter::Task.new do |task|
# Change the task name.
# Default: :erb_linter
# task.name = 'linter:html'
# Use a different glob for listing ERB files.
# Default: '**/*.erb'
# task.glob = 'app/components/**/*.html.erb'
# Use a different temp dir for storing the HTML version of your ERB files.
# Default: Dir.tmpdir
# task.tmpdir = Rails.root.join('tmp')
end
Example linthtml configuration
And then add a linthtml
configuration like this:
.linthtmlrc.js
module.exports = {
maxerr: false,
"raw-ignore-regex": false,
"attr-bans": [
"align",
"background",
"bgcolor",
"border",
"frameborder",
"longdesc",
"marginwidth",
"marginheight",
"scrolling",
"style",
"width",
],
"indent-delta": false,
"indent-style": "spaces",
"indent-width": 2,
"indent-width-cont": false,
"spec-char-escape": true,
"text-ignore-regex": false,
"tag-bans": ["style", "b"],
"tag-close": true,
"tag-name-lowercase": true,
"tag-name-match": true,
"tag-self-close": false,
"doctype-first": false,
"doctype-html5": false,
"attr-name-style": "dash",
"attr-name-ignore-regex": false,
"attr-no-dup": true,
"attr-no-unsafe-char": true,
"attr-order": false,
"attr-quote-style": "double",
"attr-req-value": false,
"attr-new-line": false,
"attr-validate": true,
"id-no-dup": true,
"id-class-no-ad": false,
"id-class-style": false, // "lowercase", "underscore", "dash", "camel", "bem"
"class-no-dup": true,
"class-style": false,
"id-class-ignore-regex": false,
"img-req-alt": true,
"img-req-src": true,
"html-valid-content-model": true,
"head-valid-content-model": true,
"href-style": false,
"link-req-noopener": true,
"label-req-for": false,
"line-end-style": "lf",
"line-no-trailing-whitespace": true,
"line-max-len": false,
"line-max-len-ignore-regex": false,
"head-req-title": true,
"title-no-dup": true,
"title-max-len": 60,
"html-req-lang": false,
"lang-style": "case",
"fig-req-figcaption": false,
"focusable-tabindex-style": false,
"input-radio-req-name": true,
"input-req-label": false,
"table-req-caption": false,
"table-req-header": false,
"tag-req-attr": false,
};
Development
After checking out the repo, run bin/setup
to install dependencies. Then, run rake test
to run the tests. You can also run bin/console
for an interactive prompt that will allow you to experiment.
To install this gem onto your local machine, run bundle exec rake install
. To release a new version, update the version number in version.rb
, and then run bundle exec rake release
, which will create a git tag for the version, push git commits and the created tag, and push the .gem
file to rubygems.org.
Contributing
Bug reports and pull requests are welcome on GitHub at https://github.com/nebulab/erb-linter.
License
The gem is available as open source under the terms of the MIT License.