Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Code is formatted wrongly, breaking strings

See original GitHub issue

When I format the following code:

<div class="details-header">
  <div class="details-title">{$t('details.title')}</div>
  <div class="more-info" on:click="toggleTooltips()">
     {#if showTooltips}
        <Icon
           icon={{
              name: 'close',
            className: 'text-size-normal material-icons align-middle text-color-red'
         }}
      />
    {:else}
      <Icon
      icon={{
        name: 'help_outline',
        className: "text-size-normal material-icons align-middle text-color-red"
      }}
    />
    {/if}
  </div>
</div>

the result is broken – notice the split string in the 4th line, the one starting with text-size-normal material-icons – part of the text goes into the next line, causing a JavaScript error.

<div class="details-header">
   <div class="details-title">{$t('details.title')}</div>
     <div class="more-info" on:click="toggleTooltips()">
        {#if showTooltips} <Icon icon={{ name: 'close', className: 'text-size-normal material-icons
        align-middle text-color-red' }} /> {:else} <Icon icon={{ name: 'help_outline', className:
        "text-size-normal material-icons align-middle text-color-red" }} /> {/if}
   </div>
 </div>

I’m using the latest version of Prettier (github:prettier/prettier) plus the 1.1.0 version of prettier-plugin-svelte

Issue Analytics

State:
Created 3 years ago
Reactions:2
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

ehrencronacommented, Sep 3, 2020

I think this (the string line breaking) has been resolved; I can’t reproduce it. The comment by @nickarora seems to refer to an unrelated issue.

I’d propose closing this issue.

0reactions

nickaroracommented, Jun 28, 2020

We are definitely experiencing this:

Before formatting:

<img src={url} alt={title} />

after

<img src="{url}" alt="{title}" />

prettier config:

{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "proseWrap": "never",
  "semi": false,
  "singleQuote": true,
  "svelteSortOrder" : "scripts-markup-styles",
  "svelteStrictMode": true,
  "svelteBracketNewLine": true
}

How can we prevent quotes from wrapping attributes when we are passing a variable or object to a component?

edit: nevermind – it’s caused by this setting: "svelteStrictMode": true,

Top Results From Across the Web

Black incorrectly formatting code - output has lines with more ...

Run Black on it with no arguments. Observe that nothing happens, even though the first line has 125 characters and so should be...

Improperly formatted string arguments - AWS Documentation

Format strings appropriately for their argument types. For example, use %d , not %s , for integers. This ensures locale-sensitive formatting. Detector ID....

Format String Bugs - The Amazing King

By now, its time for a break from buffer overflows. In this tutorial, we'll be discussing a different sort of vulnerability called format...

How can I break up this long line in Python? - Stack Overflow

It's not a bad practice to define your longer strings outside of the code that uses them. It's a way to separate data...

Formatting errors - Loco - Translation

Incorrectly formatted strings can cause fatal errors under PHP 8. This is likely to be a mistake in the translation, rather than in...