How to adjust (not 100% override) existing eslint rule's configuration coming from config I extend?

Question

My project's eslint config extends from airbnb:

module.exports = {
  root: true,
  parser: "@typescript-eslint/parser",
  parserOptions: {
    project: "./tsconfig.eslint.json",
  },
  plugins: ["@typescript-eslint"],
  extends: [
    "airbnb-base",
    "airbnb-typescript/base"
  ]
};

I would like to slightly adjust the import/no-extraneous-dependencies rule which is already configured with airbnb config.

I am interested in adding one more file to allowed for devDependencies imports:

rules: {
  "import/no-extraneous-dependencies": [
    "error",
    {
      devDependencies: ["vitest.config.ts"],
    },
  ],
},

If I do like above, then I completely overwrite the list in 'import/no-extraneous-dependencies'[1].devDependencies and the configuration I inherited from airbnb gets lost. How to add one more file to devDependencies list instead of completely overwriting the rule's configuration?

Answer 1

Looks like configurations of the single rule from different configs do not get somehow merged. So, if the last config which configured import/no-extraneous-dependencies rule was airbnb-typescript/base, then I just need to import it and adjust it as needed.

Below is the solution for my case:

const airbnb = require("eslint-config-airbnb-typescript/lib/shared");

const airbnbNoExtraDepsRule = airbnb.rules["import/no-extraneous-dependencies"];
airbnbNoExtraDepsRule[1].devDependencies.push("vitest.config.ts");

module.exports = {
  extends: ["airbnb-base", "prettier"],
  rules: {
    "import/no-commonjs": "on",
    "import/no-extraneous-dependencies": airbnbNoExtraDepsRule,
  }
};