NOTE: For more up-t0-date and exhaustive explaination about how to maintain code consistency and quality, in your app, see this blog post.

Recently, the TypeScript team announced the new typescript-eslint project. Meaning, you can start using the new @typescript-eslint/parser parser.

Since I'm pretty new to TypeScript, I struggled getting it setup to work properly with Prettier. Fortunately, Ben Weiser wrote a great article on getting Create React App setup properly with the new parser.

I was able to take his suggestions and apply it to a vanilla TypeScript project.

Here is my setup:

Unlike Ben, I could not get my Prettier/VScode to work properly with the Prettier rules inside .eslintrc.json.

"rules": {
  "prettier/prettier": ["error", { "singleQuote": true }]
},

Instead, I had to put them in a separate .pretter.rc file like:

{
  "singleQuote": false,
  "semi": true,
  "tabWidth": 2,
  "trailingComma": "all"
}

Now, Code is automatically fixing formatting issues on the fly and pointing out typing errors!

Let me know if you have any other suggestions for this. @Calendee