how to disable stylelint rules?

Question

I am using stylelints and I have some rules that I want to disable :

in less I have to do calc this way top: calc(~'50% + 30px'); but "function-calc-no-invalid" prevent it

https://stylelint.io/user-guide/rules/function-calc-no-invalid

also, I want to allow my less code to apply css to component directly so

my-componet { width:100px} so I need to disable "selector-type-no-unknown"

https://stylelint.io/user-guide/rules/selector-type-no-unknown

I tried to create a .styllelintrc file and add the following

    "selector-type-no-unknown": "custom-elements",
    "function-calc-no-invalid": "false",

and manyvariation, but I keep getting

Invalid Option: Unexpected option value "false" for rule "function-calc-no-invalid" Invalid Option: Unexpected option value "custom-elements" for rule "selector-type-no-unknown"

Answer 1

Your stylelint configuration object in your .stylelintrc file should be:

{
  "rules": {
    "function-calc-no-invalid": null,
    "selector-type-no-unknown": [
      true,
      {
        "ignore": [
          "custom-elements"
        ]
      }
    ]
  }
}

You can learn more about how rules are configured in the stylelint user guide, e.g. how to turn rules off rules using null and configure optional secondary options like ignore: ["custom-elements"].