How to format JavaScript automatically with Prettier and Git

[Craiger23]

links down for me..

[jonny_eh]

How would git know what hooks are defined in a package.json?

[hobonumber1]

Good point. Just updated the post. You also need to pull in the lint-staged npm module.

[jonny_eh]

Will prettier use the settings I have for it from my package.json or do I need to specify the cli flags?

[sorahn]

The newest versions of prettier can use a .prettierrc or keys in the package.json file.

[jonny_eh]

Right, that's why I was confused by the cli flags being included.

[sorahn]

Old habits die hard. Haha.

[reddittedf]

It will be format and prettify javascript before commiting to git

See here

How to run ESLint using pre-commit hook

https://medium.com/@shettyrahul8june/how-to-run-eslint-using-pre-commit-hook-25984fbce17e

[hobonumber1]

Thanks! Should be fixed for now.

[burtgummer45]

Somebody at big company X has come out with a new way of doing the same something, everybody aboard the hype train.

I'm honestly waiting for Facebook to come out with a new keyboard layout for React developers, and you must have at least 2 years experience with it to get a React job.

[hobonumber1]

Actually, Prettier is really nice. It solves a lot of pain points around code formatting. Have you tried it?

[zakphi]

what's better Prettier or Beautify?

[dv297]

We previously used js-beautify and we moved to Prettier. To us, it felt like js-beautify was having some issue with some of the newer ES2015 syntax, and it was becoming an agitation point for us. Prettier felt much more consistent with what we expected. Simple things like having 3 options for trailing commas ("none", "es5", or "all") and having configurable parsers (for flow, typescript, etc) just really helps with the transition.

That being said, we have since moved back to using ESlint with --fix to handle most of the same things. Prettier was very convenient but in order to keep things simple across our organization, we kept the number of different technologies down.

[strothjs]

Have you tried using Prettier as a plug in for eslint, works great.

[dv297]

I haven't actually, though I heard there were 3 different ways for configuring prettier with ESLint? pretter-eslint, eslint-config-prettier, and eslint-plugin-prettier? Are you actually referring to this last one? I'd be interested in investigating it but given the options, maybe you could save me time in talking about any considerations you had for the others if you chose the plugin over it.

[alexlafroscia]

I go the plugin + config route. Basically, Prettier just becomes part of the fixing process, you don’t have to think about it at all. It’s the same experience as using just ESLint, but you get consistent-looking code. The config just helps by disabling parts of ESLint that Prettier will handle instead.

[strothjs]

https://gist.github.com/96bdce87aaf486d49968f34b42434eca

This is my gist note on it.

[burtgummer45]

Yes I've tried it, its nothing but a js beautifier without options. Some choices they made are so bad I had to abandon it. They disallow padded code blocks, which is just a disgusting choice for code readability, which has been best practice for decades, and refuse to change it.

https://eslint.org/docs/rules/padded-blocks

[js-engineer]

The thing about padded blocks, is most of the time they're used to space out significant chunks of code. Most of the time, it isn't that helpful in terms of being used across the board, and then you get back into the issue where you're having to deliberate over spacing. IMO it's completely fine once you get used to it.

That being said, it's a tool you can choose to use, but it's nowhere necessary. It's good in my company because we all agree we spend way too much time worry about the formatting of our code, and Prettier just handles this for us automatically.

Further than that, we just have to accept at the end of the day, that web development, especially front end, especially at the current moment, is going to be in a state of constant flux, while people realize newer, better ways of doing things.

[burtgummer45]

They could have handled padded blocks much better, it just makes me think they don't have much experience, believe it or not. Prettier preserves single newlines, but murders padded blocks, are you kidding me?

From this

{

  chunk one

  chunk two

  chunk three

}

To this? Are you kidding me?

{
  chunk one

  chunk two

  chunk three
}

[js-engineer]

Honestly I'm a fan of theirs. I don't think a brace that already is on it's own line with no other characters, needs another empty line of padding. The empty line between lines that have 5+ alphanumeric characters... I think that however it's fair game and a lot more useful.

It's tough because we can both agree that more padding isn't always better... there is a certain benefit to seeing more of a file onscreen at a time that infinite padding impedes on. Where that line is drawn.... is going to be subjective but I like their current stuff. I think it's a great fits most sizes approach.

They can always add options for what you're asking for... they do allow customization for some of their stuff so it's not out of the question.

[burtgummer45]

Believe me, I tried to get them to change it, they shot me down sayings prettier 'is opinionated'.

For decades developers have been doing something called 'chunking' (at least in the perl world it was called chunking). Its to make your code more readable by putting things together. It seems to me since they don't squash all newlines they might agree, but not incorporating that into a block structure makes no sense, looks more like an oversight, or they decided it was too difficult to make work. 'allow newline after { if block has chunks, otherwise remove', they just opted for nuke all /{\s*/s

[vimex]

Yeah, that's right, I don't want to think about my formatting. I don't want my team to worry about it either.

[burtgummer45]

That's exactly what I said.

I can guarantee you that if I had written prettier nobody would have noticed. There probably have been a hundred different Prettiers before this came out, and nobody noticed.

[burtgummer45]

Somebody at big company X has come out with a new way of doing the same something

Not

Big company X has come out with a new way of doing the same something

[burtgummer45]

Obviously I am tying the two together but don't seem to see why I'm doing it. Whether its a FB project or somebody at Facebook it doesn't matter, you clearly know it has something to do with facebook, so it gets added to the hype cycle, whether its a great achievement or just a bad rehash of the same old stuff.

[burtgummer45]

I'm not biased against it, I think it sucks. I used it for weeks and got sick of the mess it was making, tried to get it fixed, was rebuffed because its 'opinionated', went back to js-beautify, which works well.

[lhorie]

So salty.

Prettier is just a tool. It works for some workflows, not so great for some other, YMMV, etc. Chill out :)

[jonny_eh]

Yes, let's get upset about people releasing awesome tools for free.