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.
Setup
You can pick the Node.js application created in the post Using Express with TypeScript to start with.
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.
{
"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.
yarn add -D eslint-config-prettier eslint-plugin-prettier
Now, open the .eslintrc.json
file and add the following configuration:
{
"extends": [
"plugin:prettier/recommended"
]
}