All language subtitles for 004 Formatting with ESLint and Prettier_en

In this lecture, we are going to prepare our editors.

We'll be writing a lot of code.

We're bound to make mistakes with formatting our code.

The project was installed with iOS lint and prettier.

However, we must run our code through these tools with the command line.

It's not an ideal setup.

Ideally, these tools should format our code as we write it.

Luckily, this behavior can be achieved with a few tweaks to our editors.

If you're using Visual Studio code, you'll be able to follow along with me.

Otherwise, you may need to look up how to achieve this behavior with the editor of your choice.

The first step is to install the extensions for these tools under the extension tab.

You can install the S lint extension from a user called Microsoft.

As for a prettier, the name of the user is called prettier.

Both extensions should be installed and enabled for our project.

After installing these extensions, let's update our editors settings on the menu.

Navigate to file preferences settings.

In the search bar search for a setting called format on save.

The first setting should be a checkbox.

Enable this feature by enabling this feature.

Visual Studio code will format your files after saving them next search for a setting called default

formatter.

Visual Studio Code has a custom formatter for JavaScript files.

However, we're not interested in its formatting tool.

Prettier will fulfill all our formatting needs.

We can change the formatter by modifying the setting.

Change the default formatter to prettier.

This option will only be available for editors with the prettier extension installed.

We've successfully configured prettier but not is lint lensing can be automated too.

Unfortunately, it's not easy to enable s lint through the UI at the top right corner.

There's an option for viewing the settings with JSON.

Click on it.

The settings dot json file will open in our editor.

Behind the scenes, the UI modifies this file for us.

If we look at the bottom of the file, the formatting options have been added to the object.

If we were to remove these properties, the UI would be reflected with those changes.

In my opinion, modifying settings through the UI is simpler than modifying the JSON file.

It reduces the likelihood of a typo.

Automating is lint is not configurable through the UI.

We must directly edit this file to enable us lint on saves in my file.

I've already added a few settings.

You do not need to copy these settings.

Most of these are a personal preference for my projects.

At the bottom of the file add an object called Editor Code Actions on save.

This object can contain a list of actions that can be performed after a user saves a file.

We can instruct Visual Studio code to perform actions from formatting to building projects.

For our purposes, let's run is lent at a property called Source dot fix.

All dot is linked with a value of true.

The action we've added will force EOS Lynch to fix issues with our code as long as the extension is

installed in our editor, this action should work.

Let's try testing our code in our project.

Open the app dot view component.

I'm going to add spacing inside the header tag from the template.

As I do so, a yellow line will appear below the spacing.

This error is emitted from s lens.

It does not like the formatting of our tags.

If I were to save the file, the spacing issues would go away.

Isn't that great?

We don't have to run commands anymore.

S lint and prettier are cooperating to format our code.

This feature keeps our code consistent.

In the next lecture, let's begin working on the music project.