DEV Community

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

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...
Collapse
 
bholmesdev profile image
Ben Holmes

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!

Collapse
 
heyitsarpit profile image
Arpit

Glad you found it helpful!!!

Collapse
 
jayakornk profile image
Bacon

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

.eslintrc.js

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

Collapse
 
sadi304 profile image
Sadi Mahmud

Thanks for the article. I guess you forgot to add

  // .eslintrc.js
  extends: [
   ....,
   'plugin:react-hooks/recommended', <---
  ],
Enter fullscreen mode Exit fullscreen mode
Collapse
 
rodrimaia profile image
Rodrigo Maia • Edited

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

Collapse
 
nubpro profile image
nubpro

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

Collapse
 
flashblaze profile image
Neeraj Lagwankar

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

Collapse
 
exedemaio profile image
Exequiel Demaio

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

Collapse
 
meesfrenkelfrank profile image
Mees Frenkel Frank • Edited

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

Collapse
 
oieeaaaa profile image
Joe

thanks!

Collapse
 
marianocodes profile image
Mariano Álvarez 🇨🇷

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

Collapse
 
mfirmanakbar profile image
Firman

simple and cool, Thanks