adamzapasnik / prettier-plugin-erb Goto Github PK

View Code? Open in Web Editor NEW

102.0 5.0 26.0 420 KB

Prettier ERB plugin

License: MIT License

JavaScript 80.79% HTML 19.21%

prettier ruby ruby-on-rails prettier-plugin

prettier-plugin-erb's Introduction

Prettier ERB Plugin

How to install?

  yarn add -D prettier @prettier/plugin-ruby prettier-plugin-erb

@prettier/plugin-ruby is used for formatting multiline expressions

Available configuration options for plugin-ruby are available here

How to deal with bugs?

Your code wasn't formatted correctly or there was an error? Add the problematic file to .prettierignore and submit an Issue.

prettier-plugin-erb's People

Contributors

Stargazers

Watchers

prettier-plugin-erb's Issues

<% %> Delete

All my ruby tag <% %> are delete or replace with <eext1 /> <eext2 /> <eext3 />...

I don't know what i'm doing wrong

package.json:

"devDependencies": {
    "@prettier/plugin-ruby": "^1.6.1",
    "prettier-plugin-erb": "^0.4.0",
    "prettier": "^2.3.2",
}

.prettierrc.json:

{
  "[ruby]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[erb]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

vscode settings.json

"files.associations": {
  "*.js": "javascriptreact",
  "*.html.erb": "erb"
},
"emmet.includeLanguages": {
  "erb": "html",
  "ruby": "html",
  "javascript": "javascriptreact"
},
"ruby.format": "prettier"

TypeError: formattedExpression.trim is not a function

Hi 👋

I'm getting this error on all my erb files! Any suggestion?

$ node -v
v12.21.0

$ yarn prettier --check app/**/*.rb
yarn run v1.22.11
Checking formatting...
All matched files use Prettier code style!
✨  Done in 3.01s.

$ yarn prettier --check 'app/**/*.erb'
Checking formatting...
app/views/administrador/_tabla_estudios_contables.html.erb[error] app/views/administrador/_tabla_estudios_contables.html.erb: TypeError: formattedExpression.trim is not a function
[error]     at /Users/pablo/Projects/xxx/node_modules/prettier-plugin-erb/lib/formatter.js:28:46
[error]     at Array.map (<anonymous>)
[error]     at formatMultilineExpressions (/Users/pablo/Projects/xxx/node_modules/prettier-plugin-erb/lib/formatter.js:7:6)
[error]     at Object.print (/Users/pablo/Projects/xxx/node_modules/prettier-plugin-erb/lib/printers.js:22:27)
[error]     at callPluginPrintFunction (/Users/pablo/Projects/xxx/node_modules/prettier/index.js:13787:21)
[error]     at mainPrintInternal (/Users/pablo/Projects/xxx/node_modules/prettier/index.js:13725:17)
[error]     at mainPrint (/Users/pablo/Projects/xxx/node_modules/prettier/index.js:13707:14)
[error]     at printAstToDoc (/Users/pablo/Projects/xxx/node_modules/prettier/index.js:13694:13)
[error]     at coreFormat (/Users/pablo/Projects/xxx/node_modules/prettier/index.js:14055:15)
[error]     at formatWithCursor$1 (/Users/pablo/Projects/xxx/node_modules/prettier/index.js:14284:14)

The Prettier team is currently working on v3(still alpha).
v3 will include breaking changes to the plugin interface.
Please see https://github.com/prettier/prettier/releases/tag/3.0.0-alpha.2 for more information.

I created this issue to help major plugins migrate to Prettier v3.

Myself and @fisker have created a migration guide which you can see here:

https://github.com/prettier/prettier/wiki/How-to-migrate-my-plugin-to-support-Prettier-v3%3F

If you have any questions, feel free to mention us. We can help you.

If you have already migrated to Prettier v3, sorry but please close this issue.

Weird formatting on <i> tags with ERB (e.g. used for icons)

Hey,
This is a great plugin, thanks.

I have a weird issue with some icons using <i> tags when there is an aria- attribute, and some ERB immediately following.

Most are a non-issue, meaning than Prettier does not change anything:

<!-- No changes here -->
<i class="far fa-file-upload fa-2x"></i>

However I have some other icons which are weirdly formatted, with a line break in the middle of the closing </i> tag. This seems to happen when there are additional attributes (e.g. aria-) and ERB tags around. Here are the diff of some tests I made:

ERB + ARIA: this is wrong, notice the linebreak in the middle of the closing tag </i>:
-<li class="c-sb-list-item"><span class="muted">
-  <% if @customer.name.present? %>
-  <i class="icon-person icon-sb" aria-hidden="true"></i><%= @customer.name %>
-  <% end %>
-</span></li>
+<li class="c-sb-list-item">
+  <span class="muted">
+    <% if @customer.name.present? %>
+      <i class="icon-person icon-sb" aria-hidden="true"></i
+      ><%= @customer.name %>
+    <% end %>
+  </span>
+</li>

All the following examples are working as expected:
===================================================

ERB / NO ARIA:
-<li class="c-sb-list-item"><span class="muted">
-  <% if @customer.name.present? %>
-  <i class="icon-person icon-sb"></i><%= @customer.name %>
-  <% end %>
-</span></li>
+<li class="c-sb-list-item">
+  <span class="muted">
+    <% if @customer.name.present? %>
+      <i class="icon-person icon-sb"></i><%= @customer.name %>
+    <% end %>
+  </span>
+</li>
 
NO ERB / ARIA:
-<li class="c-sb-list-item"><span class="muted">
-  <i class="icon-person icon-sb" aria-hidden="true"></i>
-</span></li>
+<li class="c-sb-list-item">
+  <span class="muted">
+    <i class="icon-person icon-sb" aria-hidden="true"></i>
+  </span>
+</li>
 
NO ERB / NO ARIA:
-<li class="c-sb-list-item"><span class="muted">
-  <i class="icon-person icon-sb"></i>
-</span></li>
+<li class="c-sb-list-item">
+  <span class="muted">
+    <i class="icon-person icon-sb"></i>
+  </span>
+</li>

Alternatives with a linebreak between <i> and ERB (also working examples):
==========================================================================

ALT - ERB + ARIA:
-<li class="c-sb-list-item"><span class="muted">
-  <% if @customer.name.present? %>
-  <i class="icon-person icon-sb" aria-hidden="true"></i>
-  <%= @customer.name %>
-  <% end %>
-</span></li>
+<li class="c-sb-list-item">
+  <span class="muted">
+    <% if @customer.name.present? %>
+      <i class="icon-person icon-sb" aria-hidden="true"></i>
+      <%= @customer.name %>
+    <% end %>
+  </span>
+</li>
 
ALT - ERB / NO ARIA:
-<li class="c-sb-list-item"><span class="muted">
-  <% if @customer.name.present? %>
-  <i class="icon-person icon-sb"></i>
-  <%= @customer.name %>
-  <% end %>
-</span></li>
+<li class="c-sb-list-item">
+  <span class="muted">
+    <% if @customer.name.present? %>
+      <i class="icon-person icon-sb"></i>
+      <%= @customer.name %>
+    <% end %>
+  </span>
+</li>

Fails to format ERB templates only containing ERB tags

I have a .html.erb template file with the following contents:

<%= content_tag :div, 'Content' %>

Running prettier with the plugin would reformat the file to only contain a tag looking like <eext1 />. It is possible to mitigate the problem by adding a wrapper element or reformat the template to look like this:

<%= content_tag :div do %>
  Content
<% end %>

Any idea on how to fix single line templates without the use of blocks?

Incorrect output </eext8><br/>

This is from a new Rails 7 + devise + simple_form. Running prettier-plugin-erb produces the following output:

diff --git a/app/views/devise/registrations/new.html.erb b/app/views/devise/registrations/new.html.erb
index bcebb40..22c7d25 100644
--- a/app/views/devise/registrations/new.html.erb
+++ b/app/views/devise/registrations/new.html.erb
@@ -11,8 +11,8 @@
     <div class="field">
       <%= f.label :password %>
       <% if @minimum_password_length %>
-        <em>(<%= @minimum_password_length %> characters minimum)</em>
-      <% end %><br />
+        <em>(<%= @minimum_password_length %> characters minimum)</em> </eext8
+      ><br />
       <%= f.password_field :password, autocomplete: "new-password" %>
     </div>

Running it again correctly complains and results in error code 2.

app/views/devise/registrations/new.html.erb
[error] app/views/devise/registrations/new.html.erb: Missing closing expression

Source code that breaks

<h2>Sign up</h2>

<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>

  <%= f.input :email, autofocus: true, as: :email %>
  <%= f.input :password, as: :password %>
  <%= f.input :password_confirmation, as: :password %>

  <% if false %>
    <div class="field">
      <%= f.label :password %>
      <% if @minimum_password_length %>
        <em>(<%= @minimum_password_length %> characters minimum)</em>
      <% end %><br />
      <%= f.password_field :password, autocomplete: "new-password" %>
    </div>

    <div class="field">
      <%= f.label :password_confirmation %><br />
      <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
    </div>
  <% end %>

  <div class="actions">
    <%= f.button :submit %>
  </div>
<% end %>

<%= render "devise/shared/links" %>

Ruby expressions are getting replaced with <eext>

<%= image_with_path "path" %>

is getting replaced with

<eext1/>

Support file extension .html+*.erb for rails and viewcomponent variants

This plugin currently only handles the extension .html.erb (see lib/index.js#L14)

Rails (see docs) as well as the popular viewcomponent gem support variants of template files

For example, the following naming convention would represent a default variant + a dedicated mobile and desktop variant.

app/views/home/index.html+mobile.erb
app/views/home/index.html+desktop.erb
app/views/home/index.html.erb

prettier-plugin-erb does not work for this files, as the file extension does not match.

To support this, can you please add support for the extension .html+*.erb?

Multi-line blocks are formatted but single-line ERB tags are not

Here's an example html.erb file:

<%= link_to 'New Order', new_order_path, class: "btn btn-success" %>
<%=
  select_tag 'integrator',
             options_from_collection_for_select(
               @integrators,
               :id,
               :name,
               params[:integrator],
             ),
             { prompt: 'All Integrators', class: 'dib', style: 'width:100%;' }
%>

This formats the second, multi-line block perfectly, but I can tell the first single-line link_to method call is not because the double-quotes for the class: argument do not change.

Option to prevent automatic tag closing?

I have a scenario where I individually render three partials, roughly corresponding to <ul>, a collection of <li></li> and a </ul>. These three strings are then concatenated to produce a result. (Yes, it's much more complex in reality, but this gets the idea across, hopefully.)

The problem is that when running prettier-plugin-erb, it decides that I forgot to close my <ul> and silently fixes it for me - breaking my list.

Is there a way to suppress automatic closing tag creation? Even on an explicit exception list basis?

Please consider marking this library as deprecated

Hi there,

I just had a very bad time adding this library to a project I'm working on, and having it corrupt several files due to using the latest stable version of prettier. This package is unfortunately quite broken when used with prettier@latest, as explained #44.

This library hasn't been updated in a while, and I'd wager that it is causing more harm than good at this point - please consider using npm's deprecation features to stop this library from being added to new projects.

Thank you for your work on building and maintaining this project - I'm sure it was extremely valuable at one point. There comes a time to sunset projects, and this one seems to be at EOL unless it is going to be updated and maintained.

Formatter chokes on Administrate generated templates

We are using administrate for an admin panel, and have used its built in generators to customize the ERB templates. Almost all of these templates produce some version of the following error:

app/views/admin/application/_flashes.html.erbError: @prettier/plugin-ruby encountered an error when attempting to parse the ruby source. This usually means there was a syntax error in the file in question. You can verify by running `ruby -i [path/to/file]`.
    at parseSync (/Users/wyatt/Dev/app/node_modules/@prettier/plugin-ruby/src/parser/parseSync.js:23:11)
    at Object.parse (/Users/wyatt/Dev/app/node_modules/@prettier/plugin-ruby/src/ruby/parser.js:8:10)
    at Object.parse (/Users/wyatt/Dev/app/node_modules/prettier/index.js:13625:19)
    at coreFormat (/Users/wyatt/Dev/app/node_modules/prettier/index.js:14899:14)
    at format (/Users/wyatt/Dev/app/node_modules/prettier/index.js:15131:14)
    at /Users/wyatt/Dev/app/node_modules/prettier/index.js:57542:12
    at format (/Users/wyatt/Dev/app/node_modules/prettier/index.js:57562:12)
    at /Users/wyatt/Dev/app/node_modules/prettier-plugin-erb/lib/formatter.js:16:37
    at Array.map (<anonymous>)
    at formatMultilineExpressions (/Users/wyatt/Dev/clients/cmt/provider_portal/node_modules/prettier-plugin-erb/lib/formatter.js:7:6)

The underlying template file is very simple:

<%#
# Flash Partial

This partial renders flash messages on every page.

## Relevant Helpers:

- `flash`:
  Returns a hash,
  where the keys are the type of flash (alert, error, notice, etc)
  and the values are the message to be displayed.
%>

<% if flash.any? %>
  <div class="flashes">
    <% flash.each do |key, value| -%>
      <% if value.respond_to? :html_safe %>
        <div class="alert alert-<%= key %>"><%= value.html_safe %></div>
      <% end %>
    <% end -%>
  </div>
<% end %>

Ruby not formatted if it opens a block

Environment:

Prettier 2.2.0
prettier-plugin-ruby: 1.5.5
prettier-plugin-erb: 0.4.0

NOTE: If this bug is ancient and has been fixed upstream in something that requires #49 to be resolved, please close this.

Steps to reproduce:

Set printWidth to 60
Try to format the following ERB

<% my_awesome_command :this, :list, %i[of arguments is], intentionally: :longer, than: 60.characters %>

<% my_awesome_block_command :but, :when, %i[it takes a block], it: :just, doesnt: :want, to: :format do %>
  <h1>And that's probably a bug.</h1>
<% end %>

Observed

<%
  my_awesome_command :this,
                     :list,
                     %i[of arguments is],
                     intentionally: :longer,
                     than: 60.characters
%>

<% my_awesome_block_command :but, :when, %i[it takes a block], it: :just, doesnt: :want, to: :format do %>
  <h1>And that's probably a bug.</h1>
<% end %>

Expected

I suppose something like:

<%
  my_awesome_command :this,
                     :list,
                     %i[of arguments is],
                     intentionally: :longer,
                     than: 60.characters
%>

<%
  my_awesome_block_command :but,
                           :when,
                           %i[it takes a block],
                           it: :just,
                           doesnt: :want,
                           to: :format do
%>
  <h1>And that's probably a bug.</h1>
<% end %>

Handle 2.3 prettier changes

Why add whitespace between % and # in comments?

This plugin adds whitespace between <% and # in comments, like this <% # Comment %>. In the old days, whitespace before the # was not only actively discouraged, but would potentially screw up HTML rendering. The most correct syntax was <%# Comment %>. This is also the syntax examples in the official Rails API to this day. I hadn't even seen the whitespace variant until today.

More subjective data point: I find the whitespace makes the file harder to parse with my eyes. I'm used to looking for the character following the %. Whitespace means ruby block, = means output/render, and # means comment. Having whitespace in comments too makes it harder to scan.

Is there a different reason for this standard I don't know about?

Dangling bracket for long class list

<div class="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5 some-other-class another-class yet-another-class yet-another-class">
  content
</div>

gets restyled to

<div
  class="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5 some-other-class another-class yet-another-class yet-another-class"
>
  content
</div>

Expected:

<div
  class="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5 some-other-class another-class yet-another-class yet-another-class">
  content
</div>

<div class="mt-8 sm:mt-0 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6 sm:py-5 some-other-class another-class yet-another-class yet-another-class">
  content
</div>

Should exit with non-zero status on error

render tag <%=%> replaced with [object Object] when used in img tag

Eg:
in my erb file, formatting

<img src="<%= logo %>" />

gives output

<img src="[object Object]"/>

Prettier: failed to parse buffer on html.erb file with vim editor

Details: I install it using npm, and confirm it by running npm list:

k@ /Users/k
├── @prettier/[email protected]
├── [email protected]
└── [email protected]

But, when I run :Prettier on vim opening html.erb editor, it gets the error: Prettier: failed to parse buffer

On .rb file (which is supported by plugin-ruby itself), it works.

Any idea how to fix this?

Issues with leading dash in embedded ruby block

This happens when running prettier on my legacy erb file:

-<%-
-  page = Refinery::PageDecorator.new(@page, self)
+<%
+  -page = Refinery::PageDecorator.new(@page, self)

<%- etc -%> with leading and/or trailing dash inside the block is valid Ruby, <% -etc- %> obviously isn't.

Granted, this syntax has been deprecated since Rails 4.2, so I should probably refactor my templates. In old Rails it was supposed to remove leading and/or trailing spaces in the output, but since 4.2 this behaviour changed and they're now unneeded.

Background:

But old syntax or not, this is probably still a bug?

Fails to parse an erb multiline comment with quotes inside

template_with_comment.html.erb:

<%# This is a 'quote' inside a
 multiline comment-%>
<h1>This file fails to parse</h1>

Attempting to format:

❯ yarn prettier --write template_with_comment.html.erb
yarn run v1.22.10
$ /Users/robert.dimartino/repro/node_modules/.bin/prettier --write template_with_comment.html.erb
template_with_comment.html.erbError: syntax error, unexpected local variable or method, expecting end-of-input
> 1 |  This is a 'quote' inside a
    |                         ^
  2 |  multiline comment
    at parseSync (/Users/robert.dimartino/repro/node_modules/@prettier/plugin-ruby/src/parser/parseSync.js:32:19)
    at Object.parse (/Users/robert.dimartino/repro/node_modules/@prettier/plugin-ruby/src/ruby/parser.js:8:10)
    at Object.parse (/Users/robert.dimartino/repro/node_modules/prettier/index.js:13625:19)
    at coreFormat (/Users/robert.dimartino/repro/node_modules/prettier/index.js:14899:14)
    at format (/Users/robert.dimartino/repro/node_modules/prettier/index.js:15131:14)
    at /Users/robert.dimartino/repro/node_modules/prettier/index.js:57542:12
    at format (/Users/robert.dimartino/repro/node_modules/prettier/index.js:57562:12)
    at /Users/robert.dimartino/repro/node_modules/prettier-plugin-erb/lib/formatter.js:16:37
    at Array.map (<anonymous>)
    at formatMultilineExpressions (/Users/robert.dimartino/repro/node_modules/prettier-plugin-erb/lib/formatter.js:7:6) {
  loc: { start: { line: 1, column: 25 } },
  codeFrame: "\x1B[0m\x1B[31m\x1B[1m>\x1B[22m\x1B[39m\x1B[90m 1 | \x1B[39m \x1B[33mThis\x1B[39m is a \x1B[32m'quote'\x1B[39m inside a\x1B[0m\n" +
    '\x1B[0m \x1B[90m   | \x1B[39m                        \x1B[31m\x1B[1m^\x1B[22m\x1B[39m\x1B[0m\n' +
    '\x1B[0m \x1B[90m 2 | \x1B[39m multiline comment\x1B[0m'
}

It works correctly if there are no quotes (single or double) in the multi-line comment and it works with the quotes if the tag is on one line. Not sure if there are other characters that cause syntax errors.

We encountered this error from our default kaminari templates: https://github.com/kaminari/kaminari/blob/master/kaminari-core/app/views/kaminari/_first_page.html.erb

Multiline-comment lines containing a colon are indented with each formatter run

Given a file:

<%#
Multiline comment
test: test
%>

This is the file content after running prettier for the first time:

<%#
  Multiline comment
    test: test
%>

This is the content after running prettier for the second time:

<%#
  Multiline comment
      test: test
%>

And it goes on, indenting this line with each run 😄

.prettierrc.yml:

printWidth: 100
plugins:
  - "@prettier/plugin-ruby"
  - prettier-plugin-erb

package.json:

...
"devDependencies": {
    "@prettier/plugin-ruby": "^1.5.5",
    "prettier": "2.2.1",
    "prettier-plugin-erb": "git+https://github.com/adamzapasnik/prettier-plugin-erb.git#6374074005"
  },
...

(latest master branch, as of creating this issue)

Other example, from kaminari gem:

<%# Link to the "Previous" page
  - available local variables
    url:           url to the previous page
    current_page:  a page object for the currently displayed page
    total_pages:   total number of pages
    per_page:      number of items to fetch per page
    remote:        data-remote
-%>

After formatting:

<%#
  Link to the "Previous" page
    - available local variables
      url:           url to the previous page
      current_page:  a page object for the currently displayed page
      total_pages:   total number of pages
      per_page:      number of items to fetch per page
      remote:        data-remote
-%>

After formatting again:

<%#
  Link to the "Previous" page
      - available local variables
        url:           url to the previous page
        current_page:  a page object for the currently displayed page
        total_pages:   total number of pages
        per_page:      number of items to fetch per page
        remote:        data-remote
-%>

Error formatting document: RangeError: Invalid count value

Im trying to get formatting for ERB files working. I enabled the extension "Prettier - Code formatter" in VS code. Then in terminal I installed the plugins:

cd ~/.vscode/extensions/esbenp.prettier-vscode-9.10.3
yarn add -D prettier @prettier/plugin-ruby prettier-plugin-erb

In settings.json I have:

"files.associations": {
    "*.html.erb": "erb"
  },
"[ruby]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[erb]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

After reloading VS code, I tried to format a .erb file and I get an error:

["INFO" - 4:54:21 PM] Formatting file:///home/dipen/Desktop/workspace/clearbnb/app/views/devise/registrations/new.html.erb
["INFO" - 4:54:21 PM] Using ignore file (if present) at /home/dipen/Desktop/workspace/clearbnb/.prettierignore
["INFO" - 4:54:21 PM] File Info:
{
  "ignored": false,
  "inferredParser": "erb"
}
["INFO" - 4:54:21 PM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration
["INFO" - 4:54:21 PM] Prettier Options:
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "singleAttributePerLine": false,
  "bracketSameLine": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 180,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "/home/dipen/Desktop/workspace/clearbnb/app/views/devise/registrations/new.html.erb",
  "parser": "erb"
}
["ERROR" - 4:54:21 PM] Error formatting document.
["ERROR" - 4:54:21 PM] Invalid count value
RangeError: Invalid count value
	at String.repeat (<anonymous>)
	at /home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier-plugin-erb/lib/formatter.js:42:30
	at Array.map (<anonymous>)
	at formatMultilineExpressions (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier-plugin-erb/lib/formatter.js:7:6)
	at Object.print (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier-plugin-erb/lib/printers.js:22:27)
	at callPluginPrintFunction (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/index.js:8417:26)
	at mainPrintInternal (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/index.js:8366:22)
	at mainPrint (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/index.js:8353:18)
	at printAstToDoc (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/index.js:8345:18)
	at coreFormat (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/index.js:8653:20)
	at formatWithCursor2 (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/index.js:8837:18)
	at /home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/index.js:37836:12
	at Object.format (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/node_modules/prettier/index.js:37850:12)
	at t.default.format (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/dist/extension.js:1:14731)
	at async t.PrettierEditProvider.provideEdits (/home/dipen/.vscode/extensions/esbenp.prettier-vscode-9.10.3/dist/extension.js:1:11417)
	at async B.provideDocumentFormattingEdits (/usr/share/code/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:96:39719)
["INFO" - 4:54:21 PM] Formatting completed in 309ms.

Enabling formatOnSave for VS Code

Hi @adamzapasnik

I realise you may not be a user of VS Code, so I'm intending this is a general request for anyone who may have knowledge.

I'm trying to make this work with the Prettier extension for VS Code so that it formats on save.

If I manually run Format Document, it works.

For https://github.com/prettier/plugin-ruby, I'm using this configuration:

{
  "[ruby]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
}

I've tried [erb] and [html.erb] in place of ruby but it doesn't seem to work.

It's possible this this might need an update the Prettier extension. I see one mention of ruby in https://github.com/prettier/prettier-vscode/blob/1a2137091516b0a319268a522b5e27f98f7d36e1/package.json#L46

Invalid erb output for long blocks

Prettier-plugin-erb currently sometimes split the do from a block onto a new line, causing a syntax error:

ActionView::SyntaxErrorInTemplate - Encountered a syntax error while rendering template

Example input:

<%= link_to signout_path, class: "very-long-class-name-here-to-cause-line-break" do %>
  Welcome
<% end %>

Output:

<%= link_to signout_path, class: "very-long-class-name-here-to-cause-line-break"
do %> Welcome <% end %>

Full error:

ActionView::SyntaxErrorInTemplate - Encountered a syntax error while rendering template: check <%= link_to signout_path, class: "very-long-class-name-here-to-cause-line-break"
do %> Welcome <% end %>:
  app/views/layouts/application.html.erb:70

Formatter Chokes on Conditional Tags

We have an (admittedly weird) pattern in some of our ERB files. The parser chokes on this, where we are conditionally adding opening and closing tags.

<% token ||= false %>
<% value ||= nil %>

<div>
  <% if token && value.present? %>
    <span class="token">
  <% end %>

  <%= value || yield %>

  <% if token && value.present? %>
    </span>
  <% end %>
</div>

I can rewrite this file to pass the parser, but this seems like it shouldn't blow up. Error is here:

app/views/shared/partials/_panel_card.html.erbSyntaxError: Unexpected closing tag "eext8". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (14:4)
  12 |
  13 |     <span class="token">
> 14 |    </eext8>
     |    ^^^^^^^^
  15 |
  16 |    <eext9 />
  17 |
    at vt (/app/node_modules/prettier/parser-html.js:41:48413)
    at Mn (/app/node_modules/prettier/parser-html.js:113:2409)
    at Un (/app/node_modules/prettier/parser-html.js:113:4175)
    at Object.parse (/app/node_modules/prettier/parser-html.js:113:4895)
    at Object.parse (/app/node_modules/prettier/index.js:13625:19)
    at textToDoc (/app/node_modules/prettier/index.js:14560:25)
    at /app/node_modules/prettier/index.js:14545:95
    at embed (/app/node_modules/prettier-plugin-erb/lib/printers.js:17:19)
    at Object.embed (/app/node_modules/prettier-plugin-erb/lib/printers.js:28:16)
    at Object.printSubtree (/app/node_modules/prettier/index.js:14545:28) {
  loc: { start: { line: 14, column: 4 }, end: { line: 14, column: 12 } },
  codeFrame: '\u001b[0m \u001b[90m 12 | \u001b[39m\u001b[0m\n' +
    '\u001b[0m \u001b[90m 13 | \u001b[39m    \u001b[33m<\u001b[39m\u001b[33mspan\u001b[39m \u001b[36mclass\u001b[39m\u001b[33m=\u001b[39m\u001b[32m"token"\u001b[39m\u001b[33m>\u001b[39m\u001b[0m\n' +
    '\u001b[0m\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 14 | \u001b[39m   \u001b[33m<\u001b[39m\u001b[33m/\u001b[39m\u001b[33meext8\u001b[39m\u001b[33m>\u001b[39m\u001b[0m\n' +
    '\u001b[0m \u001b[90m    | \u001b[39m   \u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[31m\u001b[1m^\u001b[22m\u001b[39m\u001b[0m\n' +
    '\u001b[0m \u001b[90m 15 | \u001b[39m\u001b[0m\n' +
    '\u001b[0m \u001b[90m 16 | \u001b[39m   \u001b[33m<\u001b[39m\u001b[33meext9\u001b[39m \u001b[33m/\u001b[39m\u001b[33m>\u001b[39m \u001b[0m\n' +
    '\u001b[0m \u001b[90m 17 | \u001b[39m\u001b[0m'
}

Incorrect treatment of <%== %> in html.erb files

Hello

It looks like (using version 0.4.0) prettier plugin erb is not handling correctly things like

<%== 'something' %>

when running prettier it will signal files containing that code and when --write option is passed it will attempt to rewrite it to

<%= = 'something' %>

<%== is a valid html.erb thing (check https://edgeguides.rubyonrails.org/active_support_core_extensions.html#safe-strings )
and it simply is an equivalent of raw method.

The workaround is to use

<%= raw('something') %>