Package Exports

prettier-plugin-merge
prettier-plugin-merge/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (prettier-plugin-merge) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

prettier-plugin-merge

A Prettier plugin that sequentially merges the formatting results of other Prettier plugins.

Why prettier-plugin-merge?

Prettier has its limitations. If two or more plugins are configured to format a particular language, Prettier will only use the last of those plugins.

So, for example, if you configure it like this for JavaScript formatting, only prettier-plugin-classnames will be used.

{
  "plugins": [
    "prettier-plugin-tailwindcss",
    "prettier-plugin-classnames" // Prettier only uses this
  ]
}

However, you can overcome this limitation by adding prettier-plugin-merge as the last plugin.

 {
   "plugins": [
     "prettier-plugin-tailwindcss",
-    "prettier-plugin-classnames"
+    "prettier-plugin-classnames",
+    "prettier-plugin-merge"
   ]
 }

As mentioned above, Prettier uses the last of the plugins that can format a particular language (in this case JavaScript), so prettier-plugin-merge is used in the changed configuration.

{
  "plugins": [
    "prettier-plugin-tailwindcss",
    "prettier-plugin-classnames",
    "prettier-plugin-merge" // Prettier only uses this
  ]
}

prettier-plugin-merge uses plugins written before this one in order, merging as much as possible the differences in formatting results depending on the presence of the plugin.

So you can combine as many plugins as you want.

Installation

npm install -D prettier prettier-plugin-merge

Configuration

Note: This plugin MUST come last. Other plugins usually have no order constraints. However, if there are multiple plugins formatting the same area, the output may vary depending on the order of those plugins.

JSON example:

{
  "plugins": [
    "prettier-plugin-tailwindcss",
    "prettier-plugin-classnames",
    "prettier-plugin-merge"
  ]
}

JS example (CommonJS module):

module.exports = {
  plugins: [
    '@trivago/prettier-plugin-sort-imports',
    'prettier-plugin-brace-style',
    'prettier-plugin-merge',
  ],
  braceStyle: 'stroustrup',
};

JS example (ES module):

export default {
  plugins: [
    'prettier-plugin-brace-style',
    '@trivago/prettier-plugin-sort-imports',
    'prettier-plugin-merge',
  ],
  importOrder: ['<THIRD_PARTY_MODULES>', '^@[^/]+/(.*)$', '^@/(.*)$', '^[./]'],
  importOrderSeparation: true,
};

Version correlation with sibling plugins

Starting with 0.6.0, when there is a minor release on one side, I plan to reflect that change on the other side as well if possible.

Version correlation.

Compatibility with other Prettier plugins

All other plugins used with this plugin must be compatible with your version of Prettier.