add ERBLint to enforce a few basic rules (#994)

.erb-lint.yml

@@ -0,0 +1,9 @@
+---
+EnableDefaultLinters: true
+exclude:
+  - '**/vendor/**/*'
+linters:
+  ErbSafety:
+    enabled: true
+  FinalNewline:
+    enabled: true

.github/workflows/ci.yml

@@ -52,11 +52,12 @@ jobs:
       with:
         path: vendor/bundle
         key: gems-build-rails-main-ruby-2.7.2-${{ hashFiles('**/Gemfile.lock') }}
-    - name: Lint with Rubocop
+    - name: Lint with Rubocop and ERB Lint
       run: |
         bundle config path vendor/bundle
         bundle install --jobs 4 --retry 3
         bundle exec rubocop
+        bundle exec erblint **/*.html.erb
   test:
     needs: lint
     runs-on: ubuntu-latest

Gemfile.lock

@@ -120,6 +120,14 @@ GEM
     concurrent-ruby (1.1.9)
     crass (1.0.6)
     docile (1.3.4)
+    erb_lint (0.0.37)
+      activesupport
+      better_html (~> 1.0.7)
+      html_tokenizer
+      parser (>= 2.7.1.4)
+      rainbow
+      rubocop
+      smart_properties
     erubi (1.10.0)
     globalid (0.4.2)
       activesupport (>= 4.2.0)
@@ -232,6 +240,7 @@ DEPENDENCIES
   better_html (~> 1)
   bundler (~> 2.2)
   capybara (~> 3)
+  erb_lint (~> 0.0.37)
   haml (~> 5)
   jbuilder (~> 2)
   minitest (= 5.6.0)

app/views/view_components/_preview_source.html.erb

@@ -1,17 +1,17 @@
-<link href="<%= asset_path('prism.css', skip_pipeline: true) %>" media="screen" rel="stylesheet" type="text/css" />
+<link href="<%= asset_path('prism.css', skip_pipeline: true) %>" media="screen" rel="stylesheet" type="text/css">
 <div class="view-component-source-example">
   <h2>Source:</h2>
   <pre class="source">
     <% if @render_args[:component] %>
       <code class="language-ruby">
-        <%=h @preview.preview_source(@example_name) %>
+        <%= h @preview.preview_source(@example_name) %>
       </code>
     <% else %>
       <% template = @view_renderer.lookup_context.find_template(@render_args[:template]) %>
       <code class="language-<%= prism_language_name(template: template) %>">
-        <%=h template.source %>
+        <%= h template.source %>
       </code>
     <% end %>
   </pre>
 </div>
-<script type="text/javascript" src="<%= asset_path('prism.min.js', skip_pipeline: true) %>"></script>
+<script type="text/javascript" src="<%= asset_path('prism.min.js', skip_pipeline: true) %>"></script>

app/views/view_components/preview.html.erb

@@ -1,9 +1,9 @@
 <% if ViewComponent::Base.render_monkey_patch_enabled || Rails.version.to_f >= 6.1 %>
-  <%= render(@render_args[:component], @render_args[:args], &@render_args[:block])%>
+  <%= render(@render_args[:component], @render_args[:args], &@render_args[:block]) %>
 <% else %>
-  <%= render_component(@render_args[:component], &@render_args[:block])%>
+  <%= render_component(@render_args[:component], &@render_args[:block]) %>
 <% end %>
 
 <% if ViewComponent::Base.show_previews_source %>
   <%= preview_source %>
-<% end %>
+<% end %>

docs/CHANGELOG.md

@@ -7,6 +7,10 @@ title: Changelog
 
 ## main
 
+* Add ERB Lint for a few basic rules.
+
+    *Joel Hawksley*
+
 * Sort `gemspec` dependencies alphabetically.
 
     *Joel Hawksley*

test/sandbox/app/components/bad_slot_component.html.erb

@@ -1 +1 @@
-<%= title %>
+<%= title %>

test/sandbox/app/components/collection_counter_component.html.erb

@@ -1,5 +1,5 @@
 <figure data-index="<%= @index %>">
-  <img src="<%= @item.url %>" alt="<%= @item.title %>" />
+  <img src="<%= @item.url %>" alt="<%= @item.title %>">
   <figcaption>
     Photo.<%= @counter %> - <%= @item.caption %>
   </figcaption>

test/sandbox/app/components/collection_iteration_component.html.erb

@@ -1,5 +1,5 @@
 <figure data-index="<%= @iteration.index %>" class="<%= "first" if @iteration.first? %>">
-  <img src="<%= @item.url %>" alt="<%= @item.title %>" />
+  <img src="<%= @item.url %>" alt="<%= @item.title %>">
   <figcaption>
     Photo.<%= @counter %> - <%= @item.caption %>
   </figcaption>

test/sandbox/app/components/controller_inline_component.html.erb

@@ -1 +1 @@
-<%= render partial: "integration_examples/controller_inline", locals: { message: @message } %>
+<%= render partial: "integration_examples/controller_inline", locals: { message: @message } %>

test/sandbox/app/components/missing_collection_parameter_name_component.html.erb

@@ -1 +1 @@
-<div>Hi!</div>
+<div>Hi!</div>

test/sandbox/app/components/render_check_component.html.erb

@@ -1 +1 @@
-Rendered
+Rendered

test/sandbox/app/views/integration_examples/_controller_inline.html.erb

@@ -1 +1 @@
-<div><%= message %></div>
+<div><%= message %></div>

test/sandbox/app/views/layouts/component_preview.html.erb

@@ -1,2 +1,2 @@
 <%= yield %>
-<%= preview_source %>
+<%= preview_source %>

test/sandbox/test/components/previews/preview_source_from_layout_component_preview/default_with_template.html.erb

@@ -1,3 +1,3 @@
-<%= 
+<%=
   render PreviewComponent.new(cta: "Click me!", title: "Lorem Ipsum")
-%>
+%>

view_component.gemspec

@@ -34,6 +34,7 @@ Gem::Specification.new do |spec|
   spec.add_development_dependency "benchmark-ips", "~> 2.8.2"
   spec.add_development_dependency "better_html", "~> 1"
   spec.add_development_dependency "bundler", "~> 2.2"
+  spec.add_development_dependency "erb_lint", "~> 0.0.37"
   spec.add_development_dependency "haml", "~> 5"
   spec.add_development_dependency "jbuilder", "~> 2"
   spec.add_development_dependency "minitest", "= 5.6.0"