ESLint errors not reflecting in VS Code IDE - eslint

Question

Heres my eslint.rc :
{
"parser": "babel-eslint",
"extends": [
"eslint-config-airbnb",
],
"plugins": ["react"],
"rules": {
"linebreak-style": 0,
"arrow-body-style": 0,
"no-console": 2,
"react/forbid-prop-types": 0,
"react/no-array-index-key": 1,
"react/prefer-stateless-function": 1,
"react/require-default-props": 0,
"space-before-function-paren": 0,
"comma-dangle": 0,
"template-curly-spacing" : "off",
"indent": [
"error", 2,
{ "ignoredNodes": ["TemplateLiteral"] }
],
"react/jsx-filename-extension": [1, { "extensions": [".js"] }],
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
"**/__tests__/**",
"**/*.spec.*",
"**/fixtures/**",
"**/*.stories*",
"**/scripts/**",
"./config/**"
],
"optionalDependencies": false
}
],
"require-jsdoc": ["error", {
"require": {
"FunctionDeclaration": true,
"MethodDefinition": true,
"ClassDeclaration": true,
"ArrowFunctionExpression": true
}
}],
"valid-jsdoc": ["error", {
"prefer": { "arg": "param", "argument": "param", "class": "constructor", "return": "returns", "virtual": "abstract" },
"preferType": { "Boolean": "boolean", "Number": "number", "object": "Object", "String": "string", "node": "Node" },
"requireReturn": false,
"requireReturnType": true,
"matchDescription": ".+",
"requireParamDescription": true,
"requireReturnDescription": false
}]
},
"globals": {
"window": true,
"document": true
},
"settings": {
"import/resolver": {
"node": {
"extensions": [".js", ".android.js", ".ios.js", ".web.js"]
}
}
},
"root": true
}
heres package.json :
{
"name": "abc",
"version": "1",
"private": true,
"homepage": "xyz",
"scripts": {
"serve": "cp-cli build _site/metronic/preview/react && serve",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"lint": "eslint --config .eslintrc 'src/**/*.js' --ignore-pattern 'src/**/*.spec.js'",
"format": "prettier --write \"src/**/*.{js,css,scss,html}\"",
"rtl": "webpack"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all",
"ie 11"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version",
"last 1 edge version",
"IE 11"
]
},
"dependencies": {
"#date-io/date-fns": "^1.3.11",
"#formatjs/intl-pluralrules": "^1.3.5",
"#fortawesome/fontawesome-free": "^5.11.2",
"#material-ui/core": "^4.9.10",
"#material-ui/icons": "^4.5.1",
"#material-ui/lab": "^4.0.0-alpha.49",
"#material-ui/pickers": "^3.2.8",
"#material-ui/styles": "^4.6.0",
"#tanem/svg-injector": "^8.0.35",
"axios": "^0.19.0",
"axios-mock-adapter": "^1.17.0",
"bootstrap": "^4.4.1",
"chart.js": "^2.9.3",
"clipboard-copy": "^3.1.0",
"clsx": "^1.0.4",
"cp-cli": "^2.0.0",
"css-mediaquery": "^0.1.2",
"date-fns": "^2.8.1",
"dentist": "^1.0.3",
"downshift": "^3.4.2",
"fg-loadcss": "^2.1.0",
"formik": "^2.0.6",
"json2mq": "^0.2.0",
"jss-rtl": "^0.3.0",
"lodash": "^4.17.15",
"material-ui-popup-state": "^1.4.1",
"object-path": "^0.11.4",
"perfect-scrollbar": "^1.4.0",
"prop-types": "^15.7.2",
"react": "^16.13.1",
"react-app-polyfill": "^1.0.6",
"react-bootstrap": "1.0.0-beta.16",
"react-dom": "^16.13.1",
"react-draggable": "^4.1.0",
"react-helmet": "^5.2.1",
"react-highlight": "^0.12.0",
"react-intl": "^3.6.2",
"react-is": "^16.12.0",
"react-perfect-scrollbar": "^1.5.3",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-router-last-location": "^2.0.1",
"react-scripts": "3.2.0",
"react-select": "^3.0.8",
"react-swipeable-views": "0.13.3",
"react-swipeable-views-utils": "0.13.3",
"react-syntax-highlighter": "^11.0.2",
"react-window": "^1.8.5",
"reactstrap": "^8.1.1",
"redux": "^4.0.4",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"redux-saga": "^1.1.3",
"socicon": "^3.0.5",
"styled-components": "^5.1.0"
},
"devDependencies": {
"babel-eslint": "10.1.0",
"babel-plugin-webpack-alias": "^2.1.2",
"copyfiles": "^2.1.1",
"eslint": "7.1.0",
"eslint-config-airbnb": "16.1.0",
"eslint-import-resolver-webpack": "^0.12.1",
"eslint-loader": "2.1.1",
"eslint-plugin-flowtype": "5.1.1",
"eslint-plugin-import": "2.8.0",
"eslint-plugin-jsx-a11y": "6.0.2",
"eslint-plugin-react": "^7.20.0",
"node-sass": "^4.13.0",
"prettier": "^1.19.1",
"serve": "^11.2.0",
"webpack-cli": "^3.3.10",
"webpack-messages": "^2.0.4",
"webpack-rtl-plugin": "^2.0.0"
}
}
Though yarn lint is working; There's an error in eslint task runner -
TypeError: createRequire is not a function
Referenced from: /Users/xyz/Documents/abc/.eslintrc
at Object.resolve (/Users/xyz/Documents/abc/node_modules/eslint/lib/shared/relative-module-resolver.js:28:20)
at ConfigArrayFactory._loadExtendedShareableConfig (/Users/xyz/Documents/abc/node_modules/eslint/lib/cli-engine/config-array-factory.js:854:39)
at ConfigArrayFactory._loadExtends (/Users/xyz/Documents/abc/node_modules/eslint/lib/cli-engine/config-array-factory.js:763:25)
at ConfigArrayFactory._normalizeObjectConfigDataBody (/Users/xyz/Documents/abc/node_modules/eslint/lib/cli-engine/config-array-factory.js:702:25)
at _normalizeObjectConfigDataBody.next ()
at ConfigArrayFactory._normalizeObjectConfigData (/Users/xyz/Documents/abc/node_modules/eslint/lib/cli-engine/config-array-factory.js:647:20)
at _normalizeObjectConfigData.next ()
at ConfigArrayFactory.loadInDirectory (/Users/xyz/Documents/abc/node_modules/eslint/lib/cli-engine/config-array-factory.js:495:28)
at CascadingConfigArrayFactory._loadConfigInAncestors (/Users/xyz/Documents/abc/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js:355:46)
at CascadingConfigArrayFactory._loadConfigInAncestors (/Users/xyz/Documents/abc/node_modules/eslint/lib/cli-engine/cascading-config-array-factory.js:374:20)