Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,060 --> 00:00:03,240
In this lecture, we're going to quickly discuss views.
2
00:00:03,270 --> 00:00:04,630
S Lynch Rules.
3
00:00:04,650 --> 00:00:09,540
In the past, I've had students complain about some of the rules from S Lynch.
4
00:00:09,570 --> 00:00:11,310
You may not be a fan of them.
5
00:00:11,310 --> 00:00:14,820
In this case, it's perfectly fine to disable rules.
6
00:00:14,820 --> 00:00:18,450
Let's explore how that's done in our project.
7
00:00:18,450 --> 00:00:21,600
We created a component called App Off.
8
00:00:21,630 --> 00:00:25,290
All our components will be prefixed with the word app.
9
00:00:25,320 --> 00:00:29,160
Otherwise s lynch may complain about our components.
10
00:00:29,160 --> 00:00:29,850
Names.
11
00:00:29,850 --> 00:00:32,369
Components must be multi worded.
12
00:00:32,369 --> 00:00:36,180
If you're not a fan of this practice, you can disable this rule.
13
00:00:36,210 --> 00:00:39,630
Let's try breaking this rule in your editor.
14
00:00:39,630 --> 00:00:43,460
Rename the component from app off to Auth.
15
00:00:45,650 --> 00:00:47,840
Next and side the component.
16
00:00:47,840 --> 00:00:50,000
Scroll to the exported object.
17
00:00:50,000 --> 00:00:51,980
Change the name to auth.
18
00:00:54,260 --> 00:00:55,250
Afterward.
19
00:00:55,250 --> 00:00:59,510
The app component must be updated to reflect these changes.
20
00:00:59,540 --> 00:01:01,820
Open this component in your editor.
21
00:01:03,980 --> 00:01:07,210
Scroll to the script block of the components.
22
00:01:07,220 --> 00:01:10,100
The import statements must be updated.
23
00:01:10,130 --> 00:01:14,300
Rename the component name from app off to auth.
24
00:01:16,590 --> 00:01:22,200
Up next, the components object must be updated to the new component name.
25
00:01:24,420 --> 00:01:26,940
Lastly, scroll to the template.
26
00:01:26,970 --> 00:01:30,570
The tag for our component can be renamed to Auth.
27
00:01:32,700 --> 00:01:33,370
Great.
28
00:01:33,390 --> 00:01:38,340
We've renamed our component however is lint is not going to be happy.
29
00:01:38,340 --> 00:01:42,950
Switch back to the off component the editor is throwing an error.
30
00:01:42,960 --> 00:01:50,940
If we hover our mouse over the error, it states that components must be multi worded in the error message.
31
00:01:50,940 --> 00:01:53,250
A link for the rule can be found.
32
00:01:53,250 --> 00:01:54,660
Let's click on it.
33
00:01:56,360 --> 00:02:00,290
Vue has a documentation page dedicated to each rule.
34
00:02:00,320 --> 00:02:04,990
You can read the description for a complete understanding of this problem.
35
00:02:05,000 --> 00:02:08,539
However, our goal is to disable this rule.
36
00:02:08,570 --> 00:02:12,500
Rules can be disabled by updating the configuration file.
37
00:02:12,500 --> 00:02:16,480
Before opening the file, we must copy the name of the rule.
38
00:02:16,490 --> 00:02:19,280
Copy the heading which contains the name.
39
00:02:21,520 --> 00:02:23,200
Head back to the editor.
40
00:02:23,230 --> 00:02:28,000
Open the s lint rc dot CJS file.
41
00:02:30,050 --> 00:02:31,730
At the bottom of the file.
42
00:02:31,730 --> 00:02:33,770
Add the rules object.
43
00:02:35,870 --> 00:02:36,660
Next.
44
00:02:36,680 --> 00:02:40,100
Paste In the name of the rule as the property name.
45
00:02:42,230 --> 00:02:45,230
Lastly, set the value to off.
46
00:02:47,320 --> 00:02:49,210
By setting a rule to off.
47
00:02:49,210 --> 00:02:51,270
It'll be disabled from our app.
48
00:02:51,280 --> 00:02:55,150
You can switch to the off component to check the difference.
49
00:02:55,150 --> 00:03:00,910
If the error doesn't disappear, you may need to restart the editor or reopen the file.
50
00:03:00,910 --> 00:03:03,900
Once you've done that, the error should go away.
51
00:03:03,910 --> 00:03:05,650
It's as simple as that.
52
00:03:05,680 --> 00:03:09,880
For demonstration purposes, I'm going to leave this rule off.
53
00:03:09,880 --> 00:03:16,630
If you ever encounter a rule you don't like, feel free to turn it off to verify that the rule is working.
54
00:03:16,630 --> 00:03:21,280
Let's try renaming our components in the components directory.
55
00:03:21,280 --> 00:03:24,670
Rename the app header component to header.
56
00:03:26,750 --> 00:03:32,300
Next any views directory rename the home view file to home.
57
00:03:37,300 --> 00:03:41,860
Lastly, rename the about view component to about.
58
00:03:44,010 --> 00:03:48,960
Renaming these files will break our application not because of es lint.
59
00:03:48,990 --> 00:03:52,780
The import statements for these files will produce errors.
60
00:03:52,800 --> 00:03:55,630
Let's quickly fix our import statements.
61
00:03:55,650 --> 00:03:57,240
Open the app file.
62
00:03:59,320 --> 00:04:05,650
Scroll to the script block update the import statement with the new name of the file.
63
00:04:07,120 --> 00:04:11,980
Next open the router slash index dot js file.
64
00:04:14,110 --> 00:04:16,709
This file will produce errors too.
65
00:04:16,720 --> 00:04:18,100
In a future lecture.
66
00:04:18,100 --> 00:04:21,240
I promise we will review the code in this lecture.
67
00:04:21,250 --> 00:04:26,850
For now, let's focus on fixing the import statements from the import statements.
68
00:04:26,860 --> 00:04:28,750
Remove the word view.
69
00:04:31,000 --> 00:04:34,870
Make sure you update the import statement from within the array.
70
00:04:37,060 --> 00:04:37,710
Great.
71
00:04:37,720 --> 00:04:39,630
This should resolve our issues.
72
00:04:39,640 --> 00:04:41,320
Let's refresh the page.
73
00:04:43,530 --> 00:04:45,690
The page is functioning as normal.
74
00:04:45,720 --> 00:04:49,590
Error shouldn't pop up from the page in the next lecture.
75
00:04:49,590 --> 00:04:52,470
Let's get back into state management.
6222
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.