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 Submit Preview Dismiss Collapse Expand Ben Holmes Ben Holmes Ben Holmes Follow Factory Foreman and Whiteboard Guy at Warp Education BS in CS @Georgia Tech Work DevEx Engineering Lead at Warp Joined Mar 6, 2019 • Aug 17 '20 Dropdown menu Copy link Hide 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 Expand Arpit Arpit Arpit Follow Email arpitbharti73@gmail.com Location India Joined Sep 21, 2018 • Aug 17 '20 Dropdown menu Copy link Hide Glad you found it helpful!!! Collapse Expand Bacon Bacon Bacon Follow I'm a Software Engineer interested in Front-End, Back-End and Infrastructure. Location Bangkok Education Information Technology Work Software Engineer at Odd-e (Thailand) Co., Ltd. Joined Mar 14, 2020 • Feb 27 '21 Dropdown menu Copy link Hide 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) Collapse Expand Sadi Mahmud Sadi Mahmud Sadi Mahmud Follow Joined Mar 18, 2020 • Oct 12 '20 Dropdown menu Copy link Hide Thanks for the article. I guess you forgot to add // .eslintrc.js extends: [ ...., 'plugin:react-hooks/recommended', <--- ], Enter fullscreen mode Exit fullscreen mode Collapse Expand Rodrigo Maia Rodrigo Maia Rodrigo Maia Follow Joined Nov 18, 2020 • Nov 18 '20 • Edited on Nov 18 • Edited Dropdown menu Copy link Hide simple-import-sort rule definitions changed from 'simple-import-sort/sort' to 'simple-import-sort/imports' Collapse Expand Neeraj Lagwankar Neeraj Lagwankar Neeraj Lagwankar Follow Programmer and visual "artist" Location Pune, India Joined Dec 7, 2018 • Jan 19 '21 Dropdown menu Copy link Hide This is beyond amazing! Thanks for putting out such a well thought out article with clear reasoning. Collapse Expand nubpro nubpro nubpro Follow Joined Dec 2, 2020 • Jun 5 '21 Dropdown menu Copy link Hide Typo: Simply go to your >>> .eslint.js <<< and add our custom rules for it. Collapse Expand Firman Firman Firman Follow Dev Location Jakarta Work Software Engineer Joined Aug 21, 2019 • Jun 12 '21 Dropdown menu Copy link Hide simple and cool, Thanks Collapse Expand Mariano Álvarez 🇨🇷 Mariano Álvarez 🇨🇷 Mariano Álvarez 🇨🇷 Follow Te ayudo a ser un mejor Web Developer Location Costa Rica Work Google Developer Expert Joined Aug 30, 2019 • Oct 26 '20 Dropdown menu Copy link Hide Love how simple and easy was to set up everything thanks to your post.! Collapse Expand Joe Joe Joe Follow I paint websites Email joimee.cajandab@gmail.com Location Philippines Education Web Work Web Dev Joined Aug 12, 2018 • Nov 20 '20 Dropdown menu Copy link Hide thanks! Collapse Expand Mees Frenkel Frank Mees Frenkel Frank Mees Frenkel Frank Follow Joined Jan 10, 2021 • Jan 10 '21 • Edited on Jan 10 • Edited Dropdown menu Copy link Hide Great article. What about adding a tsconfig.json (by running tsc --init)... Collapse Expand Exequiel Demaio Exequiel Demaio Exequiel Demaio Follow Joined Sep 7, 2020 • Jan 12 '21 Dropdown menu Copy link Hide The best tutorial to configure eslint + prettier and eslint-plugin-simple-import-sort changed my life haha. Congratulations! Code of Conduct • Report abuse
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 insideLinkcomponents; that was driving me crazy!Glad you found it helpful!!!
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)
Thanks for the article. I guess you forgot to add
simple-import-sort rule definitions changed from
'simple-import-sort/sort'to'simple-import-sort/imports'This is beyond amazing! Thanks for putting out such a well thought out article with clear reasoning.
Typo:
Simply go to your >>> .eslint.js <<< and add our custom rules for it.
simple and cool, Thanks
Love how simple and easy was to set up everything thanks to your post.!
thanks!
Great article. What about adding a tsconfig.json (by running tsc --init)...
The best tutorial to configure eslint + prettier and eslint-plugin-simple-import-sort changed my life haha. Congratulations!