Linting TypeScript

Text version of the video http://csharp-video-tutorials.blogspot.com/2017/10/linting-typescript.html Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help. https://www.youtube.com/channel/UC7sEwIXM_YfAMyonQCrGfWA/?sub_confirmation=1 Slides http://csharp-video-tutorials.blogspot.com/2017/10/linting-typescript-slides.html Angular CLI Tutorial https://www.youtube.com/watch?v=rJ9o4TyhSuo&list=PL6n9fhu94yhWUcq5Pc16uf8YKXoZ87Vh_ Angular CLI Text articles & Slides http://csharp-video-tutorials.blogspot.com/2017/10/angular-cli-tutorial-for-beginners.html All Dot Net and SQL Server Tutorials in English https://www.youtube.com/user/kudvenkat/playlists?view=1&sort=dd All Dot Net and SQL Server Tutorials in Arabic https://www.youtube.com/c/KudvenkatArabic/playlists In this video we will discuss Linting TypeScript Code Angular has a linting tool that checks our TypeScript code for programmatic and stylistic errors as well as non-adherence to coding standards and conventions. tslint.json is the configuration file for linting. This file contains all the default rules for linting our code. For the purpose of this demo I have created a brand new Angular project using the following command. ng new AngularProject Use the following command to lint the code ng lint Since we have just generataed a new angular project and all the code in the project is auto-generated, we do not have any linting errors and we get the message - All files pass linting. We also see the following warning Warning: The 'no-use-before-declare' rule requires type checking Basically this warning is saying, if 'no-use-before-declare' rule is enabled we need to use --type-check option with the ng lint command ng lint --type-check 'no-use-before-declare' rule is enabled out of the box and it disallows usage of variables before their declaration. To understand what this means, place the following sayHello() function in AppComponent class in app.component.ts file. sayHello() { console.log(message); var message = 'Hello'; message = message + ' Pragim'; } At this point, execute ng lint command again with --type-check option. ERROR: C:/AngularProject/src/app/app.component.ts[12, 17]: variable 'message' used before declaration ERROR: C:/AngularProject/src/app/app.component.ts[13, 5]: Forbidden 'var' keyword, use 'let' or 'const' instead Lint errors found in the listed files. Out of the box, "no-var-keyword" rule is also enabled by default. Turn this rule off by setting it's value to false in tslint.json "no-var-keyword": true Run ng lint command again with --type-check option Notice, now we only get 1 linting error variable 'message' used before declaration Now modify the code in sayHello() function as shown below. sayHello() { var message = 'Hello'; message = message + ' Pragim'; console.log(message); } Run ng lint command again with --type-check option. Notice now we do not get any linting errors. Variables declared with let keyword are not accessible before they are declared. So this rule 'no-use-before-declare' can be safely disabled, if you have 'no-var-keyword' rule enabled. When 'no-use-before-declare' rule is disabled and when we run ng lint command without --type-check option, we will no longer get the below warning The 'no-use-before-declare' rule requires type checking