Prettier next (2.6.0) + import order plugin @trivago/prettier-plugin-sort-imports Error Ignored unknown option { importOrderSeparation: true }

[alex-athenian]

Your Environment

• Prettier version: 2.6.0
• node version [14.17.0]:
• package manager: [[email protected]]
• IDE: [Webstorm]

Describe the bug

I am moving from stable version of Prettier 2.0.5 to next version of Prettier 2.6.0 which is different from stable version. And got problem with @trivago/prettier-plugin-sort-imports plugin which was working with prettier 2.0.5 but does not with 2.6.0. As only 2.6.0 version supports this param https://prettier.io/docs/en/next/options.html#single-attribute-per-line. I have updated @trivago/prettier-plugin-sort-imports to last version and did migration to 3x according to https://github.com/trivago/prettier-plugin-sort-imports/blob/master/docs/MIGRATION.md

Configuration File (cat .prettierrc, prettier.config.js, .prettier.js)

package.json

"scripts": {
"prettier-check": "prettier --check 'src/**/*.{css,scss,json,html,md,yml,yaml,js,jsx,ts,tsx}'",
},
"devDependencies": {
...
"@trivago/prettier-plugin-sort-imports": "^3.2.0",
"eslint-config-prettier": "^8.4.0",
"eslint-plugin-prettier": "^4.0.0",
"prettier": "prettier/prettier",
...
},
"eslintConfig": {
    "extends": [
      "react-app",
      "plugin:prettier/recommended",
      "plugin:cypress/recommended"
    ],
    "ignorePatterns": [
      "node_modules",
      "build",
      "openapi-client",
      "cypress/integration/examples",
      "!.storybook",
      ".github",
      ".ci",
      ".git"
    ],
    "rules": {
      "react-hooks/exhaustive-deps": 0,
      "react/self-closing-comp": [
        "error",
        {
          "component": true,
          "html": true
        }
      ]
    }
  }

.prettierrc

{
  "singleQuote": true,
  "semi": true,
  "tabWidth": 4,
  "printWidth": 100,
  "quoteProps": "consistent",
  "trailingComma": "es5",
  "importOrder": [
    "^@(assets|components|context|hooks|lib|pages|routes|services|styles|ui|utils)/?(.*)$",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderParserPlugins": [
    "jsx",
    "typescript"
  ],
  "overrides": [
    {
      "files": [
        "*.js",
        "*.jsx",
        "*.ts",
        "*.tsx",
        "*.json",
        "*.yml",
        "*.yaml",
        "*.md"
      ],
      "options": {
        "tabWidth": 2,
        "singleAttributePerLine": true
      }
    }
  ]
}

Error log

[warn] Ignored unknown option { importOrder: ["^@(assets|components|context|hooks|lib|pages|routes|services|styles|ui|utils)/?(.*)$", "^[./]"] }.
[warn] Ignored unknown option { importOrderSeparation: true }.
[warn] Ignored unknown option { importOrderParserPlugins: ["jsx", "typescript"] }.

Contribute to @trivago/prettier-plugin-sort-imports

• [ ] I'm willing to fix this bug 🥇

[fekete965]

Are you guys still investigating this issue? I had prettier globally installed, then I added it to my dev dependencies and now I am having the same issue as you Alex.

[alex-athenian]

I downgraded my project back to old version of prettier to be able to support prettier-plugin-sort-imports. Unfortunately seems to be prettier-plugin-sort-imports has no support

[fekete965]

@alex-athenian, I have added the following to my .prettierrc "plugins": ["@trivago/prettier-plugin-sort-imports"], It's working for me with the latest version of prettier and @trivago/prettier-plugin-sort-imports

Edit: My comment was quite vague in terms of versioning, so let me add more info about the package versions:

"prettier": "^2.6.2"
"@trivago/prettier-plugin-sort-imports": "^3.2.0"
"eslint-plugin-prettier": "^4.0.0"

[RihuaChen]

It's working in webstorm, but not working in my vscode,

error is Cannot find module '@trivago/prettier-plugin-sort-imports',

have you ever facing this issue? I tried to reinstall prettier, reboot, it still not working for vscode

prettier version 2.6.2, @trivago/prettier-plugin-sort-imports version 3.2.0

here is my prettier config file

