Linting With Angular
Every developer has its own style of coding. If you are working on a project where multiple developers are working, you may notice different variations of coding styles. Some like to use single quotes, some may use double quotes, some like to write long lines of codes and some may want to break code into new lines. Although all of them may be syntactically correct but at the end, your code will be having lots of different coding variations. Too many developers spoil the code.
What’s the problem?
The above-listed issues may not be a problem for you with a small team or a small project or if you don’t care enough, but when code grows, consistency really matters. Keeping coding style consistent throughout your application helps you in matters like code reviews, easy for other developers to understand, easy to extent and lot more. The solution to this problem is Linting.
What is Linting
Linting is the process of running a program that analyses your code for programmatic and stylistic errors. A Linting tool, or a linter, checks any potential errors in your code such as syntax errors, incorrectly spelled variable names, and many more. This can save time and help you write better code.
Linters will go through your code, and highlight
· formatting and styling discrepancy
· non-adherence to coding standards and conventions
· possible logical errors in your code
Running a linter on your code makes sure it follows best practices, is readable, and easy to maintain. Different programming languages have different tools for Linting. JavaScript also has a good variety of linting tools. Some of the popular JS linting tools are
· JSLint
· JSHint
· ESLint
Linting with Angular
Angular CLI has provided built-in support for Typescript code linting. The default tool used by angular CLI is TSlint. The basic CLI command used for linting an angular project is
· ng lint <project> [options]
This command takes the name of the project, as specified in the projects section of the angular.json configuration file. When a project name is not supplied, it will execute for all projects (libraries).
The default linting tool is TSLint, and the default configuration is specified in the project’s tslint.json file. You can change any rule in this file according to your requirements.
When you will run this command through CLI, TSLint will check all the issues which don’t follow the lint rules defined in the tslint.json configuration file and show a list of all the issues in CLI output with an error description, file name and line of error. Following that output, you can fix all your lint issues, that’s nice right?
Yes, that is nice but sometimes the errors list is very large and it is really time-consuming to follow all the instructions and fix the issues one by one. But there is a solution to this as well. Angular CLI has provided some options with this command which are really useful. For this particular case, you can use
· ng lint --fix=true
This command will fix all the fixable lint problems automatically using the rules written in the tslint.json configuration file. There are a lot more options available for this command. For more options check the following link.
Linting with VS Code
VS Code has provided some really good extensions for linting as well. One of the best VS code lint extensions is TSLint, Prettier and husky. To install TSLint in VS code, open the extensions tab and type tslint. For the results list, click the install button and the extension will be installed on one click.
This extension will highlight the lint error as you type, which makes it very useful as you can fix or avoid your lint errors while you are coding. When there are some lint errors, this extension will underline the error indication of the issue. It also provided a suggestion to fix the issues or fix all fixable issues, which fixes all fixable issues automatically.
Custom Lint Rules
Angular linting configuration comes with a very good set of linting rules. Still, there may be cases where you want to create some new rule according to your requirements. TSLint provides facility to extend its existing rules.
If you have a look at the rules list, you see how many rules exist, and they should cover already most use cases. But still, enforcing coding guidelines is hard if you don’t use the tooling available, and manual checks just don’t catch every case.
Follow these steps for setting up a custom TSLint rule:
1. Add a directory for your rules to your project, e.g. tslint-rules
2. Add a new file for the rule (e.g. mycustomrule.ts)
3. Compile rule: tsc mycustomrule.ts
4. Configure directory
5. Add rule to tslint.json: "my-custom-rule": true
TSLint provides a rich syntax for creating custom rules, but that’s out of scope for this article. For details and guidelines, following the instructions provided by TSLint documentation.
That all you need to get started with Angular linting. Please post your reviews and questions.
