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

alex-athenian · 2022-02-25T16:24:13Z

Your Environment

Prettier version: 2.6.0
node version [14.17.0]:
package manager: [yarn@1.22.17]
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 🥇

The text was updated successfully, but these errors were encountered:

fekete965 · 2022-04-08T09:43:58Z

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 · 2022-04-08T09:59:59Z

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 · 2022-04-08T13:28:31Z

@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 · 2022-06-07T04:22:14Z

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/prettier@2.6.2/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/prettier@2.6.2/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/prettier@2.6.2/node_modules/prettier/index.js:39110:25
    at Array.map (<anonymous>)
    at Object.load ( /local/Project/node_modules/.pnpm/prettier@2.6.2/node_modules/prettier/index.js:39105:65)
    at Object.load [as loadPlugins] ( /local/Project/node_modules/.pnpm/prettier@2.6.2/node_modules/prettier/index.js:15998:27)
    at /local/Project/node_modules/.pnpm/prettier@2.6.2/node_modules/prettier/index.js:39172:24
    at Object.Success [as format] (/local/Project/node_modules/.pnpm/prettier@2.6.2/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 · 2022-06-22T18:51:43Z

@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 · 2022-08-29T22:17:39Z

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

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

ayusharma · 2023-02-24T19:41:44Z

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 · 2023-02-24T22:27:53Z

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. :)

alex-athenian added the investigation label Feb 25, 2022

ibrahimduran mentioned this issue Jun 25, 2022

not register prettier plugin installed by pnpm prettier/prettier-vscode#2586

Closed

wzulfikar mentioned this issue Dec 24, 2022

Explore Valtio wzulfikar/unwind#14

Merged

ayusharma closed this as completed Feb 24, 2023

escapedcat mentioned this issue Jul 26, 2023

Prettier v3 throws warning "Ignored unknown option" for importOrder / importOrderSeparation #244

Closed

1 task

hrumhurum mentioned this issue Sep 7, 2023

prettier-plugin-sort-imports with prettier >=3 #251

Open

blazejkustra mentioned this issue Jul 1, 2024

Add prettier-plugin-sort-imports plugin to prettier config Expensify/App#44682

Merged

48 tasks

rin-st mentioned this issue Oct 17, 2024

Update ts, eslint, prettier scaffold-eth/scaffold-eth-2#963

Open

2 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

alex-athenian commented Feb 25, 2022

fekete965 commented Apr 8, 2022

alex-athenian commented Apr 8, 2022

fekete965 commented Apr 8, 2022 •

edited

Loading

RihuaChen commented Jun 7, 2022 •

edited

Loading

vallovic commented Jun 22, 2022 •

edited

Loading

Ali-Parandeh commented Aug 29, 2022

ayusharma commented Feb 24, 2023

fekete965 commented Feb 24, 2023

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

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

Comments

alex-athenian commented Feb 25, 2022

fekete965 commented Apr 8, 2022

alex-athenian commented Apr 8, 2022

fekete965 commented Apr 8, 2022 • edited Loading

RihuaChen commented Jun 7, 2022 • edited Loading

vallovic commented Jun 22, 2022 • edited Loading

Ali-Parandeh commented Aug 29, 2022

ayusharma commented Feb 24, 2023

fekete965 commented Feb 24, 2023

fekete965 commented Apr 8, 2022 •

edited

Loading

RihuaChen commented Jun 7, 2022 •

edited

Loading

vallovic commented Jun 22, 2022 •

edited

Loading