JavaScript, TypeScript

Difference between ESLint and Prettier

What they do:

  • ESLint: underline when code doesn’t comply to logical rules. Can run a script and fix some easy errors (etc. unused variables lying around)
  • Prettier: doesn’t change the logic of code, only formats it (etc. removing extra spaces, turning double quotes to singles)

Their roles are different but similar, so they do sometimes step on each others’ toes (etc. quotes, trailing commas…).

When they do clash, use:

$ npm --save-dev eslint-config-prettier

Then add preset configuration in .eslintrc, so that ESLint doesn’t get pissed when an error can be easily auto-fixed by saving the file with Prettier plugin on:

    "extends": ["prettier"]

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.