如何强制 Prettier 使用 always quote 道具（并遵守我的 eslint 规则）？

Question

我在 .eslintrc 中设置了规则 "quote-props": [2, "always"]。当我这样做时 eslint --fix 它会正常工作。

但我用 Prettier 格式化我的代码。不幸的是，Prettier 没有 always，但 as-needed|preserve|consistent 对应 quote-props。所以结果总是当我用 Prettier 格式化时它删除了我的引用道具。

如何让 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 支持，我从 .prettierrc 文件中删除了 quote-props 设置并将我的 .eslintrc quote-props 设置为 ["error", "always"].

最后我用了prettier-eslint:

This formats your code via prettier, and then passes the result of that to eslint --fix. This way you can get the benefits of prettier's superior formatting capabilities, but also benefit from the configuration capabilities of eslint

如何强制 Prettier 使用 always quote 道具（并遵守我的 eslint 规则）？

How to force Prettier to use always quote props (and respect my eslint rules)?

eslint

prettier

prettier-eslint