Flutter Code Linting - Improve your code and enforce Style and errors

hello my friends and welcome back to another episode of flutter explained in the year 2021 and of course today and this year we want to start right away with new episodes of flutter explained where i explain you a little bit more about flutter and all the different topics that we get today we want to write jump into code analyzes and analyzes options.yaml how you can use it and how to take advantage for your projects alright and if you are interested in live development in flutter and dart or also currently i'm learning ai head over to twitch and come and join my new channel max flutter it would be an honor to have you there last but not least for this topic in this video you will also find a blog post on my website you find the link down in the video description below thank you so much also for the fantastic feedback for the last video of the best practices and now let's get started [Music] all right so let's head over to code linting what actually is code linking or static analyzers well if you are working in your ide like visual studio code and intellij you already have seen it quite a lot usually you get like these red lines underneath of damaged or arrow text or you get yellow lines to inform you that there is a problem a warning and so on and so forth and this happens before you even try to build your application as you know maybe you know that our dart code getting compiled into a program language that our computer can understand so and this understandable code does not always work if you remember in the old days we had these cards and if there was an error you had to rewrite everything today we have so much luxury and that's one part of dart it is very good for us developers and it also provides us with a lot of toolings that help us to identify problems now this static analyzer finds and search for build errors actually in our code so if you do something that the compiler cannot understand he cannot transform your code your source code into that machine understandable code then you get these red lines you maybe forgot a semicolon or something so dart cannot really create this application normally this happens inside and behind your the scene so that you don't really have to care about it but in some or most projects that i worked already in linting is a good topic because it changes the behavior on how you write code and it allows clean code base so let's assume you will work on a github project and you want that everyone in that project contributes in a specific way so for example double quotes and single quotes it sounds weird but single quotes are more in the american countries and english-speaking countries because in the keyboard it is way easier to access while in germany for example here we are trying to use more double quotes because it's easier for our keyboard and our convenience so there are standards that you can set up in your team and in your projects and code linting is helping you to enforce these things so now double quote and single quote is maybe not a good example because it is something that is more like stylistic and it's more like viewable and there we are also already in the discussion about the whole thing but before we jump into the discussion and why code linting could be good could be bad and which code linting rules make more sense than others i would like to show you a quick example on the computer how it is done alright so welcome let's implement this code so as you see here we have a small project and i work this time with visual studio code of course this works with e every other ide in the same way so you can see we have a single quote string and a double quote string and what we want to do is we just want to say our linting so our error message visibility for our ide that it should show something there so as i explained it seconds ago all right so if we run this app you can see the following this is valid and this should be invalid um and actually this should be the opposite way around but we can see that in a second so let's create inside of our main folder so inside of our root folder a file called analyzers.options.yaml and the yaml file is that way that you have to have two spaces in front to indent the lines to create your tree we have now two things that we can set up the first one is the analyzer which gives more general information about the analyzers and then we have the linter where we specify the different rules that we want to apply so let's start with the analyzer the analyzer we can write like this then don't forget to make sure we have two spaces in front of it that is very important else it will not recognize the different levels then we have here errors and down there we have prefer in our case single quotes and we can say error all right so with that we have specified that whenever we show somewhere the preferred single quotes or if we use that that this will be used in a very severity of error this could be also warning and that could be also info and if you see if you make a mistake here it's also getting yellow so there is code analyzer for the analyzers options jamel very good to know and as you see you get also the information what is everything included in that we want to have it as an error and let's see how we can implement our first rule so let's go and say linta we have the rules and then we say prefer single quotes true and as you see right away on the left side we received an error in the main.dart if we take a look into it we see we get our error alright so this is for a dart project so every dart project works the same so let's switch to a flutter project so i started now a new folder where we have the flutter project inside and here inside i just execute flutter create dot which recreates all the files that we need for a flutter project and here you can see that there is no analyzes options yet existent but here it works exactly the same way so we create a file analyzes option this option and if we now do the same thing like before like analyzer errors prefer single quote and say this is an error and we give the linter the rule with prefer single quotes true now we have initialized that for the whole flutter project so if i head over to the main.dart here and of course we don't have as double quote um here but if we take a look into the widget title which comes from the beginning of the my app here we can see that we have currently a title with single quotes and if i change that over to a double quote we will see that there is now an error so before i release you now to go back to the rest of the video here you see a website dartlang github io with the lint and linz where you will find all the different linting rules and explanations to it once more so you have error rules style rules and pub rules and as you can see they are around about 200 of them so i highly give you the recommendation to check out these links and down in the video description below but now enjoy the rest of the video all right so now we know how code linting actually works so we are able to introduce own linting rules to it and as you saw already on the dev page or dart lane page for the linting rules you see that there are nearly 200 of these rules that you can apply okay but what is the discussion between linting and not linting usually you say that all errors are bad right and we don't want to focus as developers on small stuff like for example single quote and double quote we don't want to take care of that usually we want that our compiler takes care of it or it directly is fixed in the code base so what we could do is something like pre-hooks that changes that but the discussion is a little bit different so usually we have a ci city in larger projects if you don't know what a cicd is up in the info box you will find a video link to the old video where i talked about ci cd and inside of that video i describe what it is so this is costing money right build minutes costs money so some of the developers like analysis rules and they also say they have to enforce that means if the linting rules are failing then the build should not run through and this is of course correct if you want to have an error and you want to enforce something you shouldn't be able to build but you have some problems with that first of all it costs money and not every developer is that clean in development and really recognize these errors directly in the code and just pushes it to master which maybe could lead to a build runner which then costs again money and there comes a lot of discussion with it and of course dart already provides a very good set of rules but there are some that are really considerable and help you and the benefit of these analyzes is always that you don't really have to care about styling because it is enforced by this helper of the static analysis okay so that is the advantage that you can see and also the disadvantage a little bit so the discussion that happens there so there is a broad topic and of course i like to discuss it down in the video description below with you but now head over to some rules that are making sense and actually there are three that i want to specifically announce all right i created a twitter feed and asked you all what are your favorite linting rules and i received free answers that i want to mention here and show you what it has been with it so the first answer comes from matt rizzo or better known as rizo coder you find the link down in the video description below he creates also fantastic flutter videos and description and tutorials here on youtube so check him out and subscribe to his channel but he mentioned missing required parameters for widgets this is a linting rule which allows you to change the severity of this missing required attributes and he also points out that during the null point roll out of the null safety feature it will be more and more obsolete but at the moment to avoid the red screen of death you can also include this linting rule with an error severity and with that you have the benefit that whenever you do this mistake and don't pass into a required parameter then the app will not crash it will only uh give you the error directly in the ide with that you are way faster and you can avoid a lot of red screens of death inside of the app another linting rule is prefer const prefer const means that we should use in our applications to improve the performance of the widgets and how they get rendered and so on and so forth we should use constants wherever we can so for constructors and for text stylings and so on and so forth we always should consider to use constants why is this the case because constants are getting created during the build time and not during the run time and with that you have to benefit to get a lot of performance improvements there and you should always prefer cons so this is one linting rule that i actually really like the last linting rule that i want to show you is exhaustive cases let's assume you have an enumeration with three values bread water and wine and now you want to make a switch case between these three things so now you create a switch but what happens if you forget one of these animations to put it as a case in the switch what happens then is with this linting rule you get an error message if you forget one of them because actually if you create an enumeration and switch through them you usually want to really consider every possible value in this enumeration and with that extension or with that linting rule you have to benefit to keep better track of it all right so now we talked about how we can use different linting rules in our application we talked about the advantages we talked about the discussion that happens there and now before we come to the end we want to talk a little bit about packages because let's think about you want to use packages wherever possible and there are some pre-defined linting packages already for you that you can use directly in your project which are recommended from top developers inside of flutter and there are mainly two packages that i want to talk today about the first one is lint package from pascal well she created a fantastic linting package there that you can use directly in your app which gives you a predefined set of rules that are specifically for projects of flutter and there is a huge difference to pedantic which is the second package that i want to introduce which comes from the flutter team pedentic is more focused on the flutter repository itself but how you can install these packages are now explained very quickly so now let's hold over to my pc and i show you how to implement them so as i already introduced in the video this is the linting package from pascal welch and what you can do is you can just use that and i want to implement that in our flutter project that we created beforehand so the first thing that we have to do is adding to our dev dependencies this lint package as we would do it with every other package so let's head over to our project go to the pubspec.yaml and find the def dependencies which we find down here and here we just add this new dependency of lint as always if we do something like that we have to make pubget this is done automatically for me but now comes something special we have to go over to the analyzersoptions.yaml and what you can see here we have to include this package lint analyzer if you write a package it is slightly different so if you use a plugin or want to write a package for flutter you would have to use this part here but if we add that now we immediately see that new problems have been implemented because we want to prepare const constructors in immutables so this is very good to know and with that you can now implement different packages with already predefined linting rules for you i hope this helps you and now let's enjoy the rest of the video all right so we talked about in linting we implemented packages we talked about different discussions that happens currently the benefits and disadvantages of analyzes options and now you are able to use that in your project so it gives you a huge general idea on how code analysis actually work so and if you still remember the best practices video up there in the info box you can join that once more to see all the different best practices that i can give you and if you're waiting for next week there we want to talk about integration testing in flutter and dart alright so thank you very much for joining today enjoy the rest of your week and don't forget to like this video [Music] bye

Channel: Flutter Explained

Views: 4,041

Keywords: dartanalyzer, dart pedantic, dart analyzer strong mode, dart analysis options, dart linter, ignore rules, effective dart, linter pub, dart ignore for file, package:lint, document all public members, dartfix, effective_dart analysis_options, flutter always_specify_types, prefer_const_literals_to_create_immutables, flutter analyze auto fix, analysis_options.yaml location, flutter analyzer error, flutter analyze command, flutter import as prefix, analysis_options

Id: TBgWVqafJW4

Length: 15min 35sec (935 seconds)

Published: Thu Jan 14 2021