Don't know how to add other rules to .eslintrc.js

[Arka-cell]

I read the documentation and I have created my file .eslintrc.js and added the following config:

module.exports = {
    env: {
      node: true,
      es6: true
    },
    plugins: ["gridsome"],
    rules: {
      "gridsome/format-query-block": "error",
      "gridsome/require-g-image-src": "error",
      "gridsome/require-g-link-to": "error"
    },
    parser: "vue-eslint-parser"
  }

But I want to combine it with the following config:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/recommended", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "@babel/eslint-parser",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
  overrides: [
    {
      files: [
        "**/__tests__/*.{j,t}s?(x)",
        "**/tests/unit/**/*.spec.{j,t}s?(x)",
      ],
      env: {
        jest: true,
      },
    },
  ],
};

First of all, can I combine both? And, if so, then what should I read, because the documentation was really small for the plugin.