{
  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"],
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
  "importOrder": ["^@server/(.*)$", "^@ui/(.*)$", "<THIRD_PARTY_MODULES>", "^[./]"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 120
}

here is my prettier error log

{
  "filepath": "xxx.ts",
  "parser": "typescript",
  "useTabs": false,
  "tabWidth": 2,
  "endOfLine": "lf",
  "importOrderParserPlugins": [
    "typescript",
    "jsx",
    "decorators-legacy"
  ],
  "plugins": [
    "@trivago/prettier-plugin-sort-imports"
  ],
  "importOrder": [
    "^@server/(.*)$",
    "^@ui/(.*)$",
    "<THIRD_PARTY_MODULES>",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 120
}
["ERROR" - 12:13:37 PM] Error formatting document.
["ERROR" - 12:13:37 PM] Cannot find module '@trivago/prettier-plugin-sort-imports'
Require stack:
- /local/node_modules/.pnpm/[email protected]/node_modules/prettier/index.js
- /local/.vscode/extensions/esbenp.prettier-vscode-9.5.0/dist/extension.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-amd.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-fork.js
Error: Cannot find module '@trivago/prettier-plugin-sort-imports'
Require stack:
- /local/node_modules/.pnpm/[email protected]/node_modules/prettier/index.js
- /local/.vscode/extensions/esbenp.prettier-vscode-9.5.0/dist/extension.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-amd.js
- /Applications/Visual Studio Code.app/Contents/Resources/app/out/bootstrap-fork.js
    at Function.Module._resolveFilename (node:internal/modules/cjs/loader:987:15)
    at h.resolve (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/loader.js:4:761)
    at /local/Project/node_modules/.pnpm/[email protected]/node_modules/prettier/index.js:39110:25
    at Array.map (<anonymous>)
    at Object.load ( /local/Project/node_modules/.pnpm/[email protected]/node_modules/prettier/index.js:39105:65)
    at Object.load [as loadPlugins] ( /local/Project/node_modules/.pnpm/[email protected]/node_modules/prettier/index.js:15998:27)
    at /local/Project/node_modules/.pnpm/[email protected]/node_modules/prettier/index.js:39172:24
    at Object.Success [as format] (/local/Project/node_modules/.pnpm/[email protected]/node_modules/prettier/index.js:39188:12)
    at t.default.format ( /local/.vscode/extensions/esbenp.prettier-vscode-9.5.0/src/PrettierEditService.ts:463:45)
    at t.PrettierEditProvider.provideEdits (/local/.vscode/extensions/esbenp.prettier-vscode-9.5.0/src/PrettierEditService.ts:322:22)
    at z.provideDocumentFormattingEdits (/Applications/Visual Studio Code.app/Contents/Resources/app/out/vs/workbench/api/node/extensionHostProcess.js:83:105121)
["INFO" - 12:13:37 PM] Formatting completed in 0.034ms.

[vallovic]

@RihuaChen I'm having the exact same problem with VS Code but I found a solution.

The way I managed to get around this issue was by moving from JSON config format .prettierrc to Javascript config format .prettierrc.js, just like the one shown in README, and referencing the plugin like below:

module.exports = {
  "printWidth": 80,
  "tabWidth": 4,
  "trailingComma": "all",
  "singleQuote": true,
  "semi": true,
  "plugins": [require.resolve("@trivago/prettier-plugin-sort-imports")],
  "importOrder": ["^@core/(.*)$", "^@server/(.*)$", "^@ui/(.*)$", "^[./]"],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true,
  "importOrderCaseInsensitive": true
}

This way it works in VS Code and in command-line (JSON config format was already working in command-line).

Got the idea from here which itself points here.

[Ali-Parandeh]

Adding the following to the prettier.js solved the problem for me

"plugins": [require.resolve("@trivago/prettier-plugin-sort-imports")],

[ayusharma]

Please use require while loading the plugin if you use it pnpm. Something like this https://github.com/verdaccio/verdaccio/blob/c9bd22dcaa2f0d919338fb387ae261992f0e1116/prettier.config.js#L10

Feel free to re-open if the issue still exists.

[fekete965]

Please use require while loading the plugin if you use it pnpm. Something like this https://github.com/verdaccio/verdaccio/blob/c9bd22dcaa2f0d919338fb387ae261992f0e1116/prettier.config.js#L10

Feel free to re-open if the issue still exists.

Amazing! :) Do you know why this syntax is needed for pnpm? I am happy with this approach I am just trying to understand what was the root of the problem. :)