Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fat-arrow indentation does not follow the indentation used with function #314

Closed
iambumblehead opened this issue Feb 17, 2016 · 30 comments
Closed

Comments

@iambumblehead
Copy link

@iambumblehead iambumblehead commented Feb 17, 2016

fat-arrow indentation does not follow the indentation used with function

foo.bar.baz(function (very) {
  return very;
}).biz(function (baz) {
  return baz;
});

foo.bar.baz(very =>
            very
           ).biz(baz =>
                 baz);
@dgutov

This comment has been minimized.

Copy link
Collaborator

@dgutov dgutov commented Feb 17, 2016

Compare:

foo.bar.baz(very => {
  very
}).biz(baz => {
  baz
});

We could add a new rule for "expression arrows", but is there really much point? Usually, you'd put the return value on the same line as the argument.

@iambumblehead

This comment has been minimized.

Copy link
Author

@iambumblehead iambumblehead commented Feb 19, 2016

your comparison should look like this

foo.bar.map(very => {
  return very;
}).filter(baz => {
  return baz;
});

vs this

foo.bar.map(very => 
  very
).filter(baz => 
  baz
);
@dgutov

This comment has been minimized.

Copy link
Collaborator

@dgutov dgutov commented Feb 19, 2016

What's your point?

@iambumblehead

This comment has been minimized.

Copy link
Author

@iambumblehead iambumblehead commented Feb 19, 2016

Your comparison is formatted nicely by js2-mode but does not include the needed return statement. Your comparison requires extra '{', '}' and 'return'.

It is a small difference but this style of formatting is unnecessarily verbose.

@dgutov

This comment has been minimized.

Copy link
Collaborator

@dgutov dgutov commented Feb 19, 2016

That's correct. But speaking of style, I'd write your example like this:

foo.bar.map(very => very)
  .filter(baz => baz);

Anyway, I'd accept a patch to improve that, but whoever takes it on, should start with js-mode. In Emacs>=25, we're using its indentation code.

@quarterto

This comment has been minimized.

Copy link

@quarterto quarterto commented Apr 7, 2016

It's quite common, especially when using things like Promises, to have long chains of method calls within fat arrow expressions. This currently indents horribly:

screenshot 2016-04-07 10 07 54

@dgutov

This comment has been minimized.

Copy link
Collaborator

@dgutov dgutov commented Apr 7, 2016

See also #76.

@shfx

This comment has been minimized.

Copy link

@shfx shfx commented Apr 15, 2016

👍

@eqyiel

This comment has been minimized.

Copy link

@eqyiel eqyiel commented Aug 26, 2016

Yeah, this is pretty bad:

const query = (command, values) =>
        new Promise((resolve, reject) =>
                    typeof values === undefined
                    ? connection.query(command, (error, results, fields) =>
                                       error ? reject(error) : resolve({ results, fields }))
                    : connection.query(command, values, (error, results, fields) =>
                                       error ? reject(error) : resolve({ results, fields })));

Ideally it would indent like this:

const query = (command, values) =>
  new Promise((resolve, reject) =>
    typeof values === undefined
      ? connection.query(command, (error, results, fields) =>
        error ? reject(error) : resolve({ results, fields }))
      : connection.query(command, values, (error, results, fields) =>
        error ? reject(error) : resolve({ results, fields })));
@dagda1

This comment has been minimized.

Copy link

@dagda1 dagda1 commented Jun 21, 2017

Has anyone a solution for arrow functions in emacs?

I'm curious to know where one would need to start looking to apply a fix?

@iambumblehead

This comment has been minimized.

Copy link
Author

@iambumblehead iambumblehead commented Jun 21, 2017

my solution has been to use paren characters in the way below. I've been working with others who do not use emacs and the extra parens have never been a source for complaint.

foo.bar.baz(very => (
  very
)).biz(baz => (
  baz
));
@dagda1

This comment has been minimized.

Copy link

@dagda1 dagda1 commented Jun 21, 2017

@iambumblehead

This comment has been minimized.

Copy link
Author

@iambumblehead iambumblehead commented Jun 21, 2017

for a large react codebase you may want to use vscode. vscode is not another trendy marketed toy and is gaining recognition as the best tool for javascript development.

@dagda1

This comment has been minimized.

Copy link

@dagda1 dagda1 commented Jun 21, 2017

@iambumblehead I've tried them all, vscode, sublime, webstorm etc. I found vscode useful for debugging node but that is it. I've come from IDE land which is why I love

