How to get ESLint/Prettier to underline errors in code in TypeScript for VS Code

Question

I've installed ESLint and Prettier in my project folder, along with about every add on I could find to help solve the issue. I've also installed and enabled the extensions. However, I don't get any error warning in my files. For example, the following code should warn me about the following eslintprettier/prettier errors:

1. missing return type on function,
2. Replace ⏎····console/log('test') with `··console/log('test'); ,
3. replace .log('test') with ·/·log('test');

  ngOnInit() {
  
    console.log('test')
  } 

However, I get no error warning - nothing is underlined.

Below is my .eslintrc.json file:

{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended",
    "prettier",
    "prettier/prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["@typescript-eslint", "prettier", "@typescript-eslint/eslint-plugin", "plugin:prettier/recommended"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

And my .prettierrc.json file:

{
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": true,
    "quoteProps": "as-needed",
    "trailingComma": "es5",
    "arrowParens": "always",
    "endOfLine": "lf",
    "overrides": [
      {
        "files": "*.component.html",
        "options": {
          "parser": "angular"
        }
      },
      {
        "files": "*.html",
        "options": {
          "parser": "html"
        }
      }
    ]
  }

and my package.json file:

{
  "name": "test-project",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^14.1.0",
    "@angular/common": "^14.1.0",
    "@angular/compiler": "^14.1.0",
    "@angular/core": "^14.1.0",
    "@angular/forms": "^14.1.0",
    "@angular/material": "^7.0.0",
    "@angular/platform-browser": "^14.1.0",
    "@angular/platform-browser-dynamic": "^14.1.0",
    "@angular/router": "^14.1.0",
    "bootstrap": "^5.3.1",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^14.1.1",
    "@angular-eslint/builder": "16.1.0-alpha.0",
    "@angular-eslint/eslint-plugin": "16.1.0-alpha.0",
    "@angular-eslint/eslint-plugin-template": "16.1.0-alpha.0",
    "@angular-eslint/schematics": "16.1.0-alpha.0",
    "@angular-eslint/template-parser": "16.1.0-alpha.0",
    "@angular/cli": "~14.1.1",
    "@angular/compiler-cli": "^14.1.0",
    "@types/jasmine": "~4.0.0",
    "@typescript-eslint/eslint-plugin": "^6.3.0",
    "@typescript-eslint/parser": "^6.3.0",
    "eslint": "^8.40.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.0",
    "jasmine-core": "~4.2.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "prettier": "3.0.1",
    "prettier-eslint": "^15.0.1",
    "typescript": "~4.7.2"
  }
}

I know it should work because I have another project folder on my computer with the same config and it underlines errors as I type and gives me autocorrect options. I can't figure out why this one isn't working.

Answer 1

In the .vscode/settings.json file (you may have to add one if it doesn't exist already, as was my case), add the following code:

{
    "eslint.workingDirectories": [
        "FolderName",
    ],
}

Where 'FolderName' is the name of the folder you're coding in. This will tell ESLint what directory to correct code in, and result in your code being underlined when you write a linting/prettier error.

You can achieve the same thing by opening your VS Code settings, selecting the 'ESLint' settings, scrolling down to 'Working Directories' and clicking 'Edit in settings.json'