Common Prettier Plugins & Installation

Installation

To get started, install prettier as a dev-dependency

npm install -D prettier

Install and add plugins to your Prettier config:

// prettier.config.js
module.exports = {
  plugins: ['prettier-plugin-organize-imports', 'prettier-plugin-tailwindcss'],
}

Typescript

npm i -D prettier-plugin-organize-imports

Tailwind

npm i -D prettier-plugin-tailwindcss

Compatibility with other Prettier plugins

This plugin uses Prettier APIs that can only be used by one plugin at a time, making it incompatible with other Prettier plugins implemented the same way. To solve this we've added explicit per-plugin workarounds that enable compatibility with the following Prettier plugins:

• @ianvs/prettier-plugin-sort-imports
• @prettier/plugin-pug
• @shopify/prettier-plugin-liquid
• @trivago/prettier-plugin-sort-imports
• prettier-plugin-astro
• prettier-plugin-css-order
• prettier-plugin-import-sort
• prettier-plugin-jsdoc
• prettier-plugin-organize-attributes
• prettier-plugin-organize-imports
• prettier-plugin-style-order
• prettier-plugin-svelte
• prettier-plugin-sort-imports

One limitation with this approach is that prettier-plugin-tailwindcss must be loaded last.

// .prettierrc
{
  // ..
  "plugins": [
    "prettier-plugin-svelte",
    "prettier-plugin-organize-imports",
    "prettier-plugin-tailwindcss" // MUST come last
  ]
}

PHP

npm i -D @prettier/plugin-php

Laravel

npm i -D @shufo/prettier-plugin-blade

...

module.exports = {
    plugins: ['@shufo/prettier-plugin-blade'],
    overrides: [
        {
            files: ['*.blade.php'],
            options: {
                parser: 'blade',
                tabWidth: 2,
            },
        },
    ],
};

Prisma

npm i -D prettier-plugin-prisma

Java

npm i -D prettier-plugin-java