Prettier config

Prettier is a code formatter that supports many languages and can be integrated with most of the editors.


Andres Canavesi
Sep 09, 2021
With Prettier you will be able to define your own rules, however default rules are enough at the beginning.
featured image

Overview

Prettier is a code formatter that supports many languages and can be integrated with most of the editors.

Also, you can integrate it with your CI/CD.

That why nobody will be able to merge to the master branch if the code is not well-formatted.

With Prettier you will be able to define your own rules, however default rules are enough at the beginning.

Your rules will be defined in a file called .prettierrc placed in your project’s root.

Let’s see how to install Prettier and then make some configurations.

      
npm install prettier --save-dev
  
    

Example of Prettier config file

      
{
  "trailingComma": "es5",
  "tabWidth": 4,
  "printWidth": 120,
  "semi": true,
  "singleQuote": false,
  "useTabs": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "bracketSpacing": false,
  "jsxBracketSameLine": true,
  "arrowParens": "avoid",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "endOfLine": "lf"
  }
  
    
See more options for the .prettierrc file

Gulp integration

      
npm install gulp-prettier -save-dev
  
    
      
gulp.task("prettier", () => {
  return gulp
  .src("./**/*.js")
  .pipe(prettier(".prettierrc"))
  .pipe(gulp.dest("./"));
});
  
    

PhpStorm IDE integration

If you are using PHP Storm, it’s highly recommended that you configure your IDE to auto-format your code every time you save a .js file

https://prettier.io/docs/en/webstorm.html The plugin will take the rules from you .prettierrc file

Configure a File Watcher in PhpStorm to auto-format the code on save.

Visual Studio Code

You can install the extension as any other and then you can use these configurations in you settings.js with the prefix "prettier"
      
{
  "prettier.useTabs": false,
  "prettier.trailingComma": "es5",
  "prettier.tabWidth": 4,
  "prettier.printWidth": 120,
  "prettier.semi": true,
  "prettier.singleQuote": false,
  "prettier.quoteProps": "as-needed",
  "prettier.jsxSingleQuote": false,
  "prettier.bracketSpacing": false,
  "prettier.jsxBracketSameLine": true,
  "prettier.arrowParens": "avoid",
  "prettier.proseWrap": "preserve",
  "prettier.endOfLine": "lf"
}
  
    

Recommended posts