Configuring ESLint, Prettier, and TypeScript Together: FAQs
May 01, 2023
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:
- 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!
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. đ