Using Prettier with Prisma.io (pre-commit config)

_{Cover photo by Anton Ivanov on Unsplash}


If you're not familiar with prisma.io, it's an awesome ORM for Node.js. And in case if you don't know what an ORM (aka object-relational mapping) is, check out this stackoverflow thread for a comprehensive answer 😉.

Get started

Ok, let's get started. In one project of mine, I used node.js to develop a backend application for my app. I also used postgresql (which was why this article was created). In order for my app to communicate with the database, I used prima as an ORM.

Now, the problem was that I want the pre-commit config to check the format of **.prisma file(s). Luckily, someone made a prettier plugin for us.

• First, add a dependency to your project

yarn add -D prettier-plugin-prisma

• To format the **.prisma file using CLI, run

yarn prettier --write "**/*.prisma"

• If you use vscode, you can edit the setting in settings.json to format the **.prisma on save

"editor.formatOnSave": true, 
"[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma"
},

• Lastly, here's how my .pre-commit-config.yaml file looks like:

- repo: https://github.com/pre-commit/mirrors-prettier
  rev: v2.3.2 # Use the sha or tag you want to point at
  hooks:
    - id: prettier
      additional_dependencies:
        - prettier@2.1.2
        - 'prettier-plugin-prisma@2.29.1'

- repo: https://github.com/pre-commit/pre-commit-hooks
  rev: v3.4.0
  hooks:
  - id: trailing-whitespace
  - id: check-merge-conflict
  - id: check-yaml
  - id: end-of-file-fixer
  - id: no-commit-to-branch
    args: [-b, main, -b, production, -b, staging]