DEV Community

Cover image for Using Prettier with (pre-commit config)

Posted on

Using Prettier with (pre-commit config)

Cover photo by Anton Ivanov on Unsplash

If you're not familiar with, 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
Enter fullscreen mode Exit fullscreen mode
  • To format the **.prisma file using CLI, run
yarn prettier --write "**/*.prisma"
Enter fullscreen mode Exit fullscreen mode
  • 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"
Enter fullscreen mode Exit fullscreen mode
  • Lastly, here's how my .pre-commit-config.yaml file looks like:
- repo:
  rev: v2.3.2 # Use the sha or tag you want to point at
    - id: prettier
        - prettier@2.1.2
        - 'prettier-plugin-prisma@2.29.1'

- repo:
  rev: v3.4.0
  - 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]
Enter fullscreen mode Exit fullscreen mode

Top comments (0)