A quick tip for linting vanilla Typescript(No React) in VsCode

I was trying to get a "reusable" lean linting config for my Typescript repository. This is one of those tasks we do each time, forget the details and hack up a working solution the next time.

There are loads of good guides out there.

I wish to cut to the chase here, since there are so many articles, blog posts out there that talk about the Eslint-Prettier-VSCode configuration for Typescript and everything more you would ever need. I followed this, just for the record-

So now that I have cleared the config setup out of the way, I will directly jump into why I made this quick article. It was for what I could not find so instantly, to get my editor to start drawing squiggly lines under my unformatted code, as I typed. Yeah! I could not get my VsCode editor to do that, despite all the plugins and Eslint/Prettier rules in place.

Before I reveal my secret,

My .eslintrc: (And yes, the extension is optional)

{  
"extends": ["eslint:recommended", "plugin:prettier/recommended", "plugin:@typescript-eslint/recommended"],
  "plugins": ["prettier", "@typescript-eslint"],
  "rules": {
    "eqeqeq": "error",
    "no-console": "warn",
    "no-undef": "off",
    "no-unused-vars": "off",
    "prettier/prettier": "error",
    "@typescript-eslint/explicit-module-boundary-types": "off",
    "@typescript-eslint/explicit-function-return-type": "off",
    "@typescript-eslint/no-explicit-any": "error",
    "@typescript-eslint/no-unused-vars": "warn"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module"
  },
  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "jest": true
  },
  "ignorePatterns": ["node_modules", "build", "dist", "public"]
}        

This is my .prettierrc:

 {
  "useTabs": false,
  "tabWidth": 2,
  "singleQuote": true,
  "printWidth": 120,
  "trailingComma": "es5"
}        

My package.json:

  {
    "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.58.0",
    "@typescript-eslint/parser": "^5.58.0",
    "eslint": "^8.38.0",
    "eslint-config-prettier": "^8.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-typescript": "^0.14.0",
    "prettier": "2.8.7",
    "typescript": "^5.0.4"
  }
}        

The only VsCode plugin I need:

The missing secret ingredient:

Goto Settings->Preferences: Open user settings

This setting was checked in my editor, which sorta was overriding the Prettier formatting from kicking in, from inside the files.

And everything came to life- with all the squiggly lines and loads of errors, warnings in the "Problems" tab once I unchecked the .editorconfig usage!

That's it for now folks, hope this helps someone.

Take care!