Angular Prettier ESLint Configuration

I might be incapable to explain what Prettier is to the world. The Prettier official website explains it well. In the last article Angular ESLint Configuration, we have established a linter for our Angular app, what we will do now is that we will add Prettier to our app and set it up as a linter rule. So that if you or any other dev try to misbehave with the code format of your app will be highlighted and bombarded with judgments.

We will head in the direction:

• Install Prettier
• Configure Prettier
• Add Prettier Command
• Add Prettier Ignore File
• Add Prettier ESLint Rule
• Prettier VS Code Extension

Install Prettier

Add Prettier to the project as dev dependency:

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

Checkout the installation guide if you are facing any trouble with the setup - Prettier Install.

Configure Prettier

Create a Prettier configuration file ".prettierrc" to control the Prettier configurations at project level.

{
  "singleQuote": true,
  "bracketSameLine": true,
  "endOfLine": "auto",
  "overrides": [
    {
      "files": ["*.html", "*.ts"],
      "options": {
        "printWidth": 120
      }
    },
    {
      "files": "*.html",
      "options": {
        "parser": "html"
      }
    },
    {
      "files": "*.component.html",
      "options": {
        "parser": "angular"
      }
    }
  ]
}

Here, we are updating some of the few settings:

• singleQuotes: Setting the to true to follow JS recommendation of using single quotes for string.
• bracketSameLine: Setting the to true to make end of closing brackets appearing on the same line.
• endOfLine: Setting the to auto to make the end of line to work as per environment.
• overrides: Overriding settings for .html and .ts file printWidth size to 120 as SonarLint allows 120.

Check out more about - Prettier Options.

Add Prettier Command

Add a prettier command to run for entire project to format all of the files at once, this command can be handy to use in order to format the entire project.

{
  "scripts": {
    "prettier:write": "prettier --config .prettierrc --write .",
    "prettier:check": "prettier --config .prettierrc --check .",
  }
}

Here, the "prettier:check" command will show you the number of files those are having formatter issues, while the "prettier:write" will format the non-formatted files all at once. We are mentioning the config file name ".prettierrc".

Check out more about - Prettier CLI.

Add Prettier Ignore File

Create a Prettier ignore file ".prettierignore" to control which file to avoid for formatting.

package.json
package-lock.json
.eslintrc.json
tsconfig.json
dist
/.angular/cache
lint-*

Here, we are ignoring the entire dist folder with any files it contains and the "package.json" file in particular; also, we are ignoring any file starting with "lint-" pattern. If you want to know more about ignoring files from Prettier, you can check the - Prettier Ignore Files.

Add Prettier ESLint Rule

Understand the philosophy of formatting with ESLint + Prettier from: Formatting Philosophy.

These 2 packages are required for adding Prettier rule to ESLint:

• ESLint Config Prettier: Personally recommended as it keeps linting and formatting as separate responsibilities.
• ESLint Plugin Prettier: Runs Prettier within ESLint so you get feedback on violations from prettier itself.

Add eslint-config-prettier to project:

npm install --save-dev eslint-config-prettier

Add eslint-plugin-prettier and prettier to project:

npm install --save-dev eslint-plugin-prettier

Add Prettier rules to .eslintrc.json:

{
  "plugins": [
    "prettier"
  ],
  "overrides": [
    {
      "files": [
        "*.ts"
      ],
      "extends": [
        ...
        "plugin:prettier/recommended"
      ],
    },
    {
      "files": [
        "*.html"
      ],
      "extends": [
        ...
        "plugin:prettier/recommended"
      ],
    }
  ]
}

Here, we are adding the prettier rule to the extends array for .ts and .html files.

Prettier VS Code Extension

There is VS Code extension for Prettier - VS Code Extension Prettier, that works seamlessly to auto format the code at the time when you are developing. You simply need to install this extension and the rest will be taken care by the extension, it will read the configuration present in your project and provides error or warning accordingly.

Closing Words

Setting up a formatter should be the part of initial activities which we carry out at the beginning of the project. So, that it will give a control over the code format, and you can avoid silly formatting issues introduced by the dev team while developing the app. As the Prettier added as an ESLint rule we can run the lint command on the CI pipelines, whenever a PR is raised towards main branch.