logo

Code Formatting with Prettier

Prettier is an opinionated code formatter that formats the code in a consistent style. It supports popular languages, libraries, and frameworks in the Node.js ecosystem and is widely used to enforce the style practices. In this gist, we'll integrate it with a Node.js application and explore on how to configure it to work with EditorConfig and ESLint.

Setup

Any Node.js project can be used to follow this example.

Table of Contents

Install Prettier

Let's start by executing the following command in the directory where package.json is located:

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

As per the Prettier's documentation, it is recommended to save an exact version of prettier in our package.json since it introduces stylistic changes in patch releases.

Configure pre-commit hook

To format the staged files before you commit them to git, you can use pretty-quick to run prettier on staged files and husky to configure a pre-commit hook.

Execute the following command to install dependencies.

npm install --save-dev pretty-quick husky

Add an fmt script in package.json to format the staged files and configure the husky object with a hook.

{
  "scripts": {
    "fmt": "pretty-quick --staged"
  },
  "husky": {
    "hooks": {
      "pre-commit": "npm run fmt"
    }
  }
}

Working with EditorConfig

EditorConfig is a popular way to maintain consistent coding styles between multiple developers across different editors and IDEs. It consists of a .editorconfig file that contains coding styles and a plugin that enables the editors and IDEs to enforce those styles.

An editorconfig file for an Angular application generated by Angular CLI looks like this:

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false

Prettier CLI respects the editorconfig file by default. You can opt-out of this behavior using --no-editorconfig flag.

Working with ESLint

If you're working on a JavaScript project, you can use ESLint to format your code with Prettier. Execute the following command to add necessary plugins.

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

Now, open the .eslintrc.json file and add the following configuration:

{
  "extends": [
    "plugin:prettier/recommended"
  ]
}

References

Discussions

Table of Contents Back to top