'Not sure if ESLint is installed properly

I am an amateur with JS, working with a MacBook Pro Catalina, and VSCode. I am working towards being able to run simulations and similar.

I enabled ESLint in VSC (globally) , then I went through the process outlined in the ESLint webpage. When I look at the eslintrc.js file I see the "rules" line is empty. I presumed the ESLint rules would be listed here, but there is nothing. Or maybe this is where the optional Standard, airBnB or Google rules are referenced? I'm not convinced ESLint is working and I may have overlooked something. Can you help please? Attached, my .eslintrc.js, and package.json files. Thanks.

module.exports = {
  "env": {
      "browser": true,
      "es2021": true
  },
  "extends": [
      "eslint:recommended",
      "plugin:react/recommended"
  ],
  "parserOptions": {
      "ecmaFeatures": {
          "jsx": true
      },
      "ecmaVersion": "latest",
      "sourceType": "module"
  },
  "plugins": [
      "react"
  ],
  "rules": {
  }
}
    {
  "name": "javascript",
  "version": "8.1.2",
  "description": "npm for macos",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "eslint": "^8.8.0",
    "eslint-plugin-react": "^7.28.0"
  },
  "explorer.sortOrder":"filesFirst"
}


Solution 1:[1]

Rules that are enforced for your whole project come from one of two places. One of them is in the extends array, which you have here:

  "extends": [
      "eslint:recommended",
      "plugin:react/recommended"
  ],

This means that all rules from eslint:recommended and from plugin:react/recommended will be enforced in your project.

This section is where additional linting config packages will go - such as Airbnb or Standard or whatever you wish.

There's also the rules section that you've noticed. This is for rules that you define yourself, for your project - usually for things that you want to enforce (or ignore) that the config packages you've imported don't do as desired. You may want to add rules, eg:

"rules": {
  'padded-blocks': ['error', 'never']
}

or you may want to disable rules that the other configs provide that you don't like:

"rules": {
  'comma-dangle': 'off',
}

or both, in any combination.

So the rules object being empty (initially) is perfectly normal - that's the place to put in the custom rules you want not covered by other packages.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 CertainPerformance