feat: added JavaScript linter ESlint

react-config-tutorial/.eslintrc

@@ -0,0 +1,13 @@
+{
+  "parser": "babel-eslint",
+  "extends": "react",
+  "env": {
+    "browser": true,
+    "node": true
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

react-config-tutorial/package.json

@@ -18,7 +18,12 @@
     "@babel/core": "^7.15.5",
     "@babel/preset-env": "^7.15.4",
     "@babel/preset-react": "^7.14.5",
+    "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
+    "eslint": "^7.32.0",
+    "eslint-config-react": "^1.1.7",
+    "eslint-loader": "^4.0.2",
+    "eslint-plugin-react": "^7.25.1",
     "prettier": "2.4.0",
     "webpack": "^5.52.0",
     "webpack-cli": "^4.8.0",

react-config-tutorial/webpack.config.js

@@ -20,11 +20,15 @@ module.exports = {
     },
     module: {
 	rules: [
-	    //use babel-loader to transpile these file types
 	    {
 		test: /\.(js|jsx)$/,
 		exclude: /node_modules/,
-		use: ['babel-loader']
+		use: [
+		    //use babel-loader to transpile these file types
+		    'babel-loader',
+		    //use esling-loader to hook JavaScript linter ESLint into Webpack
+		    'eslint-loader'
+		]
 	    }
 	]
     },