eslint not linting though server is running

Question

I downloaded a frontend template online and yarn installed all packages and an.eslint.json file does exist and the extension is installed in Visual Studio Code but it does not show any linting errors.

Here is my.eslint.json file

{
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true,
      "experimentalObjectRestSpread": true
    }
  },
  "extends": [
    "airbnb",
    "prettier",
    "prettier/react",
    "plugin:flowtype/recommended"
  ],
  "plugins": ["flowtype", "react"],
  "env": {
    "browser": true,
    "node": true,
    "jest": true
  },
  "rules": {
    "import/no-extraneous-dependencies": ["error", { "packageDir": "./" }],
    "jsx-a11y/anchor-is-valid": [
      "error",
      {
        "components": ["Link"],
        "specialLink": ["to"]
      }
    ]
  }
}

Here is my package.json file

{
  "name": "reactjs-template",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "eslint-plugin-prettier": "^3.1.1",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "test:auto": "mocha test",
    "eject": "react-scripts eject",
    "lint": "eslint src --ext .js,.jsx",
    "flow": "flow"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-preset-flow": "^6.23.0",
    "chai": "^4.2.0",
    "chai-as-promised": "^7.1.1",
    "eslint": "^6.6.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-config-prettier": "^6.6.0",
    "eslint-plugin-flowtype": "^3.2.0",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-jsx-a11y": "^6.1.2",
    "eslint-plugin-react": "^7.11.1",
    "flow-bin": "0.83.0",
    "flow-typed": "^2.5.1",
    "mocha": "^5.2.0",
    "prettier": "^1.19.1",
    "selenium-webdriver": "^4.0.0-alpha.1"
  }
}

here is my settings.json file

{
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "choseToUpdateConfiguration",
  "eslint.packageManager": "yarn",
  "javascript.autoClosingTags": false,
  "javascript.format.enable": false,
  "javascript.format.insertSpaceAfterCommaDelimiter": false,
  "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
  "javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": false,
  "javascript.format.insertSpaceAfterSemicolonInForStatements": false,
  "javascript.format.insertSpaceBeforeAndAfterBinaryOperators": false,
  "typescript.tsc.autoDetect": "off",
  "files.eol": "\n",
  "prettier.endOfLine": "lf",
  "prettier.jsxSingleQuote": true,

  "prettier.singleQuote": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "eslint.alwaysShowStatus": true,
  "eslint.lintTask.enable": true,

  "eslint.run": "onSave",
  "eslint.autoFixOnSave": true



}

The template I downloaded is a personal one for a company but here is the package.json to see what it entails

Answer 1

If and not missing something, to make it work follow or check you did the next steps:

• Download ESLint and Prettier extensions for VSCode if you didn't
• Install ESlint and Prettier libraries in your project npm install -D eslint prettier (or use yarn)
• Install eslint-config-prettier (disables formatting for ESLint) and eslint-plugin-prettier (allows ESLint to show formatting errors as we type) npm install -D eslint-config-prettier eslint-plugin-prettier

After that and if all your dependencies are installed taking in consideration your eslintrc file, you should be able to restart vscode and see the errors in the editor directly.

Note that this is something "generic" and you may need to install more packages to add more validations.