linting for typescript

What is the purpose of ESLint, Prettier and TypeScript compiler?

• ESLint: Linting tool to detect code quality and formatting issues
• Prettier: Code formatter to fix formatting inconsistencies
• TypeScript compiler: Compiles TypeScript into JavaScript

How to setup ESLint for a TypeScript project?

• Install required packages: eslint, @typescript-eslint/parser, @typescript-eslint/eslint-plugin
• Create .eslintrc config file extending plugin:@typescript-eslint/recommended
• Configure parser to use @typescript-eslint/parser
• Add @typescript-eslint plugin

How to integrate Prettier with ESLint?

• Install eslint-config-prettier to disable ESLint conflicting rules
• Install eslint-plugin-prettier to run Prettier as an ESLint rule
• Extend prettier config in .eslintrc
• Add prettier plugin in .eslintrc
• Set "prettier/prettier": "error" rule in .eslintrc

How to run ESLint on TypeScript files?

• Install TypeScript compiler
• Generate tsconfig.json for compilation settings
• Use eslint --ext .js,.ts to lint JS and TS files

References

• https://code.visualstudio.com/api/advanced-topics/tslint-eslint-migration
• https://khalilstemmler.com/blogs/tooling/prettier/
• https://javascript.plainenglish.io/setting-eslint-and-prettier-on-a-react-typescript-project-2021-22993565edf9