Loading lesson path
Concept visual
Start at both ends
TypeScript's tooling ecosystem is one of its greatest strengths, providing developers with powerful tools for every stage of development:
Hot Module Replacement (HMR) Build & Deploy Bundlers (Vite, Webpack, Parcel)
Formula
Install ESLint and the official TypeScript plugin/parser so ESLint can understand TypeScript syntax and rules.# Install ESLint with TypeScript support npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
This configuration enables recommended ESLint rules for TypeScript, connects ESLint to your tsconfig for type-aware linting, and tweaks a few common rules.
// .eslintrc.json
{
"root": true,Formula
"parser": "@typescript - eslint/parser",
"plugins": ["@typescript - eslint"],"extends": [ "eslint:recommended",
Formula
"plugin:@typescript - eslint/recommended",
"plugin:@typescript - eslint/recommended - requiring - type - checking"],
"parserOptions": {
"project": "./tsconfig.json",
"ecmaVersion": 2020,
"sourceType": "module"
},
"rules": {
"@typescript-eslint/explicit-function-return-type": "warn",Formula
"@typescript - eslint/no - explicit - any": "warn","@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
}
}Formula
Add scripts to run linting and a type - only check.
Use lint:fix to auto - fix simple issues.// package.json
{
"scripts": {
"lint": "eslint . --ext .ts,.tsx",
"lint:fix": "eslint . --ext .ts,.tsx --fix",Formula
"type - check": "tsc -- noEmit"}
}Prettier enforces a consistent code style across your team.
Formula
Combine it with ESLint to avoid formatting - related lint errors.Install Prettier plus ESLint plugins that disable conflicting rules and surface formatting issues via ESLint.
Formula
# Install Prettier and related packages npm install -- save - dev prettier eslint - config - prettier eslint - plugin - prettierDefine your Prettier preferences in.prettierrc and ignore generated folders in.prettierignore.
// .prettierrc
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"printWidth": 100,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "avoid"
}// .prettierignore node_modules build dist.next.vscode
Formula
Extend plugin:prettier/recommended so formatting problems are reported as ESLint issues.// .eslintrc.json
{
"extends": [// ... other configs
Formula
"plugin:prettier/recommended" // Must be last in the array]
}Example: Integrate Prettier with ESLint npm install --save-dev eslint-config-prettier eslint-plugin-prettier # In your .eslintrc.js or .eslintrc.json, add:
{Formula
"extends": ["plugin:prettier/recommended"]}