[SOLVED] How to find conflicting eslint rules

Issue

What is the best way to find conflicts within the rules?

The problem I am trying to solve is a follows. Something is forcing this ternary expression onto new lines. I suspect it’s something to do with long lines but I’ve tried setting max-len with no change:

setAdjustmentValue((props.adjustmenttype === AdjustmentTypes.Restock) ? props.selectedsiteunitstock.maximumCapacity - props.selectedsiteunitstock.currentStockLevel : null);

linted to:

setAdjustmentValue(
            props.adjustmenttype === AdjustmentTypes.Restock
                ? props.selectedsiteunitstock.maximumCapacity -
                        props.selectedsiteunitstock.currentStockLevel
                : null
        );

The lint fails if I set "multiline-ternary": ["error", "never"]

Here is my full config:

{
    "env": {
        "browser": true,
        "es2020": true
    },
    "extends": [
        "plugin:@typescript-eslint/recommended",
        "plugin:react/recommended"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": ["react", "@typescript-eslint", "react-hooks"],
    "rules": {
        "react-hooks/rules-of-hooks": "error",
        "react-hooks/exhaustive-deps": "warn",
        "react/jsx-filename-extension": [
            1,
            {
                "extensions": [".tsx"]
            }
        ],
        "import/prefer-default-export": "off",
        "@typescript-eslint/explicit-module-boundary-types": "off",
        "react/jsx-one-expression-per-line": "off",
        "no-use-before-define": "off",
        "no-unexpected-multiline": 2,
        "dot-location": ["error", "object"],
        "linebreak-style": ["error", "windows"],
        "brace-style": "off",
        "max-len": [
            "error",
            {
                "code": 9999999
            }
        ],
        "@typescript-eslint/brace-style": [
            "error",
            "allman",
            {
                "allowSingleLine": false
            }
        ],
        "arrow-body-style": ["error", "as-needed"],
        "curly": ["error", "multi-or-nest"],
        "jsx-quotes": ["error", "prefer-double"],
        "quotes": ["off"],
        "@typescript-eslint/quotes": ["error", "single"],
        "comma-dangle": "off",
        "@typescript-eslint/comma-dangle": ["error", "never"],
        "array-element-newline": [
            "error",
            {
                "minItems": 3
            }
        ],
        "array-bracket-newline": [
            "error",
            {
                "multiline": true
            }
        ],
        "indent": ["off"],
        "@typescript-eslint/indent": ["error", "tab"],
        "multiline-ternary": ["error", "never"]
    },
    "settings": {
        "import/resolver": {
            "typescript": {}
        },
        "settings": {
            "react": {
                "version": "detect"
            }
        }
    }
}

Solution

I’ve created a very plain project to test things out. My very basic .eslintrc config file containing only one rule quotes:

{
    "parserOptions": {
        "ecmaVersion": 6,
        "sourceType": "script"
    },
    "rules": {
        "quotes": ["error", "double"]
    }
}

And my index.js file which is going to be tested:

let no = 'this is wrong';

let yes = "this is correct bc i enforced double quotes";

Now, running the following command:

npx eslint index.js

Yields the following output:

2:10 error Strings must use doublequote quotes

where quotes after "String must use doublequote" is the rule that raised the error.

And in VSCode it looks like this:

picture of an eslint error

Answered By – CKE

Answer Checked By – David Marino (BugsFixing Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *