Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Incompatible with `@trivago/prettier-plugin-sort-imports`

See original GitHub issue

prettier version: 2.5.1 @trivago/prettier-plugin-sort-imports version: 3.1.1 tailwindcss version: 2.2.17

My .prettierrc.json

{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "importOrder": [
    "<THIRD_PARTY_MODULES>",
    "^@/types$",
    "^@/types/(.*)$",
    "^@/api$",
    "^@/api/(.*)$",
    "^@/config/(.*)$",
    "^@/context/(.*)$",
    "^@/pages/(.*)$",
    "^@/components/(.*)$",
    "^@/hooks/(.*)$",
    "^@/helpers/(.*)$",
    "^@/images/(.*)$",
    "^@/locales/(.*)$",
    "^[./]",
    "^./tailwind.css$",
    "^.*.css$"
  ],
  "importOrderSeparation": true,
  "importOrderCaseInsensitive": false,
  "tailwindConfig": "./tailwind.config.js"
}

Only import sorting works

Issue Analytics

State:
Created 2 years ago
Reactions:5
Comments:5 (3 by maintainers)

Top GitHub Comments

7reactions

giacomoferretticommented, Jun 16, 2022

@Mattinton thanks for the workaround, I had to make a small change because it was giving me TypeError: Cannot read properties of undefined (reading 'map').

const tailwindPlugin = require("prettier-plugin-tailwindcss");
const sortImportsPlugin = require("@trivago/prettier-plugin-sort-imports");

module.exports = {
  parsers: {
    typescript: {
      ...tailwindPlugin.parsers.typescript,
      preprocess: sortImportsPlugin.parsers.typescript.preprocess,
    },
  },
  options: {
    ...sortImportsPlugin.options,
  },
};

6reactions

Mattintoncommented, Jan 26, 2022

I’m hacking around this at the moment with this temp plugin below where the imports are aliased. So @trivago/prettier-plugin-sort-imports -> tidy-imports and prettier-plugin-tailwindcss -> sort-classes.

You can install aliases like this yarn add -D <alias>:npm<package>

Here is the config and plugin:

.prettierrc.js

module.exports = {
    printWidth: 120,
    semi: true,
    singleQuote: true,
    tabWidth: 4,
    trailingComma: 'es5',
    endOfLine: 'auto',
    plugins: ['./prettier-plugins.js'],
};

prettier-plugins.js

const tailwindPlugin = require('sort-classes');
const tidyImportsPlugin = require('tidy-imports');

module.exports = {
    parsers: {
        typescript: {
            ...tailwindPlugin.parsers.typescript,
            preprocess: tidyImportsPlugin.parsers.typescript.preprocess,
        },
    },
};

Top Results From Across the Web

@trivago/prettier-plugin-sort-imports - npm

A prettier plugins to sort imports in provided RegEx order. ... Start using @trivago/prettier-plugin-sort-imports in your project by running ...

Presenting @trivago/prettier-plugin-sort-imports

The @trivago/prettier-plugin-sort-imports prettier plugin sorts the import declarations by using prettier. Note: Prettier is an opinionated code ...

prettier - Npms.io

Make prettier organize your imports using the TypeScript language service API. local_offerprettier, prettier-plugin, typescript, imports, organize-imports.

Next.js & Wordpress | Note of Thi - dinhanhthi.com

Install and activate WP plugin wp-graphql-jwt-authentication. Modify wp-config.php , ... npm install --save-dev @trivago/prettier-plugin-sort-imports

reactjs - Prettier next (2.6.0) + import order plugin @trivago ...

I had the same problem of prettier not seeing those things. I just use sort-imports plugin in vscode. IDK about the prettier integrated...