[style] Use prettier instead of clang-format

[dayo09]

What?

How about we use prettier for this project instead of clang-format?

Why?

There are three reasons

(1) To follow the trend.
This npm trend graph shows that prettier overwhelms clang-format in npm echo system.

(2) To use null-coalescing operator(??)
#1445 the operator is not considered correct by clang-format, therefore it breaks it into ? ?, which makes compilation error.

(3) (personally) It looks better.

It seems that prettier understands typescript better and prettify objects or arrow functions much better.

[dayo09]

If contributors agree, I plan to
(1) turn off clang-format in CI
(2) format using prettier
(3) turn on prettier in CI
To apply the change.

npm install --save-dev prettier
npx prettier -w src

[seanshpark]

(1) I'm not sure about the thrend site really reflects clang-format for JS/TS usage. We're not using npm version of clang-format

(2) You can use

// clang-format off
... `??` ...
// clang-format on

(3) Looks better for me too, but 'better' may be a personal preference.

Anyway I'm OK to move to new format and also OK to stay with clang-format.

[dayo09]

@seanshpark

(1) I'm not sure about the thrend site really reflects clang-format for JS/TS usage. We're not using npm version of clang-format

Sure. But I think that's because typescript users only use prettier by npm. When they need linter or formatter, it's more natural to get tools from npm, not from apt-get system-wise installation.

(2) You can use

// clang-format off
... `??` ...
// clang-format on

I know this but ??'s more like a commonly used operator, so it's a bit ugly to use this formater escape.

(3) Looks better for me too, but 'better' may be a personal preference.

Anyway I'm OK to move to new format and also OK to stay with clang-format.

Sure, thanks for sharing your opinion 😄

[llFreetimell]

Following comment is just my two cents :)
Basically, I am okay with both clang-format and prettier.

---

Trends

• I think npm trend graph is not that good for tracking the trends because npm is not a main concern for clang-format.
• Instead, I searched the download count at VSCode Extension Marketplace.
  • clang-format : About 1M downloads according to clang-format related extensions
  • prettier : About 24M downloads according to prettier extension
• Given above statistics, prettier may be much trendy than clang-format.

Special grammars for typescript/javascript

• I found more cases that some of grammar is not considered in clang-format
  • "clang-format" changes behavior of ServiceObject constructor in nodejs-common google/gts#215 (comment)
  • "clang-format" has trouble with union types google/gts#247 (comment)
• Of course, clang-format on/off can resolve these issues, but I prefer to minimize the usage of clang-format on/off. (Just my preference)

Additional references

• I referred Choose a single code formatter googleapis/google-cloud-node#2842 for this issue.
• It is not an answer, but I think there are lots of discussions even with the actual maintainer.

Conclusion

• For me, prettier seems better but I am not against with using clang-format.
• ⭐ However, I think eslint and stylelint should be considered just like clang-format because
  • eslint and stylelint have been used for ONE-vscode in package.json. (csslint is faded out)
  • eslint seems bit more popular than prettier according to npm trend graph

[dayo09]

@llFreetimell Thanks for your summary :-D

Of course, clang-format on/off can resolve these issues, but I prefer to minimize the usage of clang-format on/off. (Just my preference)

I agree with this. For example, I used ?? to make code simple but putting clang-format on/off makes it more ugly.

⭐ However, I think eslint and stylelint should be considered just like clang-format because
eslint and stylelint have been used for ONE-vscode in package.json. (csslint is faded out)
eslint seems bit more popular than prettier according to npm trend graph

FYI, eslint is more a linter than a formatter. The usage of those tools are different, eslint only checks the symantic errors/warnings, not style. We do not need to consider about eslint here. :-D (npm trend graph just draws a graph with any inputs)

[dayo09]

Done :-D