Auto-indent doesn't work with Liquid syntax

support
#1

Hi There,

Very new to Atom so sorry if this is easy - how do you get auto-indent working with the Liquid syntax?

I get this…

{%- if settings.favicon != blank -%}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
{%- endif -%}

Instead of this…

{%- if settings.favicon != blank -%}
    <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
{%- endif -%}

What I’m after is 4 spaces for tabs instead of 2. I have that set in config.cson but when I open files they’re still 2 spaces - is there another way to force 4 spaces for any file in Atom?

Any help would be much appreciated.

#2

Have just found this: https://github.com/puranjayjain/language-liquid/issues/15

Is it a syntax issue or is there a way to force 4 spaces for tabs (so no need to re-indent)?

#3

Go Settings ➔ Packages ➔ language-liquid to find Liquid specific settings, including soft tabs and their length in spaces.

1 Like
#4

Thanks for that, took me a while to find settings (it’s preferences on a Mac) but the default tab length is already set to 4.

The file is from Shopify which uses 2 spaces, is there a way to have Atom switch it to 4 without re-indenting it (because re-indent doesn’t work as per first post)?

Any pointers in the right direction would be much appreciated.

#5

Or is is this why people use tabs instead of spaces?

I also tried this auto-indent package: https://github.com/griiin/atom-auto-indent but it also doesn’t indent Liquid files properly.

I read that the Atom team uses Liquid? If true, I must be doing something wrong, any help much appreciated.

#6

is there a way to have Atom switch it to 4 without re-indenting it (because re-indent doesn’t work as per first post)?

You mean internally use 2, but display as 4? It’s theoretically possible, as it works with tab characters, but I don’t think there is any support for it.

If you mean actually replace 2 spaces with 4, I’m sure there’s a package for that.

Or is is this why people use tabs instead of spaces?

I suppose so. I use spaces myself, and either do what I like or stick with the existing codebase style.

I read that the Atom team uses Liquid?

I don’t know about this; I haven’t seen it in any of the code base. It’s possibly used somewhere not public though, like the atom.io source. I’d also have thought they’d make a language package for it if it was used.

but it also doesn’t indent Liquid files properly.

Do you mean it doesn’t replace 2 spaces with 4? Or if it starts with no indent on each line, it still won’t indent them properly?

1 Like
#7

Thanks again for the reply, very helpful.

Aerijo If you mean actually replace 2 spaces with 4, I’m sure there’s a package for that

Yes, replace 2 spaces with 4 automatically (or as automatically as possible) and have tried the native function, and the auto-indent package: https://github.com/griiin/atom-auto-indent

cmscss but it also doesn’t indent Liquid files properly.

Aerijo Do you mean it doesn’t replace 2 spaces with 4? Or if it starts with no indent on each line, it still won’t indent them properly?

Both the native function, and the package replaces 2 spaces with 4 (perfect) but it doesn’t indent the code properly. I get this…

{%- if settings.favicon != blank -%}
<link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
{%- endif -%}

Instead of this…

{%- if settings.favicon != blank -%}
    <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
{%- endif -%}

Does that make sense?

#8

It doesn’t work because the grammar hasn’t defined when to indent and unindent. Languages that want this to work with core Atom need to define these settings. You can add these yourself to your config.cson file at the root level, like

'*':
  ... # there'll be a bunch of stuff under the global scope settings

'.text.html.liquid':
  'editor':
    'increaseIndentPattern': 'foo' # regex to trigger indentation of following line; JS does it after every '{', '[', or '(' that has no close on the same line (it's not perfect, but works in 99% of cases)
    'decreaseIndentPattern': 'bar' # regex to trigger unindent of current line

You’d have to decide on the actual values though. I don’t know Liquid, so can’t help there.

It’s possible a dedicated package exists that doesn’t need this, but that’s how the commands you are using work generically across all languages.

1 Like
#9

Wow, thank you so much, I fully understand what you’re saying but that JS example is WAY above my pay grade.

Thanks again though.