DEV Community

Cover image for Configuration for prettier
Dantis Mai
Dantis Mai

Posted on • Updated on

Configuration for prettier

prettier

What and Why prettier?

Prettier is a code formatter, which supports many kinds of language from Programming languages (JXS, TS), to Style sheets (CSS, SCSS), and also Serialization languages (YAML).

As we can see in the gif above, it will take a lot of time to arrange those lines, and even more for HTML. Prettier is the light from heaven, just saving the file everything will be in order

Configuration

My configuration

My beloved configuration is below



{
  "singleQuote": true,
  "trailingComma": "all",
  "useTabs": false,
  "tabWidth": 2,
  "overrides": [
    {
      "files": "*.yaml",
      "options": {
        "tadWidth": 2,
        "printWidth": 40,
        "singleQuote": true
      }
    }
  ]
}


Enter fullscreen mode Exit fullscreen mode

To use

npm

npm i --save-dev prettier

yarn

yarn add --dev prettier

- Create 2 files `.prettierrc`, `.prettierignore` in our root level, the former is for configuration and the latter is for ignoring directories. Usually, I ignore `build` and `coverage`, which is generated from build production package and test result corresponding.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a2x74kcrk7v3nl2p6pph.png)
- Done!!

_Notes:_ Instead of `.prettierrc`, `prettier` also supports a wide range of types. Please take a look at [Configuration File](https://prettier.io/docs/en/configuration.html).

##Other options
You can find more interesting ways to use it in [prettier documentation](https://prettier.io/docs/en/options.html), such as lint-staged, pre-commit, and so on.

I usually due with CloudFormation, so besides a general configuration, I `overrides` it with my favorite style for `.yaml`. You can find your own one while [playing around](https://prettier.io/playground/) with it.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbaqumw7c2ykkwgxbfxi.png)

[Paypal](https://paypal.me/DantisMai).

_I hope this post helps you find your style in your developer journey. I am really happy to receive your feedback on this article. Thanks for your precious time reading this._


Enter fullscreen mode Exit fullscreen mode

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy 🎖️ • Edited

Seriously considering dumping 'Prettier' - it breaks code far too often. It shouldn't be necessary to re-test code after running a code formatter

Collapse
 
maithanhdanh profile image
Dantis Mai

It will take a lot of effort to clean the code without Prettier. Can you show me your configuration, and which language it breaks