eslint和prettier样式冲突解决

最新推荐文章于 2024-03-01 15:37:20 发布

kaqiinono

最新推荐文章于 2024-03-01 15:37:20 发布

阅读量6k

点赞数

分类专栏： FAQ 文章标签：前端

本文链接：https://blog.csdn.net/songmeinuo/article/details/125297223

版权

FAQ 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

原因：eslint格式化部分的规则和 prettier不兼容。

解决方案：

eslint-config-prettier + eslint-plugin-prettier。

eslint-config-prettier：关闭eslint中与prettier相互冲突的规则。
eslint-plugin-prettier：赋予eslint用prettier格式化代码的能力。

安装依赖并修改.eslintrc文件

{
    "parser": "@typescript-eslint/parser",
    "env": {
        "browser": true,
        "jest": true
    },
    "extends": [
        "airbnb",
        "plugin:@typescript-eslint/recommended",
        // 使用来自@typescript-eslint/eslint-plugin的推荐规则
        "plugin:prettier/recommended"
    ],
    "globals": {
        "$": true,
        "describe": true,
        "expect": true,
        "test": true,
        "it": true,
        "jest": true
    },
    "rules": {
        "no-underscore-dangle": "off",
        "one-var": 0,
        "one-var-declaration-per-line": 0,
        "no-restricted-syntax": 0,
        "no-plusplus": 0,
        "no-param-reassign": 0,
        "linebreak-style": [
            "error",
            "unix"
        ],
        "func-names": [
            "error",
            "never"
        ],
        "semi": 2,
        "indent": [
            "error",
            4,
            {
                "VariableDeclarator": 2,
                "SwitchCase": 1
            }
        ],
        "max-len": [
            "error",
            {
                "code": 300
            }
        ],
        "arrow-parens": [
            "error",
            "as-needed"
        ],
        "import/no-unresolved": 0,
        "import/extensions": 0,
        "react/jsx-indent": [
            0,
            4
        ],
        "react/forbid-prop-types": 0,
        "react/jsx-indent-props": [
            "error",
            4
        ],
        "react/self-closing-comp": [
            "error",
            {
                "component": true,
                "html": false
            }
        ],
        "jsx-quotes": [
            2,
            "prefer-single"
        ],
        "no-unused-expressions": [
            "error",
            {
                "allowShortCircuit": true,
                "allowTernary": true
            }
        ],
        "jsx-a11y/click-events-have-key-events": 0,
        "jsx-a11y/no-static-element-interactions": 0,
        "jsx-a11y/no-noninteractive-element-interactions": 0,
        "react/jsx-one-expression-per-line": 0,
        "prefer-destructuring": 0,
        "react/no-multi-comp": 0,
        "no-nested-ternary": 0,
        "no-multi-assign": 0,
        "react/no-array-index-key": 0,
        "react/jsx-props-no-spreading": 0,
        "import/prefer-default-export": 0,
        "max-classes-per-file": 0,
        "array-callback-return": 0,
        "react/no-find-dom-node": 0,
        "import/no-extraneous-dependencies": 0,
        "react/jsx-pascal-case": 0,
        "react/state-in-constructor": 0,
        "react/jsx-filename-extension": [
            "error",
            {
                "extensions": [
                    ".js",
                    ".jsx",
                    ".ts",
                    ".tsx"
                ]
            }
        ],
        "no-use-before-define": "off",
        "react/forbid-foreign-prop-types": "off",
        "@typescript-eslint/no-empty-function": "off"
    }
}