Unwanted extra tab after if statement in JavaScript files with auto indent

[CLNoob]

Hi. I am using Pulsar 1.113.0 on Ubuntu 20.04. I have auto indent enabled. The expected auto indent behavior is as follows:

if (condition)
{
	// stuff...

But in JS files, the editor adds an extra tab before the curly brace:

if (condition)
	{
		// stuff...

It seems to only affect some blocks I tried (if, Promise, forEach) and not some other blocks I tried (for, while, function). I can't say for sure exactly what other blocks it affects or not.

It could be an issue with the language-javascript package because:

• this problem seems to appear in JS files (I tried PHP and C and those are ok)
• this problem seems to go away if the language-javascript package is disabled (but then no more syntax highlighting).

How do I fix this? Thanks.

UPDATE: the new settings in the language-javascript package in Pulsar version 1.114.0 seems to have solved the issue mentioned in this question. Thanks!

[savetheclocktower]

You are a victim of an opinionated choice I made. I was trying to catch cases where people would write

if (isDisabled)
  return false;

but it doesn't envision your style of indentation. I'll fix this by moving it into a configuration option in language-javascript and language-typescript so that you can disable it.

Can you give me examples of the issues you encountered with Promise and forEach, though? Those don't seem related off the top of my head.

[CLNoob]

Good point. I would be happy to just have a toggle option between the new smarter indentation style and the old normal indentation style (used in older versions of Atom/Pulsar). Thanks again for your contribution.

[savetheclocktower]

Your forEach and Promise examples are fun because they only happen when the confusingly named “Autocomplete Brackets” setting is disabled in bracket-matcher.

Assume | depicts the cursor in these examples. When you have typed arr.forEach((item) => with that setting enabled, there is a ) after your cursor:

function foo (arr) {
  arr.forEach((item) => |)
}

When you press Return, the dedent action triggers because it notices that a ) is the first content on the new line. The indent that would ordinarily happen from the unbalanced ( on line 1 is immediately balanced with a dedent on line 2:

function foo (arr) {
  arr.forEach((item) =>
  |)
}

If you don't have that setting enabled — and I'm betting you've disabled it because it gets in the way of your indentation style — then you don't have a trailing ):

function foo (arr) {
  arr.forEach((item) => |
}

Hence pressing Return triggers an indent that you don't want because you intend to type an opening brace:

function foo (arr) {
  arr.forEach((item) =>
    |
}

If you were to type ) at this point, the line would dedent to the level you want, but you'd have to move your cursor afterward. I understand why you wouldn't want to do that.

The TextMate grammar does the “right” thing (meets your particular expectations) when “Autocomplete Brackets” is disabled:

function foo (arr) {
  arr.forEach((item) =>
  |
}

But not when it's enabled:

function foo (arr) {
  arr.forEach((item) =>
|
}

In short, if you had disabled “Autocomplete Brackets” because of its behavior in TextMate grammars, you might think about re-enabling it now. If that setting causes other annoying side effects that you'd like to avoid, you might be able to mitigate those side effects by customizing the “Autocomplete Characters” setting or the “Pairs With Extra Newline” setting instead of just disabling the behavior altogether.

I'll be adding granular settings so you can control whether to indent after each of {, (, and [. But I'm not certain I'll be able to replicate the exact behavior of the TextMate grammar's indentation, because some of its behavior is weird and hard to understand.

[CLNoob]

Yup, I never liked autocomplete, makes me want to rage at the editor. So things like Autocomplete Brackets are some of the first things I disable on a freshly installed editor. I tried fiddling with the customizable stuff inside bracket-matcher, but could not find anything to solve my issue.

However, I just booted up Windows 10 and launched an older installation of Pulsar I had there (1.111.0) to confirm if the same issue was present or not. It's working just fine without the extra indentation problem.

So if you could just add a toggle option between the newer indentation system (present in newer versions, I don't know exactly when it changed) and the older indentation system (present in version 1.111.0 for example), that should be sufficient for people like me who are used to the older style. Thanks.

[savetheclocktower]

It's not that easy because the older indentation behavior relies on a system that we're trying to move away from. In TextMate-style grammars, all indentation is controlled by unwieldy regular expressions, and it was a design goal of this new system to move to something more intuitive for grammar authors. The old system still exists, but the infrastructure isn't there (yet) to do the old indentation system on the new grammars.

I have an eventual goal to make indentation truly pluggable, but in the meantime, here are your options:

1. Wait for 1.114 (in a couple weeks) or the next rolling release of 1.113 (hopefully in a few days) for the fix I described above. You'll be able to turn off nearly all JavaScript indentation rules — if you wanted, you could uncheck everything and leave only the rule that indents after { and dedents before }.
2. Revert to the previous Tree-sitter grammar, which used TextMate-style indentation for most languages. This will restore the experience you had in 1.111, but it will be removed as an option eventually when we upgrade our version of Electron, as legacy Tree-sitter bindings are one of the few things preventing us from upgrading. (Hopefully by then we'll be able to offer you the exact indentation experience you want.)
3. Revert to the original TextMate grammar for JavaScript. This is ultimately the source of the indentation behavior you like, though the syntax highlighting choices it makes may be something you're not used to. The upside here is that this kind of grammar will be around indefinitely, even after the Electron upgrade.

If you want option 2, here's what to add to your config.cson:

".js.source":
  core:
    useLegacyTreeSitter: true

If you want option 3, add this instead:

".js.source":
  core:
    useTreeSitterParsers: false

But when you upgrade to 1.114, please do disable those config snippets for long enough to decide if the new indentation settings can meet your needs.

[CLNoob]

Understood. I tried both option 2 and 3. Option 3 seems to work fine, although a little lacking in syntax highlighting as you mentioned. Option 2 seems exactly what I was looking for. Although it is temporary, activated it for now, and looking forward to the next version release. Thank you very much for your help.

[ghxstweb]

How can I access the language-jacvascript configuration settings? Is it in some file folder on my machine? Thanks in advance for your time!

[savetheclocktower]

Open your Settings page, click on the Packages pane in the sidebar, then find your language-javascript package. Click on the settings button.

There's also the experimental settings search interface — the first entry in the sidebar.

I've got the package-settings package installed so that I can open the command palette and type in Package Settings: Language JavaScript (or, rather, the fewest characters I can get away with before that's the first entry) and be taken straight there.