How to Use Eslint With Webpack And ES6 Modules

Written by gabriela-cruz | Published 2020/03/20
Tech Story Tags: webpack | javascript | coding | eslint | nodejs | team-productivity | code-quality | github

TLDR This is not going to teach you how to install eslint in your project, I will assume that you already did. Instead, we need to create a file in the root directory called.eslintignore. The only line of code that you need to write is dist/main.js. The next time you use this file, next time, the next time it will not pass the rules, you will need to use it to check it out. The next step is to create the root folder and create a new ES6 module.via the TL;DR App

Today we are going to talk about eslint and webpack. This is not going to teach you how to install eslint in your project, I will assume that you already did.
First of all, when you are new to eslint and want to auto-fix your JavaScript files, so you run
npx eslint --fix .
but, you have this main.js that webpack kindly generated for you to make your code separated by modules, work.
So, you get this result:
Even though the code still working, you are not going to pass eslint rules. We don’t need to check this file with eslint, so what do we do?
We need to create a file in the root directory called .eslintignore
As you can see, the only line of code that you need to write is dist/main.js
And that's it, next time you use
npx eslint .
or
npx eslint --fix .
eslint will ignore this file.
If you want to check it out directly from the official documentation, go to the next link https://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories
Happy Coding!
Social Media: Github

Written by gabriela-cruz | Web Developer at Microverse
Published by HackerNoon on 2020/03/20