Configuring ESLint, Prettier, and TypeScript Together: FAQs

These are common questions and my answers for my Configuring ESLint, Prettier, and TypeScript Together article.

Let me know if you have any other questions to add!

What is `eslint-config-prettier`?

eslint-config-prettier is a utility package containing an ESLint configuration that explicitly turns off all common ESLint rules that are unnecessary or might conflict with Prettier. It’s useful if you’re extending from a shared ESLint config that still enables formatting rules:

// eslintrc.js
module.exports = {
	extends: [
		"some-shared-config-that-enables-formatting-rules-ugh",
		"prettier", // or: "eslint-config-prettier"
	],
};

Note that the recommended configurations in ESLint core, typescript-eslint, and all the plugins I’ve been using recently intentionally don’t enable any rules that conflict with Prettier. That means you generally don’t need to enable eslint-config-prettier with them. I don’t use it in my create-typescript-app.

See You Probably Don’t Need eslint-config-prettier or eslint-plugin-prettier for more information.

What is `eslint-plugin-prettier`?

eslint-plugin-prettier is an ESLint plugin that creates a lint rule whose entire purpose is to run Prettier and report its complaints & fixes through that lint rule.

I strongly advise not using eslint-plugin-prettier for two reasons:

It slows formatting down to the speed of your linter. Which, if you’re using type-aware lint rules (as you generally should in TypeScript projects), should be much slower than running the formatter on its own.
Combining formatting complaints and lint complaints into one report is clunky and confusing. You’ll often see large swathes of editor squigglies that may or may not be real logical complaints. New users have enough trouble understanding the differences between formatters and linters!

See You Probably Don’t Need eslint-config-prettier or eslint-plugin-prettier for more information.

Why not use ESLint for formatting?

I strongly recommend against using ESLint for formatting. I strongly recommend using Prettier, dprint, or another dedicated formatter instead. The typescript-eslint What About Formatting? page explains this in more detail.

What about TSLint?

TSLint was a linter built for specifically TypeScript code. It was very similar to ESLint, but used a TypeScript AST internally instead of the standard JavaScript tree shape (ESTree).

The TSLint project was deprecated years ago. I helped kill it.

The typescript-eslint What About TSLint? page covers TSLint in more detail.

Tip: people sometimes refer to TypeScript’s complaints as “tslint” or “the tslinter”. That’s inaccurate and confusing.

tslint-config-prettier and tslint-plugin-prettier

The same applies to tslint-config-prettier and tslint-plugin-prettier. Very often, those are still recommended if you’re using TypeScript (and you’ll hear stuff along the lines of “use this for TypeScript”). This is not true - those two tools work together with TSLint, not plain, standalone TypeScript.

Since TSLint is deprecated and not recommended anymore, these two plugins shouldn’t be used anymore as well, since they’re specifically made for TSLint. You don’t need them for TypeScript.

Closing Thoughts

Thanks for reading! 💖

Got any more FAQs you’d like to see here? Please let me know over email, Mastodon, or Twitter!

Special appreciation to Alessio Gravili for adding clarity about TSLint plugins. 💙