/ javascript

How to auto-format your code effortlessly

Or how to be lazy and still win.

Is Prettier really prettier?

How do you format your code - JS, CSS, HTML,...? And before you answer "manually", please don't do that. Because life is too short :)
Prettier then, right? Everywhere I turn - blog posts, meetups, colleagues and friends, it seems that Prettier is getting all the attention and hype.
By its own description, Prettier is an Opinionated Code Formatter. Here's the thing though. You and your team have probably already defined your coding style. And if you work on multiple projects at once, that coding style may not be the same. So why would you want to use an auto-formatting tool that:

  • is opinionated and mostly likely going against your coding style
  • requires separate configuration to reconcile that difference
  • does not have project specific rc configuration
  • has weird defaults (double quotes in JavaScript - really?)
  • has limited configurability

Your coding style is most likely already defined in a form an rc file.

Have your auto-formatter work with your code base, not against it!

In defense to Prettier, it seems that the goal is to avoid building and enforcing a style guide by simply letting Prettier format it with its own defaults. Hummmm...

EDIT: It seems that Prettier can integrate with eslint. Not sure if I missed this, or it was added later. This helps, but did not change my opinion as a whole. Even with this, there is a mention of conflicting rules between Prettier and ESLint. Plus, it still requires configuration. Should your project really be aware of an auto-formatter? No, thanks.

Ok, so no Prettier. What then?

A tool that is able to read your existing configuration organically without needing a separate configuration.

NOTE: Using this approach assumes you are linting your code already. If you are not, you should seriously consider doing so. Not only does it enforce consistent coding style, static code analysis can also prevent bugs.
To get started with JavaScript, check out ESLint. For CSS, my recommendation is Stylelint.

Javascript

Meet eslint-formatter. This is a plugin for Sublime Text 3 that uses your .eslintrc file to auto-format your code, but only in the context of that particular project.
The only thing configuration you may need to do is to enable format on save option.
If your markup is in Javascript (JSX, Vue,...) and you are linting it with a correct plugin/extend, eslint-formatter will simply pick it up.

(S)CSS/PostCSS/Less

Chances are that you are linting your Javascript, but are you linting your style? If you are not, meet Stylelint.
When you are done configuring, a tool called Stylefmt will read stylelint config and format your style. Easy-peasy!
Here are some of the projects for your favorite text editor:

Job done! Lazy and right 😎

In and out. Ciao!

Vanja

Vanja

Gadget junkie, shutterbug, runs on green tea, beer and chocolate.

Read More
How to auto-format your code effortlessly
Share this