I set in my .eslintrc
the rule "quote-props": [2, "always"]
. When I do eslint --fix
it 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 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