时间戳

首页 > 解决方案 > 如何强制 Prettier 使用总是引用道具（并尊重我的 eslint 规则）？

eslint - 如何强制 Prettier 使用总是引用道具（并尊重我的 eslint 规则）？

问题描述

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

但我用 Prettier 格式化我的代码。不幸的是，Prettieralways只有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"
};

标签： eslintprettierprettier-eslint

解决方案

由于Prettier不支持“always-quote-props”选项，但支持，我从我的-file 中eslint删除了设置，并将我的quote-props 设置为.quote-props.prettierrc.eslintrc["error", "always"]

最后我使用了 prettier-eslint：

这会通过 prettier 格式化您的代码，然后将结果传递给 eslint --fix。这样既可以享受 prettier 优越的格式化能力带来的好处，也可以受益于 eslint 的配置能力

推荐阅读