Zenn
🤖

ブラウザの要素をクリックするだけでRailsのviewファイルを簡単に開くことの出来るrails-template-inspectorの紹介

2022/07/11に公開
Rails
Web Components
Lit
tech

Rails 用のjsパッケージ rails-template-inspectorをリリースしましたので宣伝です。
このパッケージを使うと以下のようなことが出来るようになります。

  • 要素がどのテンプレートに記述されているのかマウスホバーで確認できる
  • 要素をクリックするだけで、ローカルのエディタでテンプレートファイルを開ける
  • jsのみで実装されている為、CDN経由で利用することでインストール不要で利用できる
  • xray-railsと違い最新版のRailsでも問題なく利用できる

Demo

利用方法

config/environments/development.rbで以下の設定を有効にします。

config.action_view.annotate_rendered_view_with_filenames = true

レイアウトファイルに以下の<% if Rails.env.development? %>ブロックを追加します。

<!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>

エディタを開く仕組みとしてはCustom URL Schemeを利用しています。
<rails-inspector>要素のurl-prefix属性は利用しているエディタに合わせて書き換えてください。

url-prefixの設定例:

  • Visual Studio Code: vscode://file
  • RubyMine: x-mine://open?file=
  • MacVIM: mvim://open?url=file://
  • Emacs: emacs://open?url=file://

仕組み

config.action_view.annotate_rendered_view_with_filenamesの設定を有効にすることによって埋め込まれるHTMLコメントを探索することで実現しています。
<rails-inspector>カスタム要素の実装にはLitを使用しています。

良かったら試してみてください。

https://github.com/aki77/rails-template-inspector

Discussion