Giter Club home page Giter Club logo

prettier-plugin-merge's Introduction

prettier-plugin-merge

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

Schematic diagram of how formats are merged.

Installation

For Prettier v2:

npm install -D prettier@^2 prettier-plugin-merge

For Prettier v3:

npm install -D prettier prettier-plugin-merge

Configuration

Note: This plugin MUST come last. Other plugins usually have no order constraints.

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.

For example, suppose you have three plugins:

  • prettier-plugin-A: Only compatible with Prettier v2
  • prettier-plugin-B: Only compatible with Prettier v3
  • prettier-plugin-X: Compatible with both versions

Prettier v2 users can only configure prettier-plugin-A and prettier-plugin-X, and Prettier v3 users can only configure prettier-plugin-B and prettier-plugin-X.

prettier-plugin-merge's People

Contributors

github-actions[bot] avatar ony3000 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

yikes2000

prettier-plugin-merge's Issues

Not working with prettierd

Dependency information

prettierd, neovim

Steps to reproduce

run it with prettierd

The current behavior

Log file: /Users/premkumarsinha/.local/state/nvim/conform.log
additional information: expected '}'

      00:40:38[ERROR] Formatter 'prettierd' error: 
      00:44:34[ERROR] Formatter 'prettierd' error: 
      16:20:21[ERROR] Formatter 'prettierd' error: 
      16:58:24[ERROR] Formatter 'prettierd' error: 
      17:23:14[ERROR] Formatter 'prettierd' error: 
      22:55:44[ERROR] Formatter 'stylua' error: error: could not format from stdin: failed to format from stdin: error parsing: error occurred while creating ast: unexpected token `he`. (starting from line 86, character 1 and ending on line 86, character 3)
      additional information: leftover token
      
      08:25:10[ERROR] Formatter 'prettierd' error: 
      16:50:31[ERROR] Formatter 'prettierd' error: 
      17:11:30[ERROR] Formatter 'prettierd' error: 
      17:11:38[ERROR] Formatter 'prettierd' error: 
      17:11:42[ERROR] Formatter 'prettierd' error: 
      17:17:05[ERROR] Formatter 'prettierd' error: 
      17:17:15[ERROR] Formatter 'prettierd' error: 
      17:19:49[ERROR] Formatter 'prettierd' error: 
      17:22:18[ERROR] Formatter 'prettierd' error: 
      17:24:54[ERROR] Formatter 'prettierd' error: 

Performance issue

Dependency information

Steps to reproduce

  1. Clone next-tailwind-template repository. (It currently has a dependency of [email protected])
  2. Install dependencies.
  3. Run prettier --write something in the terminal and check the execution time displayed.
  4. Install [email protected]
  5. Run prettier --write something again in the terminal and check the execution time displayed.

The current behavior

It may vary slightly depending on the running environment, but when [email protected] was installed, it was over 100 milliseconds slower on average.

The expected behavior

There are no clear criteria for passing, but the faster the better.

If pass a path instead of a plugin name, that plugin will not be applied

Dependency information

Steps to reproduce

  1. Set the plugins in prettier config as follows:
plugins: [
  'prettier-plugin-tailwindcss',
  'prettier-plugin-merge',
],
  1. Try to run this test.
test('tailwindcss', async () => {
  expect(
    await format(`export function Counter() {\n  return <span className="font-bold px-1">{count}</span>;\n}`, {
      ...defaultOptions,
      filepath: 'Counter.jsx',
      plugins: [
        require.resolve('prettier-plugin-tailwindcss'),
        'prettier-plugin-merge',
      ],
    }),
  ).toBe(`export function Counter() {\n  return <span className="px-1 font-bold">{count}</span>;\n}\n`);
});

The current behavior

Test failed.

The expected behavior

Test passed.

Refs

When enabling `formatOnSave` in VSCode, formatting is stuck in the in-progress state

Dependency information

Steps to reproduce

  1. Clone prettier-config repository.
  2. Checkout to 79a5f5c.
  3. Enable the "format on save" related setting.
  4. Install dependencies.
  5. Run the "Developer: Restart Extension Host" command in VSCode.
  6. Wait until Prettier is ready.
  7. Make a copy of test/__fixtures__/tw.tsx (say test.tsx) and save that copy.

The current behavior

After the extension host is ready, the first formatting will take a few seconds, and subsequent formatting will be stuck in the in-progress state.

The expected behavior

Formatting should finish without stuck.

Refs

In most cases, programmatic formatting does not work

Dependency information

Steps to reproduce

  1. Prepare an empty prettier config.
  2. Try to run this test.
test('tailwindcss', async () => {
  expect(
    await format(`export function Counter() {\n  return <span classes="font-bold px-1">{count}</span>;\n}`, {
      ...defaultOptions,
      filepath: 'Counter.jsx',
      plugins: [
        'prettier-plugin-tailwindcss',
        'prettier-plugin-merge',
      ],
      tailwindAttributes: ['classes'],
    }),
  ).toBe(`export function Counter() {\n  return <span classes="px-1 font-bold">{count}</span>;\n}\n`);
});

The current behavior

The test will only pass if the options passed to the format function and the prettier config are identical.

The expected behavior

Should be able to pass the test with just the options passed to the format function.

Sequential merging not work if the input text and prettier config meet certain conditions

Dependency information

Steps to reproduce

  1. Clone next-tailwind-template repository. (It currently has a dependency of [email protected])
  2. Install dependencies.
  3. Change the order of plugins in .prettierrc.json so that at least one plugin is placed between prettier-plugin-brace-style and prettier-plugin-merge.
  4. Try formatting the formatted input text from the perspective of the remaining plugins except prettier-plugin-brace-style.

The current behavior

The brace style is not applied.

The expected behavior

(At least in this combination) the brace styles should be applied regardless of plugin order.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.