Prettier next (2.6.0) + 导入订单插件 @trivago/prettier-plugin-sort-imports 错误忽略未知选项 { importOrderSeparation: true }

Question

我正在从 Prettier 2.0.5 的稳定版本迁移到 Prettier 2.6.0 的下一个版本，该版本与稳定版本不同。@trivago/prettier-plugin-sort-imports 插件出现问题，该插件适用于 prettier 2.0.5，但不适用于 2.6.0。因为只有 2.6.0 版本支持此参数https://prettier.io/docs/en/next/options.html#single-attribute-per-line。我已将 @trivago/prettier-plugin-sort-imports 更新到最新版本，并根据https://github.com/trivago/prettier-plugin-sort-imports/blob/master/docs/MIGRATION.md迁移到 3x

包.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
      }
    }
  ]
}

控制台说：

[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"] }.

Prettier 好像没有看到这个插件。非常感谢任何帮助

Answer 1

您需要在 Prettier 配置中加载插件：

{
  ...
  plugins: ['@trivago/prettier-plugin-sort-imports'],
}

有关参考，请参阅Prettier 文档中的使用插件部分。