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"
};
Since
Prettierdoesn't support an "always-quote-props" option buteslintdoes, I removed thequote-propssetting from my.prettierrc-file and set in my.eslintrcquote-props to["error", "always"].Finally I used prettier-eslint: