ESLint + @typescript-eslint
Set up ESLint with @typescript-eslint plugin to catch type-aware issues and enforce consistent style.
ESLint + @typescript-eslint is a free TypeScript Academy lesson on CoddyKit — lesson 1 of 3. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 3 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Intro
Goal: Use ESLint with @typescript-eslint to catch bugs and enforce style in TypeScript projects.
Install
Install core ESLint plus @typescript-eslint/parser and @typescript-eslint/eslint-plugin.
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-pluginConfig
Configure ESLint to use the TS parser and recommended rules. Add project-specific rules as needed.
// .eslintrc.js
module.exports = {
parser: "@typescript-eslint/parser",
plugins: ["@typescript-eslint"],
extends: [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
],
rules: {
"@typescript-eslint/no-unused-vars": "warn"
}
};Example lint
ESLint highlights missing arguments, unused vars, and style issues when using the TS-aware parser.
// demo.ts
function greet(name: string) {
console.log("Hello", name)
}
greet("Ada")
greet() // ESLint error: missing arg
Type-aware rules
Link to tsconfig.json in parserOptions for rules that need type info, e.g., detecting unhandled promises.
// tsconfig.json must be linked for type-aware rules
{
"parserOptions": {
"project": "./tsconfig.json"
}
}
// Example: no-floating-promises
async function f() {
fetch("/api") // ESLint error: unhandled promise
}Run lint
Run ESLint on your codebase. Add --fix to auto-apply safe fixes.
npx eslint "src/**/*.{ts,tsx}" --fixQuestion
Quick check: Why use @typescript-eslint in addition to ESLint core?
Recap
Recap: Install ESLint + @typescript-eslint, configure parser, extend recommended, run linter with type-aware rules for clean code.
Frequently asked questions
Is the “ESLint + @typescript-eslint” lesson free?
Yes — the full text of “ESLint + @typescript-eslint” is free to read here on the web, and the TypeScript Academy course includes 3 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “ESLint + @typescript-eslint”?
Set up ESLint with @typescript-eslint plugin to catch type-aware issues and enforce consistent style. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start TypeScript Academy?
No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 3, so you can start here or from the beginning and move at your own pace.
How long does the “ESLint + @typescript-eslint” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this TypeScript Academy lesson?
Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- ESLint + @typescript-eslint
- Prettier integration & rule conflicts
- Common real-world rule sets