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>
Add this line to your application's Gemfile:
gem 'erb-linter'
And add linthtml
to yarn:
$ yarn add --dev @linthtml/linthtml
ruby -rbundler/setup -rerb/linter -e "exit ERB::Linter::Checker.check_files('app/views/**/*.html.erb')"
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
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,
};
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.
Bug reports and pull requests are welcome on GitHub at https://github.com/nebulab/erb-linter.
The gem is available as open source under the terms of the MIT License.