Tslint.json and fixing code Quality || Angular 8 [MOST TRICKY INTERVIEW CONCEPT]

Tslint.json and fixing code Quality || Angular 8 [MOST TRICKY INTERVIEW CONCEPT]

Tslint.json and fixing code Quality || Angular 8 [MOST TRICKY INTERVIEW CONCEPT]

In this video we will cover what is Tslint.json.
Apart from that we will also cover how to check and fix code quality.We also explained briefly about tslint.json file, what its significance and what its role in Angular.
We will also cover some commands by which we can check code and quality and rectify it quickly.
Apart from all of this we will also gave quick insite of tslint extension on VScode.


TSLint is an extensible static analysis tool that checks TypeScript code for readability, maintainability, and functionality errors.



Develop quality code is highly desired hence it’s highly recommended that, before code check-in to Source Control, do TSLint check and fix the possible errors.

Angular Applications are already integrated with TSLint, tslint.json file can be found at the root of your project.

TSLint is also defined as dev dependency in package.json.

#tslint #angular #codequalityangular


Content

9.139 -> okay so far so good guys we have covered almost all the configuration files till
14.91 -> now and only one configuration file is remaining that is TS lint.json file
20.51 -> so before going to this particular file let me tell you what tslint is so TS
27.18 -> lint is basically a code analysis tool used in the software development for
31.59 -> checking the typescript code quality so basically this TS lint and discourteous
37.86 -> lint file checks the typescript source code you have written whether it
43.17 -> satisfied all the coding standards and rules that you have defined taste and
48.57 -> also checks your typescript code for readability maintainability and errors
52.89 -> you have done in your source code while writing the code itself so like we would
59.43 -> be needing some configurations for this particular tool to work right so all the
64.049 -> configurations for such particular tool is given in TS lint or json file the one
70.47 -> I'm showing you here right so if you can see this particular file you can see
75.36 -> that there are some rules these rules actually tells you what all the rules
81.27 -> are required which you need to follow by Hill right in your source code so like
89.1 -> you know this particular project we have actually taken from the angular
94.579 -> predefined command that is ng create and mg new so this will actually abide all
100.47 -> the rules by default so like if you run this particular thing on the PS lint you
106.829 -> will you will find no issues as of now so but still I'll tell you how to run
111.45 -> this particular command so you don't have to do anything just go to your
115.829 -> terminal open the new terminal and there is a command that is ng lint
122.969 -> this command will actually do the linking thing for you that is it will
128.77 -> chillie find all the errors you have done while typing your source code so if
134.2 -> I do ng link it will look it should you know all better ways it should say that
140.74 -> you don't have any wrong things in your particular project that is my first
146.05 -> project so let's wait and let's see so as you can see it says all files all
152.17 -> files pass the linting thing so this is like what we were expecting right
156.79 -> because this is a complete new project we have taken from the template that is
160.93 -> ng new and we were expecting this that there won't be any linting or warnings
166.69 -> we will be getting so now let's let me tell you how it actually works so you
171.01 -> won't get it until L make you understand how it actually works so let's go to the
175.48 -> source code here an app that component or TS file you see that this particular
180.82 -> code is perfectly fine there is no issues so l actually make this code a
186.91 -> bit ugly now this is basically a code which you don't need to understand as of
195.67 -> now because ng on it is a lifecycle method which I'll explain you in a
200.86 -> particular in a particular video later on this is a very initial stage where I
205.209 -> cannot make you understand what this particular thing is I'm just trying to
209.23 -> make you understand what linking does for us so now you can see that while I
218.38 -> was writing the code then linking gives me these issues misplaced opening braces
225.39 -> it should be in single code rather than double codes you should not use white
231.79 -> spaces or trailing white spaces so these are limiting issues so now if I save
238 -> this particular file I should see that when I run that particular command
243.76 -> I should see some linking issues so I'll open the terminal again and I will run
248.2 -> this command angel and for you again and expecting to have these issues
258.38 -> so it's linking my first project up and see there are issues it says there is a
264.96 -> missing white space here it says misplaced opening bracket you can see it
272.31 -> here it says it should be in single code rather than double currency there should
277.2 -> not be any trailing white spaces so you can actually manually remove this and do
283.44 -> what to all these particular warning says and you can understand and solve
287.79 -> these errors but I'll tell you one interesting thing which is still here in
292.08 -> it that is you can actually remove these errors without doing anything with just
298.26 -> one single command so that's the magic of angular angular actually gives you a
303.69 -> command which one such command you can remove all these errors that is the
308.31 -> common error is not the errors that is complex in nature but the simple single
312.21 -> letters even angular understand setter and it can fix for you so I will tell
317.31 -> you that command that is in Jilin and you're okay sorry in the toe mail you
325.71 -> have to write it after ng link your project name that is my - first -
336.62 -> project and - - fix is the nonhuman this which is required for this comment so
345.54 -> this command will actually remove all the lint issues and it will fix all the
350.37 -> lint issues in the project my first project so when I enter this thing I
355.98 -> will see you just see this particular thing you will see all these issues
360.51 -> getting fixed in a minute it takes some time to limp you can see some changes in
367.89 -> the screen it is actually lint in our code and now you can see that this
374.52 -> particular braces are actually here it was it is moved to here all the double
380.43 -> quotes are actually changed to single quotes the trailing spaces are removed
383.88 -> so now all the files are passing the linking
387.12 -> so this is the magic of the Lindt command that is minded with the - - big
392.49 -> side comment so now we will be like having the doubt lit from where can I
398.4 -> use this lint software or the tool so I will tell you where you can find the
404.52 -> lint tool which I have already installed so here you can see the extension stamp
409.05 -> in Visual Studio code oh here in the extension stamp you can just type PS
414.389 -> link and click search so you will be able to see that this is the tool given
421.29 -> by the eslint i have actually installed it already so
424.74 -> it's it's giving me an option to uninstall it disabled but you will get
427.8 -> an option here is installed so just to install it and then you can restart your
432.27 -> Visual Studio code and oil these particular things will start working for
436.77 -> you as a tool given which is provided by Visual Studio code SDS isn't for you so
442.71 -> that's all about the improving the code quality of your code and you can make
447.539 -> this is very useful for you when you continue coding with a very complex
451.74 -> projects so that's it about the configuration files from the next video
456.03 -> and next tutorial we'll start the actual coding for Android your application

Source: https://www.youtube.com/watch?v=nG9K0kRne8I