Setup Prettier with Angular CLI & WebStorm

What is Prettier?

Prettier is an opinionated code formatter with support for many languages and integrates with most editors.
It removes all original styling and ensures that all outputted code conforms to a consistent style.

Why you want to use Prettier?

• You press save and code is formatted
• No need to discuss style in code review
• Saves you time and energy
• Consistent code style

Setup Prettier with Angular CLI & WebStorm

Github Example

Step 1: Install Prettier

First, we want Install the Prettier package to our project.

npm install --save-dev --save-exact prettier

Step 2: Add Configuration File

lets create a new file .prettierrc in the root of our project
Example Configuration

{
  "singleQuote": true,
  "semi": true 
}

• singleQuote: Use single quotes instead of double quotes
• semi: Automatic add semicolons at the ends of statements

More Configuration API

Step 3: TSLint Integrations

Use TSLint with Prettier without any conflict.

First, install tslint-config-prettier

npm install --save-dev tslint-config-prettier

Add it to the end of your tslint.json file:

{
  "extends": [
    "tslint:latest",
    "tslint-config-prettier"
  ]
}

You can read more here

Step 4: WebStorm Setup (WebStorm 2018.1 and above)

To automatically format your files using prettier on save, you can use a file watcher.
Install File-watcher if not exist

Go to Preferences > Tools > File Watchers and click + to add a new watcher. Let’s name it Prettier.

• File Type: TypeScript
• Scope: Project Files
• Program: full path to .bin/prettier or .bin\prettier.cmd in the project's node_module folder. Or, if Prettier is installed globally, select prettier on macOS and Linux or C:\Users\user_name\AppData\Roaming\npm\prettier.cmd on Windows (or whatever npm prefix -greturns).
• Arguments: --write [other options] $FilePathRelativeToProjectRoot$
• Output paths to refresh: $FilePathRelativeToProjectRoot$
• Working directory: $ProjectFileDir$
• Auto-save edited files to trigger the watcher: Uncheck to reformat on Save only.