You're (Probably) Using Prettier Wrong

I love prettier and I'm concerned with how many people are using pretty or wrong to be clear it's not actually prettier they're using wrong it's eslint because linting and formatting are very very different things I've seen a lot of misconceptions around eslint and how it should be used in your code base just because eslint can change your code doesn't mean it should and the big thing I've seen too much of is people using eslint as the formatter for their code base eslint is not a formatter eslint is a linter if you talk to anyone on the eslint core team you tell them that you're formatting your code with eslint they're going to give you a weird look because it is a bad bad idea formatting and linting are fundamentally different problems a lot of this rant is directly inspired and stolen from Josh Goldberg's talk he did at react Miami and I want to highlight this particular slide from it the role of a formatter is to format your code which means it does one really quick pass across your code anything that isn't formatted correctly it fixes but doesn't keep track of anything it doesn't check the relationships between things it just runs through your code and fixes things that are broken in your formatting and then it's done and that's it whereas a linter is trying to confirm specific discrete rule tools are being followed in your code base which means the relationship between a file and specific lines in it as well as between different files between different rules all of the complexity involved in that is necessary for the linter to work and that complexity can and almost certainly should exist outside of your formatter and the way that eslint recommends you run prettier is using eslint config prettier which is a plug-in that turns off all of the ESL and stuff that conflicts it prettier so you can use prettier for formatting first into then do a lint pass after it just runs so much better and makes your editing experience better too and it lets you use prettier for what it is a very very fast formatter and you don't even have to use prettier D print is a great alternative that is insanely fast it's written in Rust and lets you format your files effectively instantaneously it's also a bit more configurable so if your reason for using eslint instead of prettier for formatting is configuration you should use a formatter that has better configuration my reason for using prettier is I don't want to think about the config anymore I just want my code to always look roughly the same and prettier does an absolutely phenomenal job at that I don't usually have a prettier config unless I having a bug with one of the like built-in packages like the plug-in for Tailwind in prettier I'm using pnpm I have to manually put that in but other than that I almost never have a prettier config because the defaults are fine deals are actually pretty good I hope I'm properly emphasizing my point here is that like the role of eslist in the role of prettier are just so fundamentally different prettier is a thing I don't want to think about I don't want to change rules and I don't want to look at I just wanted to run and make my code consistent a linter is a thing I'm going to sit there and configure and make me a better Dev with and make my team more consistent with yes lint makes so I don't use promises wrong it helps me be better with my typescript behaviors and make sure I'm not leaking enemies all over my code base and it's a complex process to do that and it's even more complex if during that like set of passes it also has to worry about formatting because it might do a pass realize the formatting is off adjust the formatting and now the lint rules are applied differently notice to do yet another pass I saw a pretty bad take from Anthony Foo which sucks because he's normally really good about these things his words were he couldn't see how doing two passes would ever be faster than one the way they're doing two passes faster than one is if it's not two versus one it's like twenty versus one because that's what your linter does it does some very complex analysis of your code to make sure things are where they're supposed to be in your formatter just make sure the output's the right shape these are such fundamentally different problems I need to make sure I link this talk in the description because man there are so many little gems in here around configuring yeslet correctly around getting better error reporting in Dev and in like your builds there's just so many little things that Josh helps here with eslint and I find most people are scared to better understand it I personally was one of those people I avoided digging into eslint for a while but after listening to Josh a bit more I realized it's not that scary it's actually pretty important and if you get familiar enough with it things are much easier and consistent and some of these rules are dope there's a typescript set of rules too the recommended typescript rules are incredible and will make your code better and more resilient that is a different problem from formatting and we need to stop pretending that they're the same doing formatting in eslint is using yes wrong it's making it slower it's making the lives of the maintainers of eslint harder because now they have to deal with all these weird patterns people are using es14 the docs are being updated to be very specific about this and if you go to prettier stocks too they're pretty clear as well cool there it is integrating with linters linters usually contain not only code quality rules but also stylistic rules most stylistic rules are unnecessary when using prettier but worse they might conflict use prettier for code formatting and linters for code quality as outlined in prettier versus linters this is a pretty well established thing and it is frustrating to me that people will not listen to both the eslint team and the prettier team because they think they know better than both when they actually don't understand either and that's why I felt like I had to make a video about this because I'm so goddamn tired of people acting like they know better than these hard-working open source maintainers they don't these people work really hard to make great software and they've finally made it easier for us to make the software cooperate together and when I'm taking advantage of it or complaining about it I don't get it it's just the formatters are really good and fast if you let them do one pass and do their thing just use the formatters for formatting and use the linters for linting don't use lender for formatting and certainly don't use the formatter for lenting goddamn and thankfully in here they say you can use these two plugins that will turn off prettier conflicting rules in eslint and they even have here eslin plug-in for the year which they specify you shouldn't use because what this does is it runs prettier's rules in eslint because the lender has to worry about so many conflicting rules and so much context that exists outside of the specific line of code being formatted it also doesn't necessarily do formatting great and I don't remember the specific examples but I know Josh gave examples of weird tab behaviors that the linter couldn't handle well that prettier handles really well and those types of things are more complex when your processed to read the code is more complex so if you want to do this stuff right the way to do it right is you use prettier ESL and config prettier and then whatever ESL config you want to on top of that but you should not be using ESL plugin pretty year as you're prettier run it just doesn't make sense I hope this one was helpful the thing I run into a lot and I've seen way too much generally if you set up crazy app or even create next app you're gonna get good enough linting then you can just npm install prettier and you're done it should be that simple can be that simple it is that simple please for the love of God just let it be simple if you want to hear more about things people use wrong I'm gonna pin a video in the corner right here where I talk all about how people have used JavaScript wrong because it annoys me so check that out if you haven't already good seeing y'all as always

Channel: Theo - t3․gg

Views: 92,765

Keywords: web development, full stack, typescript, javascript, react, programming, programmer, theo, t3 stack, t3, t3.gg, t3dotgg

Id: Cd-gBxzcsdA

Length: 6min 4sec (364 seconds)

Published: Tue Jun 06 2023