Feature request: Let user customize indentation settings

Some people are fans of 4 spaces, some people are fans of tabs, some people like 2 spaces.

Wouldn’t it be nice if they all found a space to code happily in ObservableHQ?

Right now if I hit [Tab] the editor inserts a Tab character. Then I write my line of code and hit and the editor inserts two spaces in the next row. This is confusing and also ugly.

I suggest to stick with existing indentation after [Return]'s. So if the current line is using 3 tab characters, start the next line with 3 tab characters. If the line is using 8 space characters, start the next line with 8 space characters, etc.

Also it would be nice if I could change the default behavior on Tab keys to be N spaces.

Check out the issue for enabling prettier for some of the thinking here behind the scenes - the gist is, well:

  • The current literal-tabs-and-then-inferred-spaces behavior is, pardon my french, bad, and we’re going to replace it ASAP with expandtab style behavior that at least doesn’t leave you with a mix of tabs and spaces, a style with almost no representation in the JS world.
  • My favored long-term solution is to enable prettier, with fixed defaults - the prettier defaults. There are a few delicious layers to this opinion, one of them being that we hope many Observable users are just entering programming, and we hope that the future of programming is free of stylistic battles. There’s also an emerging consensus around these defaults - 2 space, semicolon-required.

And, sure - this is a super opinionated topic amongst seasoned programmers, but I don’t think we should only care about seasoned programmers, and we should also expect them to change over time. I certainly did, after tinkering with other languages and seeing the simplicity of auto-formatting as the only kind.



We’ve updated our indentation behavior. Now, soft tabs with two spaces of indentation is the default — both in CodeMirror’s auto indentation capacity, and when you hit the Tab key. You can also select complete lines of code and hit Tab to indent them.

When you’re editing your TSVs: to insert a literal Tab character, use Control-Option-Tab.

I know it’s not as flexible as “stick with existing indentation”, but hopefully it feels a lot better now.

1 Like


1 Like


this works! I presume you shared this update for us to beta test and check it out, and it’s not the final code formatting options solution design.

Prettier is nice, but I doubt intermediate devs would go to this length or find this tip and enable it,
unless and this is a stretch:

I would propose you add config option for notebooks or per profile similar to how VS Code does it to allow devs to tweak code formatting, etc. on global dev profile environment setup or per notebook level.

I mainly suggest going that route since you’ll find eventually there will be many of these kind of feature requests that you can easily support and extend for skins, etc. with just a simple json.config if more experienced devs want to futz with it.

Yep, making features testable with localStorage is how we beta-test features before we’re sure we’re ready to turn them on - toggling something in localStorage isn’t our long term plan for anything :wink:


so sneaky! but I like how you utilize localStorage for notebook drafts saves, etc. :sunglasses: