Programming

How to Keep Your Code Prettier

Formatting Matters

Programming improvement groups have squandered innumerable hours since forever contending about greatest line length or on which line a support should go. Whatever individual inclination says, a great many people concede to at any rate a certain something: code organizing ought to be predictable across an undertaking.
Prettier is an instrument intended to accomplish this. Give it some code and it will hand back a similar code, organized in a predictable way. Prettier has word processor reconciliation, an order line instrument, and an online demo.

Speaking the Right Language

First of all, you’ll want to know if Prettier is compatible with the language, or languages, you typically work with. Prettier is currently focussed on a core set of languages mainly devoted to front-end web development, including:

  • JavaScript
  • HTML
  • CSS
  • Sass
  • Markdown
  • YAML

There is also open-ended support for additional languages via plugins.

Try Out Prettier Using the Online Playground

Before attempting to introduce Prettier, you should check out the jungle gym. Utilizing a web interface, you can glue in some model code and see how Prettier will change it. This is an extraordinary method of getting an impression of what the instrument really does, yet it can likewise go about as your essential strategy for utilizing Prettier, if your necessities are on the lighter side.
Of course, the jungle gym should appear as though two essential content tool boards, one on the left for your info, one on the correct indicating Prettier’s yield. You’ll see some example code at first, however you can basically eliminate the entirety of this and glue in your own.

For example, try entering the following JavaScript:

(function ()
{
    window.alert('ok')
}())

Prettier should turn it into:

(function () {
  window.alert("ok");
})();

Notice, by default, the changes that Prettier makes include:

  • Converting single-quoted strings into double-quoted ones
  • Adding semi-colons
  • Converting indents into two spaces

In the bottom left is a button allowing you to view options. With the previous example, try adjusting the tab width, toggling the –single-quote flag under Common, or toggling the –no-semi flag under JavaScript.

Configuring options

Prettier is self-described as “opinionated”, a deliberate design choice which means control of the specifics is sacrificed for simplicity and consistency. It’s designed for you to set up, then forget about, rather than remain preoccupied with every last formatting detail of your code. (For an alternative with much finer-grained control over every last formatting detail, try eslint.)

However, the authors also recognize that some decisions have functional impact beyond just how the code looks. Some options—including some for legacy purposes—remain, so you should at least understand what they do, even if you use Prettier in its default state.

The best way of managing Prettier options is to save them in a configuration file. There are many ways to organize this, but start by creating a file named .prettierrc.json in your local project directory. It can contain any of the supported options in a standard JSON object, e.g.

{
    "tabWidth": 8
}

The same configuration file will be read by Prettier whether you’re running it via the command line or a supported text editor.

What's your reaction?

Excited
6
Happy
2
In Love
1
Not Sure
2
Silly
2

You may also like

More in:Programming

Leave a reply

Your email address will not be published. Required fields are marked *