DEV Community

ESlint and Prettier for React apps (Bonus - Next.js and TypeScript)

Arpit on July 05, 2020

What if you could catch and fix your bugs before you even run your program. What if you could write code that has the same syntax and follows the s...

Read full post

Ben Holmes • Aug 17 '20

Went through a lot of eslint + prettier tutorials without much luck... and this cleared up so much for me. Nice touch on the a11y validation for hrefs inside Link components; that was driving me crazy!

Arpit • Aug 17 '20

Glad you found it helpful!!!

Bacon • Feb 27 '21

You don't need the red line any more. You only need the blue one according to the update.

Ref: eslint-config-prettier - CHANGELOG.md Version 8.0.0 (2021-02-21)

Sadi Mahmud • Oct 12 '20

Thanks for the article. I guess you forgot to add

  // .eslintrc.js
  extends: [
   ....,
   'plugin:react-hooks/recommended', <---
  ],

Rodrigo Maia • Nov 18 '20 • Edited

simple-import-sort rule definitions changed from 'simple-import-sort/sort' to 'simple-import-sort/imports'

nubpro • Jun 5 '21

Typo:
Simply go to your >>> .eslint.js <<< and add our custom rules for it.

Neeraj Lagwankar • Jan 19 '21

This is beyond amazing! Thanks for putting out such a well thought out article with clear reasoning.

Exequiel Demaio • Jan 12 '21

The best tutorial to configure eslint + prettier and eslint-plugin-simple-import-sort changed my life haha. Congratulations!

Mees Frenkel Frank • Jan 10 '21 • Edited

Great article. What about adding a tsconfig.json (by running tsc --init)...

Joe • Nov 20 '20

thanks!

Mariano Álvarez 🇨🇷 • Oct 26 '20

Love how simple and easy was to set up everything thanks to your post.!

Firman • Jun 12 '21

simple and cool, Thanks