Linting with Typescript (eslint.prettier)

ESLint helps you find and fix problems in your TypeScript code. Prettier handles code formatting (indentation, spacing, semicolons, etc.) Together, they ensure both correctness and consistent style.

📦 Install ESLint, Prettier, and Plugins

Use the following commands:

npm install --save-dev eslint prettier
npm install --save-dev eslint-config-prettier eslint-plugin-prettier
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

📄 Create .eslintrc.json

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:prettier/recommended"
  ],
  "plugins": ["@typescript-eslint"],
  "parserOptions": {
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {
    "prettier/prettier": "error",
    "@typescript-eslint/no-unused-vars": ["warn"]
  }
}

✅ Explanation:

• "plugin:prettier/recommended" enables Prettier and disables ESLint rules that might conflict.

• @typescript-eslint plugin adds TypeScript-specific lint rules.

• You can customize rules as needed.

🎨 Add .prettierrc (optional)

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5"
}

Or use .prettierrc.js, .prettierrc.yaml, or "prettier" field in package.json.

🚀 Create Lint Scripts in package.json

"scripts": {
  "lint": "eslint . --ext .ts,.tsx",
  "lint:fix": "eslint . --ext .ts,.tsx --fix"
}

🧪 Run Linting and Formatting

npm run lint
npm run lint:fix

Prettier (optional CLI):

npx prettier --write .

🧩 VS Code Integration (Recommended)

Install the following extensions:

• ESLint

• Prettier - Code formatter

Then in your VS Code settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": ["typescript"]
}

🧠 Notes

• ESLint catches code quality issues.

• Prettier handles code style (line length, quotes, indentation).

• eslint-config-prettier disables formatting rules from ESLint to avoid conflict with Prettier.

• plugin:prettier/recommended does both: applies the config and enables formatting as an ESLint rule.