Webpack from A to Asia: Webpack ESlint Loader

Tram Ho

Webpack from A to Asia with kentrung

In a project all languages, including HTML and CSS, must follow the rules to create a good project. Without rules, each person coding in different styles creates a mess that outsiders will take a long time to understand (they don’t even want to read). ESLint is a tool that helps us to analyze code, thereby giving up problems that the code is facing such as not complying with coding style, wrong coding convention. In addition, ESLint can help us find some potential bugs in the code such as assigning undeclared variables, possibly causing runtime errors or getting values ​​from a global variable that makes debugging difficult. etc. cloudy clouds

1. Installation

Note : You also need to install eslint from npm, if you haven’t already:

2. Basic usage

The file and folder structure is as follows

Code file dist/index.html

Code file src/index.js

Let’s try a rule that coders must follow, for example the following rule requires applying a double quote " to strings. Now we fix webpack.config.js

Now run webpack again to see what: npm run dev

When I finished running, the cmd screen showed a red error (ah, there is no color above it)

Color restored version

It’s boring to look at this, but it’s okay, rules are rules so I have to follow. Now re-open the src/index.js correct the single quotes into double quotes

Rerun webpack and the result is no more mistakes. What but these three trivial errors he fixes a little. MUI ^^

3. Configure the ESLint file

For example above, I have specified rules directly in webpack.config.js file. Basically it’s still ok but more and more rules will not be okay later, this file will look terrible. Ideally we should create a file “Rules Code” for easy control. At the root directory of the project we create a .eslintrc file

Code file .eslintrc

Now the webpack.config.js file we remove the options is fine, it knows the way to find the configuration file, even if it doesn’t matter ^^

Test to see if it is ok, guys!


This article is over, hopefully with this article you have added a lot of useful knowledge. See you in the next article!

Share the news now

Source : Viblo