如何强制 Prettier 使用始终引用属性（并尊重我的 eslint 规则）？

Question

我制定了我的.eslintrc规则"quote-props": [2, "always"]。当我这样做时，eslint --fix它会正常工作。

但我用 Prettier 格式化我的代码。不幸的是，Prettier 没有always办法。因此，当我使用 Prettier 进行格式化时，结果总是会删除我的 quote 属性。as-needed|preserve|consistentquote-props

我如何告诉 Prettier 尊重这条规则？添加// prettier-ignore不是一个选项。

.eslintrc：

"extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react-hooks/recommended",
    "prettier",
    "prettier/react"
], // Prettier or Prettier Plugins (here for React) must always be at the end
"env": {
    "cypress/globals": true,
    "node": true,
    "browser": true,
    "es6": true
},
"plugins": ["react", "cypress", "prettier"],
"settings": {
    "react": {
        "createClass": "createClass",
        // Regex for Component Factory to use, default to "createClass"
        "pragma": "React",
        // Pragma to use, default to "React"
        "version": "16.13.1"
        // React version, default to the latest React stable release
    }
},
"parser": "babel-eslint",
"parserOptions": {
    "ecmaFeatures": {
        "jsx": true
    },
    "ecmaVersion": 8,
    "sourceType": "module"
},
"rules": {
    "quote-props": [2, "always"]
...

.prettierrc：

module.exports = {
trailingComma: "none",
tabWidth: 4,
bracketSpacing: true,
arrowParens: "avoid"
};

Answer 1

由于Prettier不支持“always-quote-props”选项，但eslint支持，我quote-props从我的 -file 中删除了该设置，并将我的quote-props.prettierrc设置为..eslintrc["error", "always"]

最后我使用了prettier-eslint：

这会通过 prettier 格式化您的代码，然后将结果传递给 eslint --fix。这样你既可以享受到 Prettier 卓越的格式化功能的好处，也可以受益于 eslint 的配置功能