Many teams struggle with code style. From a code style solution to a TAB versus space debate, teams face choices. Previous solutions to this code unification problem were EditorConfig, or ESLint.

This article introduces Prettier. I searched Zhihu before writing this article and found no one Prettier yet!

Prettier Prettier: An Opinionated code formatter, has few options… This must be made clear at the beginning of the article.

What is opinionated? Have attitude have tendency namely, reduce configuration item as far as possible! The opposite meaning is Unopinionated.

Development frameworks are also opinionated and Unopinionated.

These discussions are:

What is opinionated software?

medium.com/@stueccles/…

Opinionated vs modular web frameworks

For example, in the following article:

Angular is a full-featured “opinionated” framework.


React and Vue are “non-opinionated” frameworks.

Comparison with React vs Angular vs Vue Frameworks

For example, with frameworks I’ve worked with,

Spring Boot is opinionated:


Note: Need very little Spring Configuration. Has few options. This is where Spring Boot differs from traditional development directly based on the Spring Framework. Opinionated (has few options) is also a feature of Prettier and ESLint/EditorConfig.

Another synonym for opinionated is Convention over configuration, or coding by Convention.

And Express is unopinionated:


Express just gives you the API, tells you the parameters, and nothing else. If you want more functionality, go to the Middleware or call the API and write it yourself.

Prettier is now integrated by default into many front-end projects, such as create-react-app, ue-cli, angular-cli:

Github.com/facebook/cr…
vuejs/vue-cli
angular/angular-cli

Prettier is powerful but easy to use, so most of the content is translated and explained by the website.

What is Prettier?


An opinionated code formatter


Supports many languages


Integrates with most editors


Has few options

What is Prettier?

A code formatting tool with attitude

Support for multiple languages

Inherit most editors

Fewer options

Why?


You press save and code is formatted


No need to discuss style in code review


Saves you time and energy


And more

Why Prettier?

All you need to do is save the file and the code will be formatted

There’s no need to argue about style during code reviews

Save your practices and experiences

More and more

13. Using only Prettier without integrating an editor:

  1. Add prettier to the project: yarn add prettier –dev –exact
  2. Verify success with a file: yarn prettier –write SRC /index.js
  3. Prettier automatically runs when Git commits code:

    yarn add pretty-quick husky –dev



    Then editpackage.json: {

    “scripts”: {

    “precommit”: “pretty-quick –staged”

    }

    }

Editors that can be integrated include:


Atom: prettier/prettier – Atom

Visual Studio Code: prettier/prettier-vscode

Sublime Text: jsprettier-package-package Control

WebStorm, PHPStorm: Prettier built in, only needed to be configured

Wait a minute. I’m not finished. I just started.