ESLint in 2022, from a beginner's point of view ;)

Hey, there. In quick work, it's important to say that I'm a beginner dev and this is my first post, and maybe I have a little "naive" view of Linters. In that case, I hope for your help in the comments. Let's get to the point.

Installation

If you know a little about package managers, any installation will be easy, look in the eslint documentation.

Anyway, I'll leave below the list of commands for you to do this, but try the documentation, because it can update, well, anytime.

First of all,

We are in a situation where, in your code editor (I'm using vscode), you don't have any extensions or settings already changed by you to use linters. Please pay attention to this.

And you need to start your project, It could be an npm init, it could be npm init -y, it could be a create-react-app, vite, it doesn't matter so much.

Start it however you feel comfortable.

Now yes, install eslint

npm init @eslint/config

This command will already create a .eslintrc folder (where you configure eslint) and will ask you some questions. You're free to answer each one because it depends on your type of project and your desire as well.

I choose these options:

? How would you like to use ESLint? … 
  To check syntax only
  To check syntax and find problems
▸ To check syntax, find problems, and enforce code style

Choosing a code style already gives you a set of rules that a lot of people use, in all cases, it's good to use.

Next question.

? What type of modules does your project use? … 
▸ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

Understand this part as the way you import and export things. requise are already going out of fashion, so to speak, usually, your choice will be the first option.

Next.

? Which framework does your project use? … 
▸ React
  Vue.js
  None of these

? Does your project use TypeScript? ‣ No / Yes

I'm using React and in this project, there's no need to apply Typescript

We're just starting!

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

Normally you will leave both options checked, but feel free to choose where your code will run.

Next!

? How would you like to define a style for your project? … 
▸ Use a popular style guide
  Answer questions about your style

? Which style guide do you want to follow? … 
▸ Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

I chose Airbnb to demo and it's also the one I use the most, but feel free to inquire about other famous style guides

More one!

? What format do you want your config file to be in? … 
  JavaScript
  YAML
▸ JSON

I like to use JSON format because normally the other settings, by default, come in JSON. The difference between them is very little.

Next question!

? Would you like to install them now? ‣ No / Yes

? Which package manager do you want to use? … 
▸ npm
  yarn
  pnpm

I don't know what happens if you don't install it now, you might have to do it all over again, but anyway, if we started all this to install, let's go all the way. I use NPM as a package manager.

Finally, it's over... just kidding,

This is the part we do in the terminal, now you can open your file, and I'll use the code . command to open my code editor.

In your code editor,

Now, you have installed your first linter. Congratulations!!!
Let's take a look at your editor, it'll look like this:

The most important parts you need to understand in eslint settings are extends, plugins, and rules.

Extends:

Roughly speaking, Extends are files full of rules already configured. Downloading one you like and adding it to the array, it's ready to use.

Nothing prevents you from installing several extends, but there is an important detail that will define the conflicts that your file may have.

If you add your extends outside the array, they might conflict, because that means you're applying the two entire extends to your file.

Your code editor will warn you that this is impossible to do, semantic errors of an object. That's why you should put it inside an array if you're using more than one extension.

Inside an array, your extends will inherit the characteristics of the previous extends.

For example, looking at the image above, I can say that if there is an equal rule between the two extensions, the Airbnb rule will prevail.

If I added another extends and it also had conflict then this one would take priority.

The order of priority is descending: from the last item in the array, to the first.

Plugins:

Plugins are different, they are like a file that you install and leave in your project. It won't do anything until you give the command.

It will make your rules available for you to use.

The extends apply them the moment you add them, the plugins, even adding, don't apply your rules, just make them available for you to use.

Rules:

Now I'm going to create an index.js and make my first React component, let's see if our linter is working. To do this I will go to the terminal and put an npx eslint .

const MyComponent = () => {
  return (
    <div>
      <h1>Hello, dev.to</h1>
      <p>Please like this post!!!</p>
    </div>
  )
}

export default MyComponent;

Wow, I thought that everything was ready, it seems that there are a lot of mistakes here and some very important ones.

In my case, my first mistake is to use React, without even installing it in my application, what a big mistake. But there are also some minor bugs like the lack of semicolons.

My Airbnb extends is telling me all these errors, I can change it if I want by changing the rule value. The basic values ​​that exist are: error, warn, off;

The rule can be considered an error, a warning, or it can be disabled.

Let's disable the semicolon problem and also the newline that was reported by eslint;

Notice that at least now those silly errors are no longer being warned.

And that's how rules work, you can write rule changes however you want, even applying an extends or plugin. We have other errors being shown but will be explained later.

Last but not least

Now you understand how your linter extends work, how you can use plugins, and also how to see your errors.

But let's make it easier.

As I am using vscode, I will install the ESLint Extension, click on the configuration option, and click on add to Workspace recommendation. Doing so will create a folder called .vscode with a file inside about the extension you just recommended.

This means that every time someone downloads your project, vscode will recommend that they install this extension. It's practical, isn't it?

Now your errors will be indicated by vscode itself, there is no need to run the command npx eslint .

Bonus

ESlint also gives you the option to fix these errors, if you noticed the terminal errors, it suggests that we use the --fix command.

To do this you need to have your files saved and run the command:

npx eslint . --fix

The simplest errors will format themselves, but some will persist and you must pay attention to them.

Formatting when saving

Remember when vscode created a .vscode folder?

We can use this same folder to define the vscode settings in the project.

This means that these settings won't change other projects and if someone downloads it, they won't need to change any settings in their code editor.

Create a file called settings.json and add the following code to it:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

You will be telling your vscode:
When you save a file, use eslint to format errors;

In this case, you will be using your ESLint, not only as a Linter but as a Formatter.

I'll leave this topic of formatters for another post. But it is important that you understand the processes I mentioned and how you have the freedom to use them however you want.

That was it for today, I hope you enjoyed reading and that you tried to practice.

See you later.