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
1 2 | npm install eslint-loader --save-dev |
Note : You also need to install eslint from npm, if you haven’t already:
1 2 | npm install eslint --save-dev |
2. Basic usage
The file and folder structure is as follows
1 2 3 4 5 6 7 8 | webpack-demo ... |- dist/ - index.html |- src/ - index.js |- webpack.config.js |
Code file dist/index.html
1 2 3 4 5 6 7 8 9 10 11 | <span class="token doctype"><!DOCTYPE html></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> html</span> <span class="token attr-name">lang</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> en <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> meta</span> <span class="token attr-name">charset</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> UTF-8 <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> title</span> <span class="token punctuation">></span></span> Webpack từ A đến Á cùng kentrung <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> title</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> head</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span> script</span> <span class="token attr-name">src</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> main.js <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> script</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> body</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span> html</span> <span class="token punctuation">></span></span> |
Code file src/index.js
1 2 3 | var author = 'kentrung' console.log('Webpack từ A đến Á cùng ' + author) |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span> <span class="token punctuation">(</span> <span class="token string">'path'</span> <span class="token punctuation">)</span> module <span class="token punctuation">.</span> exports <span class="token operator">=</span> <span class="token punctuation">{</span> mode <span class="token operator">:</span> <span class="token string">'development'</span> <span class="token punctuation">,</span> entry <span class="token operator">:</span> <span class="token string">'./src/index.js'</span> <span class="token punctuation">,</span> output <span class="token operator">:</span> <span class="token punctuation">{</span> filename <span class="token operator">:</span> <span class="token string">'main.js'</span> <span class="token punctuation">,</span> path <span class="token operator">:</span> path <span class="token punctuation">.</span> <span class="token function">resolve</span> <span class="token punctuation">(</span> __dirname <span class="token punctuation">,</span> <span class="token string">'dist'</span> <span class="token punctuation">)</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> module <span class="token operator">:</span> <span class="token punctuation">{</span> rules <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> test <span class="token operator">:</span> <span class="token regex">/.js$/</span> <span class="token punctuation">,</span> exclude <span class="token operator">:</span> <span class="token regex">/node_modules/</span> <span class="token punctuation">,</span> loader <span class="token operator">:</span> <span class="token string">'eslint-loader'</span> <span class="token punctuation">,</span> options <span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// eslint options (if necessary)</span> rules <span class="token operator">:</span> <span class="token punctuation">{</span> quotes <span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token string">"error"</span> <span class="token punctuation">,</span> <span class="token string">"double"</span> <span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">]</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> |
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)
1 2 3 4 5 6 7 8 | ... C:UserskentrungDesktopwebpack-demosrcindex.js 1:14 error Strings must use doublequote quotes 2:13 error Strings must use doublequote quotes ✖ 2 problems (2 errors, 0 warnings) 2 errors and 0 warnings potentially fixable with the `--fix` option. |
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
1 2 3 | var author = "kentrung" console.log("Webpack từ A đến Á cùng " + author) |
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
1 2 3 4 5 6 7 | webpack-demo ... |- dist/ |- src/ |- webpack.config.js |- .eslintrc |
Code file .eslintrc
1 2 3 4 5 6 | { rules: { quotes: ["error", "double"] } } |
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 ^^
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | const path = require('path') module.exports = { mode: 'development', entry: './src/index.js', output: { filename: 'main.js', path: path.resolve(__dirname, 'dist') }, module: { rules: [ { test: /.js$/, exclude: /node_modules/, loader: 'eslint-loader' }, ], }, } |
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!
- See more configuration for ESLint loader at: https://webpack.js.org/loaders/eslint-loader/
- Source code github: https://github.com/kentrung/webpack-tutorial