Prettier v1.11.1 is mixing spaces and tabs for alignment

[kiruh]

Prettier 1.11.1
Playground link

# Options
--use-tabs
--tab-width 4

Input:

const store = useLoggerAndDevTools
	? createStore(
			reducer,
			logRedux
				? compose(applyMiddleware(createLogger(), thunk))
				: compose(applyMiddleware(thunk))
>		)
	: createStore(reducer, applyMiddleware(thunk));

Output:

const store = useLoggerAndDevTools
	? createStore(
			reducer,
			logRedux
				? compose(applyMiddleware(createLogger(), thunk))
				: compose(applyMiddleware(thunk))
>	  )
	: createStore(reducer, applyMiddleware(thunk));

Expected behaviour (as it were in v1.10.2):

const store = useLoggerAndDevTools
	? createStore(
			reducer,
			logRedux
				? compose(applyMiddleware(createLogger(), thunk))
				: compose(applyMiddleware(thunk))
>		)
	: createStore(reducer, applyMiddleware(thunk));

v1.11.1 is mixing tabs and spaces as shown in output. ESLint is throwing an exception no-mixed-spaces-and-tabs.

Is it a bug? If not maybe there should be an option for mixing spaces and tabs for alignment.

[lydell]

As far as I know, it is on purpose. I think essentially the same discussion is currently going on in #4198.

Since you mention ESLint … if that's your only issue the solution is easy. We recommend turning off all conflicting ESLint rules: https://prettier.io/docs/en/eslint.html#turn-off-eslint-s-formatting-rules

[kiruh]

@lydell I know that it's possible to disable ESLint formatting rules, but mixed spaces and tabs just don't look very good (for me).

I've heard:

Use tabs for indentation, spaces for alignment.

But maybe it should be optional. Because for me 2 tabs look more readable than 1 tab and 2 spaces. Even if it's not aligned.

In #4198 the main discussion is about nested tabs.

[lydell]

I know that it's possible to disable ESLint formatting rules, but mixed spaces and tabs just don't look very good (for me).

Pro-tip: Actually say so from the beginning then! Thanks :)

[thorn0]

@kiruh How does this indentation look to you (let's pretend that those spaces are tabs)?

const store = useLoggerAndDevTools
    ? createStore(
        reducer,
        logRedux
            ? compose(applyMiddleware(createLogger(), thunk))
            : compose(applyMiddleware(thunk))
    )
    : createStore(reducer, applyMiddleware(thunk));

[kiruh]

How does this indentation look to you (let's pretend that those spaces are tabs)?

@thorn0 It looks good.

[alexgv99]

You have to change the eslint rule so it support smart-tabs:
"no-mixed-spaces-and-tabs": ["warn", "smart-tabs"],

[lydell]

Even better: "no-mixed-spaces-and-tabs": "off". Or use eslint-config-prettier :)

[kiruh]

I know that it's possible to disable ESLint formatting rules, but mixed spaces and tabs just don't look very good (for me).

But maybe it should be optional. Because for me 2 tabs look more readable than 1 tab and 2 spaces. Even if it's not aligned.

[suchipi]

Sorry; thanks for the clarification.

I don't have a horse in this race since I don't use tabs. I'll let those with informed opinions discuss this.

[teameh]

I don't care either about the default. But I expect "no-mixed-spaces-and-tabs": ["error"], to result in no smart-tabs when using eslint-config-prettier. Currently that is not the case, I keep getting spaces.

[lydell]

@teameh Please open an issue in eslint-config-prettier if there’s something it could do better :)

[j-f1]

@teameh Prettier’s use of mixed spaces and tabs is not configurable. eslint-config-prettier is designed to disable conflicting rules, not to alter Prettier’s behavior. We recommend removing all formatting-related rules from your ESLint config.

[kiruh]

Prettier’s use of mixed spaces and tabs is not configurable.

@j-f1 Should it become configurable in future?

[j-f1]

@kiruh Not unless there’s lots of support — see our option philosophy.

[thorn0]

I wonder if there exists a tab user who would oppose to a spaceless formatting like this:

1. Prettier v1.11.1 is mixing spaces and tabs for alignment #4199 (comment)
2. TypeScript: nested union types + useTabs #4198 (comment)

If there is no any, what is needed here is not configurability then.

[jankalfus]

This is most definitely an issue. Why would you want to ever mix spaces and tabs? It just doesn't feel right.

[duailibe]

@jankalfus Sorry that's an issue. Unfortunately saying it "doesn't feel right" adds nothing to the discussion. And the "why" has already been discussed above.

If you want to help, we'll take suggestions on how to improve this (no options), with real code examples. Or PRs.

@thorn0 Are you interested in opening a PR with your suggestion?

[jankalfus]

@duailibe Sorry for not being specific. I guess my question would be: Why has this even been introduced? What is the reasoning behind it?

I simply don't understand why someone would want to mix tabs and spaces. Generally, if spaces are used, then it's because it is required that the code looks the same on all people's monitors. If tabs are used, then everybody can use whatever tab size they prefer. If I change tab size on my machine, the code will look broken with mixed spaces.

[duailibe]

@jankalfus Because prettier aligns everything after ? (in the OP that would be createStore aligned with the closing )).

cond
  ? {
      foo
    } // this is aligned with the opening bracket
  : foo;

I simply don't understand why someone would want to mix tabs and spaces

Again this is the kind of statement that adds nothing to discussion and doesn't help getting your problem fixed. This is not a support center. We'll take suggestions but we don't need complaints.

[jankalfus]

@duailibe I gave you an explanation. Taking a single sentence out of context doesn't make the rest of my post irrelevant.

[ikatyang]

If tabs are used, then everybody can use whatever tab size they prefer.

The question is, tabs-only is not aligned, which is why someone raised #2771.

const store = useLoggerAndDevTools
	? createStore(
			reducer,
			logRedux
				? compose(applyMiddleware(createLogger(), thunk))
				: compose(applyMiddleware(thunk))
		) // <------------
	: createStore(reducer, applyMiddleware(thunk));

If I change tab size on my machine, the code will look broken with mixed spaces.

What do you mean broken? There shouldn't be any visual difference with or without --use-tabs.

[jankalfus]

Scratch everything I said. You're right, it doesn't get broken with mixed tabs and spaces, I just realized it. Sorry!

[suchipi]

I'm going to close this as intended behavior. The arguments against doing this seem to be based on personal preference. However, if someone has a bad experience in their editor because of this and can explain why, I would be open to reconsidering.