Migrating to ESLint
Migrating to ESLint
Hi friends! In this video our very own Mark Thompson walks us through how to migrate an existing project to ESLint and how to add ESLint to a new project. Enjoy!
Links:
Angular ESLint → https://github.com/angular-eslint/ang…
James Henry → https://jameshenry.blog/
Continue the conversation online!
Angular Twitter → https://twitter.com/angular
Mark’s Twitter → https://twitter.com/marktechson
Content
2.24 -> oh
3.6 -> don't mind me i'm just lenting my
6 -> angular code
7.279 -> wait a minute that's not how you do that
9.92 -> want to know how to
10.8 -> really lint your angular code stick
13.15 -> [Music]
14.92 -> around
18.33 -> [Music]
23.92 -> hey friends welcome to ng update i'm
26.48 -> your host mark thompson from the angler
28.32 -> team here at google
30.4 -> lensing allows teams to discover
32.16 -> potential problems in their code
34 -> that might not be compilation errors but
36.559 -> they could be team-specific styles and
38.64 -> patterns for consistent code
40.559 -> in previous versions of angular new
42.719 -> projects came with tslint as the linting
45.12 -> solution
46.239 -> but it's deprecated and new angular
48.48 -> projects don't have a linting solution
50.719 -> but we can fix that the incredible
53.199 -> angular community has led an effort to
54.96 -> create a package called
56.32 -> angular eslint that allows teams to
58.879 -> integrate eslint into their projects
62 -> we'll learn how to move an older project
63.84 -> to eslint
65.04 -> and how to set up eslint in a new
67.119 -> project
68.24 -> off we go we'll start off by migrating
71.28 -> an existing angular application
73.36 -> my cli is version 12 but the project is
75.92 -> version 11.
76.96 -> so if i run ng-lint in this v11 project
80.32 -> i get a message that tslint is
81.92 -> deprecated
83.36 -> the first command we'll run is ng-add
85.92 -> eslint schematics
87.759 -> this command will add the eslint
89.439 -> schematic to our project
91.92 -> with the schematic installed we can now
94.079 -> run the second command which will remove
96.079 -> tslint and update your project settings
98.72 -> to support eslant
100.64 -> that command is ng g angular eslint
103.759 -> schematics convert to eslint
105.759 -> and we'll pass in a few flags to go with
107.84 -> it
109.04 -> we're using the ng generate with the
110.799 -> schematic function from the collection
112.96 -> also we're specifying to remove ts lint
115.439 -> and codalizer from our project
117.04 -> automatically given
118.32 -> that these are no longer in use if you
121.04 -> have a mono repo you can migrate one
123.04 -> project at a time
124.32 -> and ts lint and codalyzer will be
126.32 -> removed once no more projects
128.479 -> are actively using them thank you
130.959 -> codalyzer
131.76 -> you've been great this command makes a
134.959 -> few updates
136.239 -> it adds an eslint rc json file based on
139.12 -> the tslint json
140.72 -> it updates the architect configuration
142.959 -> and sets eslint as the target
145.36 -> and since we passed in the flight to
147.12 -> remove codalyzer mts lint
149.599 -> they will be removed from the project
152.56 -> there's one other thing to note here
154.4 -> this is a conversion test so that means
156.72 -> that any existing ts link configuration
159.12 -> will be converted to the eslint
161.04 -> equivalent where possible
162.72 -> be sure to pay attention to the output
164.48 -> while running this command
166.64 -> if you don't have a pre-existing ts link
168.64 -> setup that you need to maintain
170.4 -> and you want to be immediately opted
172.48 -> into the recommended eslint config
174.72 -> you can additionally pass the flag that
176.879 -> says ignore existing ts link config
179.76 -> and your existing config will not be
181.68 -> converted
182.959 -> all right now it's time for the moment
184.8 -> of truth let's run
186.319 -> ng-lint yes we've done it
190.48 -> i have something for you you see this
192 -> right here that's a high five for me to
194.56 -> you
195.04 -> nice work all right we've got one
197.92 -> project all set up
199.28 -> let's update an angular v12 project to
201.44 -> use eslint
203.36 -> back to the code running ng-lint in our
206.159 -> v12 project yields an error letting us
208.319 -> know that there's not a target for this
210.319 -> project
211.28 -> this is actually not going to be a
212.799 -> problem for us we'll run some commands
214.879 -> that will get our line configured for a
216.64 -> project
217.2 -> in no time all right here's the command
220.4 -> that we'll be using
222.48 -> ng add angular eslint schematics
226 -> when prompted to install the package
227.84 -> we'll say yes and then the schematics
229.92 -> will be installed
231.2 -> we get one new file and two updates to
233.76 -> existing files
234.72 -> the eslintrc.json file will be added to
237.519 -> the project
238.319 -> and the package.json as well as the
240.92 -> angular.json
242.159 -> will both be updated hold on that seems
245.68 -> too easy
246.56 -> let's check it out and see if everything
248.4 -> works the way that we'd hoped
250.239 -> back to the code we go let's try out the
253.04 -> ng-link command
254.08 -> for this project success our project is
258 -> officially
258.88 -> linted nice work things look great and
261.6 -> we can configure
262.639 -> even more rules to customize the
264.32 -> configuration of our project
266.479 -> here's what we'll do we'll add a rule to
269.12 -> eslint
270.24 -> we'll break that rule we'll run the
272.639 -> linter
273.919 -> then we'll go back and fix the code and
276.32 -> finally we'll run the linter again
278.72 -> that sounds fun right yeah i agree let's
281.12 -> do it
282.639 -> we should always strive to keep our
284.4 -> applications accessible by following
286.24 -> best practices like
287.84 -> using alt tags when we use images etc
291.36 -> sometimes however we forget but lindsay
293.84 -> can help us here
295.12 -> we can leverage a linting rule that'll
296.88 -> give us a reminder when we omit alt text
299.12 -> from images
300.16 -> and all the tags that require them in
304.039 -> eslintrc.json
305.28 -> i'm going to go to the rules section for
306.96 -> templates and add the accessibility alt
309.199 -> text rule
310.56 -> in app.component.html i'll remove the
313.84 -> alt description
314.96 -> save and run the linter again
319.199 -> great we see an error that's letting us
321.199 -> know that we're missing an alt attribute
323.12 -> in our app.component.html
325.44 -> we'll go back to that component add the
327.36 -> alt attribute and then
328.8 -> run ng-lint once more
332.4 -> now would you look at that my favorite
334.72 -> phrase
335.6 -> all files pass linting feels good
339.919 -> friends there you have it we've migrated
342.479 -> an existing project to use angular
344.4 -> eslint
345.199 -> and we've added angular eslint to a new
348.16 -> project
349.52 -> big big thanks to james henry for
351.28 -> creating this project and
352.8 -> thanks to all the contributors as well
355.12 -> there will be links in the description
356.4 -> for james
357.36 -> this project and more alright friends
360.96 -> if you're enjoying this crisp angler
362.8 -> content please take a moment to
364.8 -> like and subscribe we appreciate you
368.08 -> that's it for me and until the next time
370.96 -> go build great apps
382.16 -> you
Source: https://www.youtube.com/watch?v=IDBdtQlugtw