I Ditched Prettier and ESLint (Here's Why)

two of the most important Tools in JavaScript prettier and ear slint finally have some really awesome competition and it was even partly funded by prer themselves kicking things into action when they announced a $20,000 Bounty now everyone knows these tools Pria has helped projects maintain a consistent code standard across developers ensuring we all follow the same format and don't have different code Styles within a project and I know for me even it helps me write code a lot quicker as I don't have to think about the format while I'm doing so I know prer is going to pick it up with when I save that file islin as well has made sure that we will follow those best practices and catch bugs before we push them live particularly when you use something like reactor spel or you bring in some extra projects there's usually an es Li plugin that's going to help you follow those best practices now while these projects have been stable for many years there has been complaints on the performance and complexity of them I've seen people complain with prettier for example that when you have a file of more than sort of 500 lines of code the format does start to slow down and this time does quickly add up as you're working on a big project so let's take a look at biome the new alternative and how it all came to be it's pros and cons and why I'm going to switch over some of my projects to use it and why I won't switch over the other ones and my reasons for this are largely not based in performance but that is one of the main benefits of this project this is a really good place to mention if you want more web dev content like this consider subscribing so as I mentioned in the intro biome started to gain its popularity when the co-creator of prettier here put out a tweet saying that he's offering a $10,000 Bounty for any project written in Rust that passes 95% of the prettier JavaScript tests now GMO CEO of Vel actually put out a tweet saying he's going to personally match this 10,000 so this bounty went up to $22,000 now obviously prettia being around for a while has a load of tests written in JavaScript to ensure that its form matter behaves the same way and that it's following all of the rules that they've put in place so it's really awesome to see that a rust base project could come in and test against all of those tests and you would know that you'd pretty much have complete feature compatibility with prettier there now if you're wondering why prettier would fund essentially their own competition here they have mentioned that they wanted some competition in the space if they've been dominant for so long so they haven't really had the need to focus on performance and this is changing a bit now as they consider their formatting options pretty much near to feature complete and in a very happy state so they're not going to add too much there so they can now move on to focusing on this performance now biome itself had actually been a fork of a project called Rome and Rome was a company that was created from various Babble maintainers to try and improve the webd tooling a few of them weren't done when the company itself actually went through and they fought the project to keep working on it and they ultimately ended up claiming this bounty as I said and they claimed that they have 97% compatibility with prer here and that Tess and you can see the performance gains here claiming a 35x performance increase over pra in this Ben Benchmark and if we actually go to that GitHub and look at that official benchmarks here we can see it has 25 times faster than prettier but then also 15 times faster than eslint performance as well and as I said this tool does both of those so it takes on the role of eslin and prettier so now let's look at my personal site and how easy it is for me to migrate over to biome and the reasons that I'm going to do that and how they aren't actually speed related so here we are in my personal project now what I'm going to do first is obviously install the package so we're going to install biome JS biome using pmpm Here and Now what we can do is we can also do pmpm biome in it to make sure we've got that configuration file if I go ahead and clear this now what you'll see is if I minimize everything here we now have a biome Json now this is going to have the configuration that we need and obviously this is the get started one so it's just going to have the linter enabled and organized Imports and it's just going to say rules recommended so it's just going to use all of their recommended rules and their presets that they have there for organiz inputs here I'll tackle this a bit later as it's really cool option there and the next thing I want to do is I already have eslin and prettier set up so I want to migrate over quite nicely now for ear lint all we have to do is use the command pmpm bio migr ear lint and we're using this include inspired here as they don't actually have all of the rules that ear lint necessarily has but it's going to go through my ear lint configs find some of the rules where they have sort of ported over or been inspired by those rules and then it's going to include them in my config as well so we go ahead and write that you'll see that my Biome Json is going to change here now there may be a few errors when you try this as it's sort of a helper tool it's doing its best guess and its best approximation it's not a perfect sort of tool in migrating over but you'll see it's changed recommended to force and it's tried to apply the rules based on my eslin config here funnny enough though I am actually going to delete some of these to make sure that I am just using the biome default as I think my ear link config did get a bit over complex and some of these rules aren't actually needed now so I'm going to go ahead and delete all of them and then make sure I turn recommended back to true but for prettier the next migration we're going to do I'm going to keep the rules that it migrates over for me so I think I'm missing a come on there well let's go ahead and save it so for Pria we pretty much run the same command here we don't need the include inspired bit as I said they pretty much have full feature completion with prettier there and all we need to do here is change es lint here to prettier like so now that we changed that you'll see that it really quickly adds in my rules so it's added in the ignores that is found in the prettier ignore and it's added in some of my prettier config that I have in my pretti up file now there are a couple things I want to point out here so the first one is that organized Imports option now that's really cool because what you'll see is in import sorting buy them allows sorting import State statements using natural ordering now at the moment they don't let you configure this yourself for how you like your Imports to be ordered but I really like this because it's built into biome because before what I've been using is a pretty a plugin to order my imports using this format that I've defined here so I am making a tradeoff here however where I'm going to lose essentially my custom format that I have here but I'm sort of okay with that trade-off because I just like it to be consistent across my projects and I like it to be sorted as I said in that nice consistent way so I'm used to it when I go from file to file I'm not necessarily too attached to this exact format but they do also have plans I believe to add in this formatting option later the other really cool one is that I actually Ed use the Tailwind plugin which is for prettier so it sorts your class names in a nice order now biome actually has this built in as well so if we go back to the documentation what you can see is they have a rule use sorted classes here and it says this rule implements the same sorting algorithm as TA in CSS but supports any utility class framework including Uno CSS as well so even has support for other ones there as it does say though it's part of the nursery group so it's sort of an early rule it's being worked on and they're still working on migrating some of the features over but it's really cool to see that they have that and again I'm happy with that tradeoff of losing some of the advanced features as I know this project itself isn't too complex so how do we get started now if we clear this what we can now do is we can do pmpm biome check and then we can put it in our current directory and you'll see it's going to give me a load of errors as I know I previously haven't had es Lin set up very well in this but what we can do is you can see in our diff at the moment we've got these different changes so we've added the biome and we've changed our package.json now pretty much one of the main main reasons I'm switching over to this for a lot of my projects is a lot of my projects are quite simple so what we are now able to do is if I go to my Dev dependencies as you can see we're now using biome for the linter and the formatter I can delete this plug-in sorts import as I said earlier biome has support for that I can go ahead and just delete typescript eslint plugin typescript es lint passer as I don't need them anymore as again the linting is all being done by biome I can delete all of these which are all of the configs and plugins that I have for eslint there and I can even go head and delete lint staged and the lint stag config I have what this was doing was making sure that when I staged files that it would run the linter on them and run prettier on them they actually have an option in biome where you just do das Dash staged on the end and it will do essentially the exact same thing so I can go ahead and delete lint staged as well and then we can delete the prettier and the prettier plugin that I have for it so if you've seen how many dependencies that I just got rid of there and it makes it a super nice clean setup I don't have to manage all of the updates to all of these I literally just install one package and that's why I really like this and why I'm switching over a lot of my projects I think I have a fairly unique use case on some of M which is that I teach a lot of content and I don't necessarily want all of these Earl plugins and all of these prettier plugins to be in my Dev dependencies where beginners may get confused and if they have an error with one of them it might be confusing whereas if there's an error with biome they can just go to the biome repo and find out how to fix that error and if there's an update to BU they just have to update this one package there's not a load of Dev def dependencies that they have to update and try and maintain as they go along in that beginner example and as I said even from a personal side point of view that's why I'm upgrading to this as well other thing to mention as well is of course it does have a vs code extension so you can make sure that it's set to using biome for all of your formatting and then it's going to show you the lint errors as well so if I now go back and go into pmpn biome check I can do D- WR and if you write this you're going to see it's going to format some of my files now it's going to change some of them a bit a lot of it tends to be with the style and you can see it's even catching a really cool one there where I have import metadata from next I was actually only using the type so it's changed it there to import type for me which is a really nice and cool default there and you can see that is pretty much all we have to do and commit and I can go ahead and fix some of the es lint errors as well and I find it's got really nice sort of examples or explainers for what that error is and where to fix it as well so if I now go into this project data bit you'll see that it's erroring out here because I'm using a template literally except I'm not actually doing anything with that template literal there so it's going to me a linting error there so as I said it's a really cool way to mash together prettier and eslin into one project there I really like the way it cleans up my dependencies there and if you have a really big project you might like the way that it handles performance as well and again you will have to consider some of those trade-offs so I'm going to look into the next section which is some of the cons of switching over to biome particularly when it's quite a new project so we saw some of the advantages there one of them being performance and the other cleaning up the complexity of sort of dependencies that we have but it is worth noting that this is nowhere near as mature as ear lint and prettier as obviously they've been around for years and it does lack several features that many of you may rely on the big one being with the replacement of eslin I find with prettier it's pretty much feature complete and does everything I need for prettier but with eslint the big loss is that eslint plugin system at the moment as you can see here on this page I've got a list of their rules sources and it does list a load of the plugins that they've tried to migrate the rules over or being inspire by them so you can click and react and you can see they've got a few of the rules that they're bringing over but one of the ones that I've lost out on and why I'm not migrating some of my project is I actually used the Tailwind es lint instead of that prettier plugin necessarily and what that did was um it preferred had some extra features like enforcing shorthand so if you had something like W-4 h-4 it would enforce that you should just use size-4 as that's the shorthand for that rule in Tailwind so you can see they've tried to migrate some of those over but they do lack a plug-in ecosystem the moment and I'm not sure if they actually plan support for plugins or because they're an opinionated format so they want to bring over their own rules and just make sure they're bringing the rules that they want to bring over into this project but you can see they have tried with some of the large big projects there and finally the last big one is that ros-based lters are going to struggle when it comes to type checking this is a feature that earlin and typescript ear lint have covered and this is because those projects can obviously spin up PSC and go through the typescript code itself in a way that a performant Ross project just can't at the moment as if the Ross project tried to spin up TSC or something like that it would obviously impact that performance massively you can see that they have ported over several of the typescript ear Lim rules and they continue to add more but it is going to be a difficult challenge for them to solve now to be clear this is only for adding limp rules to your project obviously the typescript server itself that you may have separate to that is still going to pick up typescript errors of course so it's not changing that behavior but where you have typescript earlin using things like use name convention use consistent array type they have ported those over but there might be rules that you're using that they haven't ported over and that they may struggle to as well due to the nature of them being a rust based linter so there we go lots of potential for biome here to catch up with the dominant prettier and Es lint as those tools have some serious competition in the performance area to really push them to improve as well now if you want to learn more about that eslint tawi plugin that I bought up earlier why not check out this video here where I cover that or if you want to see the video that YouTube think you should be watching click this one and as always thank you very much for watching and if you stayed until the end here you may as well subscribe

Channel: Jolly Coding

Views: 7,937

Keywords: eslint, lint, javascript, typescript, biome, biome.js, linter, formatter, prettier, biome js, biome lint, biome format, biome check, tailwind, eslint-plugin

Id: f_4k0XYvQjQ

Length: 13min 6sec (786 seconds)

Published: Fri Jun 28 2024