Josh Goldberg
Josh smiling and gesturing on stage and giving a presentation showing the "Type Checking React (v2)" from the linked slides.

Configuring ESLint, Prettier, and TypeScript Together: FAQs

May 1, 20235 minute read

How I recommend getting your formatter, linter, and type checker to play together nicely.

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 template-typescript-node-package.

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:

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. đź’™