Prettier next(2.6.0)+import order plugin@trivago/praiter plu



我将从Prettier 2.0.5的稳定版本转移到与稳定版本不同的Prettier 2.6.0的下一个版本。并且遇到了@trivago/plaimer插件排序导入插件的问题,该插件适用于更漂亮的2.0.5,但不适用于2.6.0。由于只有2.6.0版本支持此参数https://prettier.io/docs/en/next/options.html#single-每行的属性。我已经更新了@trivago/player插件排序导入到上一个版本,并根据https://github.com/trivago/prettier-plugin-sort-imports/blob/master/docs/MIGRATION.md

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

.漂亮的

{
"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没有看到这个插件似乎是。任何帮助都非常感谢

您需要在Prettier config:上加载插件

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

如需参考,请参阅Prettier文档中的"使用插件"部分。

我也遇到了同样的问题,更漂亮的人没有看到这些东西。我只是在vscode中使用排序导入插件。IDK关于更漂亮的集成的。

您只需要在devDependencies 中安装更漂亮的

yarn add --dev prettier

最新更新