Setting up Lint Rules in Dart-Flutter
Day by day we learn new stuff. Day by day we aspire to improve our Code content and implementing them is usually a dream come true. There’s nothing as difficult as deciphering someone else’s code. It is usually very hard to understand especially when no particular format is followed unless the person wrote clear readable lines of Code. Well as the proverb goes, “Where there are rules, there’s law, “ It’s good to set some standard rules to follow when writing code so that people can easily understand or refer to especially in team projects. You might be wondering what lint/linter rules are, keep calm, I will take you through step-by-step procedures on how to set up Lint rules in Dart.
NB: Lint rules can be set in other languages like Javascript, PHP, CSS, Python, Elixir among others.
If you're new to Flutter, follow these installation guides to get started in Flutter.
What’s Linting?
Linting is the process of checking the source code for Programmatic as well as Stylistic errors and unformatted code. It’s helpful in identifying some common and uncommon mistakes that are made during coding like logical errors, unused variables, empty if-else statements among others.
Linter/Lint is a tool that analyzes source code to flag programming errors, bugs, stylistic errors, and suspicious constructs. It supports verifying code quality.
Examples of some Common and Uncommon errors.
To get a visual view of what I mean, you may have noticed some lines get underlined in your code as shown below; for unused variables or unused imports.
Illustration of unused imports.
In line 2 of the above code, the file ‘home.dart’ was imported and not used. In your code editor, it will show as an underlined squiggle to mean Unused import. It’s recommended to always use the imported files or remove them if they ain't necessary.
Illustration of Unused variables.
The snapshot below shows an example of an unused variable underlined in a green squiggle. Whenever you encounter such it’s advisable to either remove the unused variable or use it in the code.
How do we set up lint rules in Dart?
Note: It’s usually advisable to set up lint rules at the beginning of a project rather than after starting a project since the warnings to be fixed might pile up.
Usually, there are some sets of default linting configurations after setting up a project, however, you can customize your own sets of rules to your specification to have a well-formatted code.
Rules are categorized into these major groups:
- Error rules -These are common errors that occur when coding.
- Style rules -These are rules focusing on style as stated by Dart Style Guide.
- Pub- These are pub-related rules.
The above image shows lists of rules set by Google’s Dart and Flutter team about the preferred style guides. You can find more about this below:
Let’s Get Started.
Let’s create a sample Flutter App and check ways through which we can enable or customize Lint Rules.
Step 1
On the terminal, type in the $ flutter create Command followed by the name of the app. In this case, we’ll use the name flutter_lint_rules.
$ flutter create flutter_lint_rulesNote: You can as well create the app on your respective IDE depending on your preference.
Step 2
Unlike before, nowadays creating a new Flutter Project will automatically generate the analysis_options.yaml therefore you won’t have to re-create the analysis_options.yaml file again.
When you check your project folder structure, it’s identified as analysis_options.yamlas shown in the image below:
However, for your old existing projects, you will have to manually create the analysis_options.yamlfile. Create a new file at the root of your flutter project and name it analysis_options.yaml , it should be in the same directory as the pubspec.yaml file.
The analysis_options.yaml is where you will be adding your own preferred rules if you wish to set your own individual lint rules. However, if you wish to use the already set rules by Dart Team, you can leave the generatedanalysis_options.yaml as it is.
Step 3
There are two ways of enabling lint rules in Dart:
- Enabling default Lint Rules (Already set rules).
- Setting and customizing your own Lint rules.
1. Enabling default Lint Rules. (Already set rules).
This comes with a collection of already set lint rules. You can use the Dart linter (Which is a recommendation from the Dart Team), or the Flutter_lints package which extends the dart linter for Flutter, it contains recommended sets of lints for your Flutter Applications and packages.
i). Enabling lint rules with the Dart Linter :
For new Dart Projects created with dart create, the lint rules are enabled by default.
Dart Linter is a static analyzer that helps to identify problems in your Dart Source Code.
However for existing Apps,
a). You can install it by manually placing the package under the dev_dependencies in thepubspec.yaml file as:
Then Run the command dart pub get in your terminal to update the dependencies. You can as well update the packages through your IDE depending on your IDE settings.
Or
b). By just simply running this command on the terminal:
dart pub add --dev lintsThis command is going to add the Dart linter package in the pubspec.yaml file under the dev-dependencies , just the same way as from option a) above.
Note: It’s recommended that you update your code to work with new lint rules whenever a new version of the dart lint package is released.
ii). Enabling lint rules with the flutter_lints package.
For flutter projects, the flutter_lint package is recommended. The flutter_lints package is built on top of Dart’s recommended.yaml set of lints from the above Dart Linter package. It contains recommended sets of lints for Flutter applications and packages.
New flutter projects come with this flutter_lints package already set up and therefore you don't need to add it again. However, for old existing flutter projects, you can install it by placing the package under the dev_dependencies in thepubspec.yaml file as:
Then Run the command flutter pub get in your terminal to update the dependencies. You can as well update the packages through your IDE depending on your IDE settings.
Once this is done, your project will use the already existing lint rules as set by the Dart & Flutter Team.
2. Setting and customizing your own Lint rules.
These are rules that individual sets on their own according to their own specifications without using the dart_lint /flutter_lint packages that come with already set rules.
When setting and customizing your individual linter rules, you will add the rules in the analysis_options.yaml file as displayed in Step 2 above.
As mentioned initially, nowadays the analysis_options.yaml is automatically generated when you create a new Flutter project, however, for your old existing projects, you will have to add it manually by creating it. In that case, create a new file and name it analysis_options.yaml , it should be in the same directory as the pubspec.yaml file.
Below is the structure of a new analysis_options.yaml file before adding any changes to it:
In the above file, the first line:
include: package:flutter_lints/flutter.yaml activates sets of recommended lints for flutter apps, packages and plugins.
This should be followed by linter: andrules: where you can specify your own rules according to the rules you want to have put in place for your project, prefixed with dashes. For instance:
The above lint rules are found here. And to add them to your flutter project, you just identify a rule and copy its title and paste it into your analysis_options.yaml file. The full illustration of how to copy rules from the Effective Dart style guides to your project can be found in the video below from min 23.44 onwards.
The video tutorial will also help you understand the step-by-step procedures on how to set the lint rules in your Flutter Project from the beginning.
Before setting individual rules from the Dart style guides, always read and understand the rule and check how it works, for example:
After setting up the linter rules, now run the command $ flutter analyze to analyze and check your code.
Find the link to the Full Github code sample here
In this blog, you have learned about what linting is, how to set lint rules by adding the dart/flutter_linter package or by setting your own individual specific lint rules on analysis_options.yaml file.
You can read much about the Dart Style guides from Effective Dart Style and customizing static analysis from:
Happy fluttering, but remember to Dart before you Flutter, please find these resources helpful: How to get started on Flutter.
Should you have any questions, feel free to ping me on Twitter or on the comment sections below.
Thank you 😍
