eslint - 如何强制 Prettier 使用 always quote Prop (并遵守我的 eslint 规则)？

Question

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

但是我用 Prettier 格式化我的代码。不幸的是，Prettier 没有always，但as-needed|preserve|consistent 用于quote-props。所以结果总是在我使用 Prettier 格式化时删除我的引号 Prop 。

我如何告诉 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 设置从我的 .prettierrc 文件并在我的 .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