I love emacs for many reasons, this is the only missing piece of the js puzzle.

rxjs helps with jsx but again falls down on this type of syntax:

const myComponent = ({ children }) =>
  <div>{children}</div>

This works fine:

const myComponent = ({ children }) => {
  return (
    <div>{children}</div>
  )
}

You are asking me to switch editors because this is missing?

@dagda1

This comment has been minimized.

Copy link

@dagda1 dagda1 commented Jun 21, 2017

There are also problems with decorators, e.g.

@myDecorator
class MyClass {

As javascript changes so much I expect this to be an ongoing problem

@iambumblehead

This comment has been minimized.

Copy link
Author

@iambumblehead iambumblehead commented Jun 21, 2017

const myComponent = ({ children }) => (
  <div>{children}</div>
);

a tool like vscode stays abreast of frequent popular innovations and is good for commodity programming.

Emacs is preferred for specialised programming.

@dagda1

This comment has been minimized.

Copy link

@dagda1 dagda1 commented Jun 21, 2017

Oh I see, get off my lawn commoner?

@dagda1

This comment has been minimized.

Copy link

@dagda1 dagda1 commented Jun 21, 2017

I'd actually love to know what your point is?

If this was clojure would you say the same answer?

@TatriX

This comment has been minimized.

Copy link

@TatriX TatriX commented Jun 21, 2017

While formating the code like this

foo.bar.baz(very => 
  very
).biz(baz => 
  baz
);

looks ugly to me, it has an advantage: one can add a breakpoint to the very line (inside the callback).

@dagda1

This comment has been minimized.

Copy link

@dagda1 dagda1 commented Jun 21, 2017

That as maybe but a language feature is currently not workable in emacs. I've tried webmode, js2-mode and rjsx-mode and none have come up with a solution.

@dgutov

This comment has been minimized.

Copy link
Collaborator

@dgutov dgutov commented Jun 21, 2017

I'm curious to know where one would need to start looking to apply a fix?

You can start with js-indent-line (in lisp/progmodes/js.el inside Emacs).

And let's be civil. JS has become a fast-paced ecosystem, with more and more editor support required. So if you absolutely have to have certain niceties, another editor might be a better choice.

But patches are welcome, of course. When we're talking about JS indentation, though, the patches will have to be submitted to Emacs.

@dagda1

This comment has been minimized.

Copy link

@dagda1 dagda1 commented Jun 28, 2017

Actually prettier-js does a very good job of formatting all newer js.

@dgutov

This comment has been minimized.

Copy link
Collaborator

@dgutov dgutov commented Jul 3, 2017

Y'all can now install the latest Emacs 26 snapshot and try (setq js-indent-align-list-continuation nil).

@iambumblehead

This comment has been minimized.

Copy link
Author

@iambumblehead iambumblehead commented Jul 29, 2017

@dgutov thank you! do you know Emacs 26 might be officially released?

@dgutov

This comment has been minimized.

Copy link
Collaborator

@dgutov dgutov commented Jul 29, 2017

It's most likely months away. Maybe a year, even.

But the master branch is pretty stable these days.

@felipeochoa

This comment has been minimized.

Copy link
Contributor

@felipeochoa felipeochoa commented Nov 8, 2017

FYI: I sent across a proposed fix on js.el for this issue that avoids having to use js-indent-align-list-continuation

@wyuenho

This comment has been minimized.

Copy link
Contributor

@wyuenho wyuenho commented May 16, 2018

Can you guys try this branch out and see if it's fixed? I think I've effectively by-passed @felipeochoa fix that's still pending to be merged into Emacs's js-mode. If you don't want to wait, I think my fix is pretty good for now.

@jacksonrayhamilton

This comment has been minimized.

Copy link
Contributor

@jacksonrayhamilton jacksonrayhamilton commented Feb 13, 2019

The fix that @felipeochoa submitted has been merged to Emacs master, should be available in Emacs 27. (Thanks Felipe and Dmitry!)

@felipeochoa

This comment has been minimized.

Copy link
Contributor

@felipeochoa felipeochoa commented Feb 13, 2019

Awesome, thank you for pushing that through! Sadly haven't had much time for OS work lately

@jacksonrayhamilton

This comment has been minimized.

Copy link
Contributor

@jacksonrayhamilton jacksonrayhamilton commented Jun 4, 2019

@dgutov Should this issue be closed now?

@dgutov dgutov closed this Jun 4, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
10 participants
You can’t perform that action at this time.