Original subtitles

In this lecture, we're going to quickly discuss views.

S Lynch Rules.

In the past, I've had students complain about some of the rules from S Lynch.

You may not be a fan of them.

In this case, it's perfectly fine to disable rules.

Let's explore how that's done in our project.

We created a component called App Off.

All our components will be prefixed with the word app.

Otherwise s lynch may complain about our components.

Names.

Components must be multi worded.

If you're not a fan of this practice, you can disable this rule.

Let's try breaking this rule in your editor.

Rename the component from app off to Auth.

Next and side the component.

Scroll to the exported object.

Change the name to auth.

Afterward.

The app component must be updated to reflect these changes.

Open this component in your editor.

Scroll to the script block of the components.

The import statements must be updated.

Rename the component name from app off to auth.

Up next, the components object must be updated to the new component name.

Lastly, scroll to the template.

The tag for our component can be renamed to Auth.

Great.

We've renamed our component however is lint is not going to be happy.

Switch back to the off component the editor is throwing an error.

If we hover our mouse over the error, it states that components must be multi worded in the error message.

A link for the rule can be found.

Let's click on it.

Vue has a documentation page dedicated to each rule.

You can read the description for a complete understanding of this problem.

However, our goal is to disable this rule.

Rules can be disabled by updating the configuration file.

Before opening the file, we must copy the name of the rule.

Copy the heading which contains the name.

Head back to the editor.

Open the s lint rc dot CJS file.

At the bottom of the file.

Add the rules object.

Next.

Paste In the name of the rule as the property name.

Lastly, set the value to off.

By setting a rule to off.

It'll be disabled from our app.

You can switch to the off component to check the difference.

If the error doesn't disappear, you may need to restart the editor or reopen the file.

Once you've done that, the error should go away.

It's as simple as that.

For demonstration purposes, I'm going to leave this rule off.

If you ever encounter a rule you don't like, feel free to turn it off to verify that the rule is working.

Let's try renaming our components in the components directory.

Rename the app header component to header.

Next any views directory rename the home view file to home.

Lastly, rename the about view component to about.

Renaming these files will break our application not because of es lint.

The import statements for these files will produce errors.

Let's quickly fix our import statements.

Open the app file.

Scroll to the script block update the import statement with the new name of the file.

Next open the router slash index dot js file.

This file will produce errors too.

In a future lecture.

I promise we will review the code in this lecture.

For now, let's focus on fixing the import statements from the import statements.

Remove the word view.

Make sure you update the import statement from within the array.

Great.

This should resolve our issues.

Let's refresh the page.

The page is functioning as normal.

Error shouldn't pop up from the page in the next lecture.

Let's get back into state management.