Search code examples
eslintprettierprettier-eslint

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


I set in my .eslintrc the rule "quote-props": [2, "always"]. When I do eslint --fixit will work properly.

But I format my code with Prettier. Unfortunately Prettier has no always but as-needed|preserve|consistent for quote-props. So the result is always that it removes my quote props when I format with Prettier.

How can I tell Prettier to respect this rule? Adding // prettier-ignore is not an option.

.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"
};

Solution

  • Since Prettier doesn't support an "always-quote-props" option but eslint does, I removed the quote-props setting from my .prettierrc-file and set in my .eslintrc quote-props to ["error", "always"].

    Finally I used 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