localize.dev

Documentación / Ruby on Rails

Rails i18n para vistas ERB, automatizado

Mueve el texto duro en vistas ERB de Rails a llamadas t() con YAML de config/locales, pluralidad con count:, locales disponibles y un conmutador de idioma, todo en un solo comando o solicitud de extracción.

Cómo funciona

El texto en vistas ERB se convierte en <%= t('key', name: @user.name) %>, con placeholders %{name} en config/locales/<locale>.yml, bajo la clave de idioma. Las etiquetas lógicas dividen las oraciones; <script> y <code> se dejan intactos.

Un operador ternario con una cantidad se convierte en plural con formas one: y other: (y cualquier otra cosa que necesite cada idioma), llamado con count:.

Antes y después

La salida real del motor para este archivo. En una ejecución real, el modelo alojado nombra las claves a partir del contexto.

app/views/carts/show.html.erb · antes
<h1>Welcome back, <%= @user.name %>!</h1>
<% if @items.any? %>
  <p><%= @items.count %> <%= @items.count == 1 ? 'item' : 'items' %> in your cart</p>
<% end %>
<input placeholder="Search products" type="text">
app/views/carts/show.html.erb · después
<h1><%= t('show.welcome_back', name: @user.name) %></h1>
<% if @items.any? %>
  <p><%= t('show.items_in_your_cart', count: @items.count) %></p>
<% end %>
<input placeholder="<%= t('show.search_products') %>" type="text">
config/locales/en.yml
en:
  show:
    welcome_back: Welcome back, %{name}!
    items_in_your_cart:
      one: "%{count} item in your cart"
      other: "%{count} items in your cart"
    search_products: Search products

Lo que añade la configuración

La primera ejecución configura Rails I18n si el proyecto aún no lo tiene:

  • config.i18n.available_locales en config/application.rb
  • Una acción switch_locale en ApplicationController: ?locale=, luego una cookie lang, luego Accept-Language

Ejecutarlo

La CLI necesita Node.js 22 o posterior, nada más: npx lo ejecuta sin añadir un package.json al proyecto. ¿No tienes Node en tu máquina? La GitHub Action de abajo la ejecuta por ti.

npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

O añade la GitHub Action y obtén una pull request en cada push. Pruébalo primero en tu propio código en el playground.