(This post was originally written by @aki77 in Japanese. @aki77 is a co-worker of mine. You can read the original post here.)
I'm pleased to announce the release of rails-template-inspector which is a JS package for Rails applications. You can do the following things by using it:
- You can confirm in which template the element is written by mouse hover.
- You can open template files in your local editor by clicking elements.
- No Bundler, no npm. You can just use it via CDN because it's provided in vanilla JS.
- Unlike xray-rails, it supports the latest Rails environment.
How to use
Set the following value to true in config/environments/development.rb:
config.action_view.annotate_rendered_view_with_filenames = true
Add the <% if Rails.env.development? %> block in your
layout file:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<%= yield %>
<% if Rails.env.development? %>
<script type="module" src="https://cdn.skypack.dev/@aki77/rails-template-inspector"></script>
<rails-inspector url-prefix="vscode://file" root="<%= Rails.root %>" combo-key="command-shift-v"></rails-inspector>
<% end %>
</body>
</html>
This package uses custom URL scheme to open view files in editors, so please change url-prefix attribute in <rails-inspector> element per your favorite editor. Here are examples:
- Visual Studio Code:
vscode://file - RubyMine:
x-mine://open?file= - MacVIM:
mvim://open?url=file:// - Emacs:
emacs://open?url=file://
How to work
By enabling config.action_view.annotate_rendered_view_with_filenames, this package can search HTML comments generated by Rails. It also uses Lit to implement custom <rails-inspector> elements.
I hope you enjoy rails-template-inspector!
<rails-inspector>
This custom element allows users to jump to local IDE code directly from browser element by just a simple click. It supports Rails templates.
Usage
In config/environments/development.rb:
config.action_view.annotate_rendered_view_with_filenames = true
In app/views/layouts/application.html.haml:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<%= yield %>
<% if Rails.env.development? %>
<script type="module" src="https://cdn.skypack.dev/@aki77/rails-template-inspector@^0.3.0"></script>
<rails-inspector url-prefix="vscode://file" root="<%= Rails.root %>" combo-key="command-shift-v"></rails-inspector>
<% end %>
</body>
</html>
Attributes
-
url-prefix: Custom URL Scheme for editor. (default:vscode://file)- Examples
-
Visual Studio Code:
vscode://file -
RubyMine:
x-mine://open?file= -
MacVIM:
mvim://open?url=file:// -
Emacs:
emacs://open?url=file://
-
Visual Studio Code:
- Examples
-
combo-key: Key to toggle inspector. (default:meta-shift-v)- any number of modifiers…
Top comments (0)