Prettier plugin for .prisma files

[flybayer]

Since the prisma schema has defined file formatting guidelines, a prettier plugin should exist so we can format .prisma files using our CI system along with all our other files.

Currently there's a VS Code extension to do this, but tons of people including myself don't use VS Code. Additional, this extension can't be used with CI and git hooks.

From #1557

[ajotaos]

This should definitely be part of the support for prettier. It's hard to follow the format if not using VSCode.

[Jolg42]

Current possible alternatives:

• Use prisma format command, for more details check help npx @prisma/cli format -h
• Use formatSchema from @prisma/sdk

import { formatSchema } from '@prisma/sdk'
const output = await formatSchema({ schemaPath: 'myschema.prisma' })
// or
const output = await formatSchema({ schema: 'schema file content as string' })

[flybayer]

Those are round about ways of getting the job done, but I specifically want prettier support. Especially for CI and git hook integrations. Also for those of us that don't use VS Code.

Basically the expectation of JS devs is that every file in a JS project should be formatted by prettier.

[ajotaos]

Agreed, +1 for prettier plugins

[Jolg42]

My current setup are these VS Code settings

Default formatter set on null:

The Prisma extension installed:
https://marketplace.visualstudio.com/items?itemName=Prisma.prisma

Set Prettier for JavaScript / TypeScript

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

Alternative solution by @LeonardSSH

{
  "editor.formatOnSave": true,
  "[prisma]": {
    "editor.defaultFormatter": "Prisma.prisma"
  },
}

This makes Prettier and Prisma extension formatting work together nicely in VS Code

Internal private Slack thread

[avocadowastaken]

I was surprised when found that no one built it, so I did it myself: https://github.com/umidbekkarimov/prettier-plugin-prisma

Since formatSchema is async, some shenanigans were unavoidable: https://github.com/umidbekkarimov/prettier-plugin-prisma/blob/156212fa8d85dbd2eb3ef2b281ef3d99786efb40/src/plugin.ts#L25-L35

Maybe some future version will use prisma-fmt directly, but I'm too sleepy now into dive in Rust+Wasm world.

EDIT: Now uses prisma-engines/datamodel directly https://github.com/umidbekk/prettier-plugin-prisma/releases/tag/v0.2.0

[flybayer]

@umidbekk thank you!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

[janpio]

Currently looking for a way to use that in a prisma code block (vs. the file), so I created an issue over at avocadowastaken/prettier-plugin-prisma#9 - if someone know how or can help 🙇

[liesislukas]

I have schema code built by other tools i build and in this use case i want to have a function where i can provide generated code and get nice formatted schema to write to schema file.

This worked fine, yet npm package is deprecated https://www.npmjs.com/package/@prisma/sdk

  const { formatSchema } = require("@prisma/sdk");
  content = await formatSchema({schema: content});

I tried @umidbekk plugin but it failed to do the job with error which seem like prettier is looking like prettier thinks it's javascript, while it's not. And i don't see any way to tell prettier that it's prisma schema. Any hints?

  const prettier = require("prettier");
  let result = prettier.format(code, {
      parser: "babel", plugins: ["prettier-plugin-prisma"]
    });

[farukEncoded]

Use this in your settings.json

"[prisma]": {
  "editor.defaultFormatter": "Prisma.prisma"
},

[Deleted user]

Can you further explain the rationale behind using prettier here @flybayer?

My understanding is that prisma format does linting and formatting while prettier only does formatting. So in CI/hooks, to get linting and formatting you would need to run npx prisma format && npx prettier --write 'prisma/**/*.prisma'.

What benefit does that get you over just running npx prisma format?

[patrykjanikabilitie]

For those who would want to stay with npx prisma format and add it to husky. I had to add these lines in .sh file configuration:

npx prisma format

git add ./prisma/schema.prisma