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 post, we’ll integrate it with a Node.js application and explore on how to configure it to work with EditorConfig and ESLint.

Install Prettier

Execute the following command in the directory where package.json is located:

yarn add -D -E prettier

As per the Prettier’s documentation, it is recommended to save an exact version of prettier in the 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.

yarn add -D pretty-quick husky

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

 1{
 2  "scripts": {
 3    "fmt": "pretty-quick --staged"
 4  },
 5  "husky": {
 6    "hooks": {
 7      "pre-commit": "npm run fmt"
 8    }
 9  }
10}

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:

 1root = true
 2
 3[*]
 4charset = utf-8
 5indent_style = space
 6indent_size = 2
 7insert_final_newline = true
 8trim_trailing_whitespace = true
 9
10[*.md]
11max_line_length = off
12trim_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.

yarn add -D eslint-config-prettier eslint-plugin-prettier

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

1{
2  "extends": [
3    "plugin:prettier/recommended"
4  ]
5}