-2

Goal: To create a strict TypeScript linter script

eslint checks for poor JavaScript code patterns. The docs suggests initialising eslint with npm init @eslint/config@latest

This also installs typescript-eslint

But why use typescript-eslint?

According to the docs it:

enables esLint to run on TypeScript code

But, after removing typescript-eslint, esLint appears to function normally.

Further testing shows that typescript-eslint does not pick up the undefined error, even though tsc does:

// Type "pink" is undefined
const apple: pink = 'apple'
console.log(apple)

My understanding is that tsc compiles TypeScript to JavaScript unless --noEmit tag is added. With options like "strict": true, it's possible to configure TypeScript rules to check.

So is typescript-eslint useless for linting?

It appears as if typescript-eslint does nothing and should be removed. While tsc can actually detect errors.

Improve this question
2
  • "ESLint is an open source project that helps you find and fix problems with your JavaScript code." "typescript-eslint The tooling that enables ESLint and Prettier to support TypeScript." TypeScript errors are detected by tsc. typescript-eslint allows ESLint rules for TypeScript code. Commented Jul 13, 2024 at 13:19
  • The TypeScript compiler does the type checking already. Why should ESLint do it again? This would make absolutely no sense. TypeScript ESLint is checking the code which can be compiled and can find additional code smells in your code. When using TypeScript you should do both, compile and lint. Commented Jul 13, 2024 at 13:23

2 Answers 2

Reset to default
2

But, after removing typescript-eslint, esLint appears to function normally.

When you say it functions normally do you mean functions in your IDE (like vscode) or when you run the eslint command? Because most IDEs come with eslint either built in or available as a package and will lint your code in-editor (using a typescript parser under the hood). Without typescript-eslint eslint can't actually parse your typescript files. Try running eslint without it and see if it lets you.

My understanding is that tsc compiles TypeScript to JavaScript unless --noEmit tag is added. With options like "strict": true, it's possible to configure TypeScript rules to check.

ESLint and tsc do different things.

  • Running tsc will inform you of type errors, something eslint does not do.
  • Running eslint will inform you of linting errors (violations of defined rules) not type errors, something tsc does not do.

ESLint only reports errors from its own linters, it does not report typescript compilation failures. See: https://stackoverflow.com/a/60758789/14073449

The typescript-eslint page explains why it exists pretty well:https://typescript-eslint.io/

ESLint and TypeScript represent code differently internally. ESLint's default JavaScript parser cannot natively read in TypeScript-specific syntax and its rules don't natively have access to TypeScript's type information.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you for clarifying that tsc checks type errors while eslint does not.
As with the existence of typescript-eslint, removing it shows that eslint still functions normally - strange. Is my test insufficient to show that typescript-eslint is unnecessary or is it actually needed?
0

tsc compiles the project and will detect build errors (as the one in your example). ESLint is used for detecting (bad) patterns. You want to run ESLint on your code, not on the code that is produced as output of the Typescript compiler, as you suggest. Therefore having typescript-eslint is a good idea, when you write Typescript code, since it provides the capability to 'understand' Typescript to ESLint as stated on their homepage:

The tooling that enables ESLint and Prettier to support TypeScript.

Improve this answer

2 Comments

To clarify, I am running eslint on the source file. tsconfig is set to --noEmit. So I'm not even using it to compile. After removing typescript-eslint, eslint has no problems linting, contradicting the docs claim that typescript-eslint is necessary for eslint to "understand TypeScript". I am very confused with this behavior. So what went wrong? Is my test incorrect? Is the docs wrong?
The docs are correct. Since Typescript is a superset auf JavaScript, ESLint "understands" parts of the code, but not Typescript-special code. Also typescript-eslint uses the type-information, which ESLint alone cannot understand. You should check their documentation: typescript-eslint.io/#why-does-this-project-exist?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.