DEV Community

Nwanguma Victor
Nwanguma Victor

Posted on

Common Prettier Plugins & Installation

Installation

To get started, install prettier as a dev-dependency

npm install -D prettier
Enter fullscreen mode Exit fullscreen mode

Install and add plugins to your Prettier config:

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

Typescript

npm i -D prettier-plugin-organize-imports
Enter fullscreen mode Exit fullscreen mode

Tailwind

npm i -D prettier-plugin-tailwindcss
Enter fullscreen mode Exit fullscreen mode

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
  ]
}
Enter fullscreen mode Exit fullscreen mode

PHP

npm i -D @prettier/plugin-php
Enter fullscreen mode Exit fullscreen mode

Laravel

npm i -D @shufo/prettier-plugin-blade
Enter fullscreen mode Exit fullscreen mode

...

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

Prisma

npm i -D prettier-plugin-prisma
Enter fullscreen mode Exit fullscreen mode

Java

npm i -D prettier-plugin-java
Enter fullscreen mode Exit fullscreen mode

Top comments (0)