feat: add eslint feature

.eslintrc

@@ -0,0 +1,45 @@
+{
+  "env": {
+    "es6": true,
+    "node": true
+  },
+  "extends": "airbnb",
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "experimentalObjectRestSpread": true,
+      "jsx": true,
+      "modules": true
+    },
+    "sourceType": "module"
+  },
+  "plugins": [
+    "react"
+  ],
+  "rules": {
+    "indent": [
+      "error",
+      2
+    ],
+    "linebreak-style": [
+      "error",
+      "unix"
+    ],
+    "quotes": [
+      "error",
+      "single"
+    ],
+    "semi": [
+      "error",
+      "never"
+    ],
+    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
+    "react/require-extension": "off",
+    "arrow-parens": ["error", "as-needed"],
+    "quote-props": ["error", "consistent"],
+    "object-shorthand": ["error", "consistent"],
+    "class-methods-use-this": [0],
+    "func-names": ["error", "as-needed"],
+    "import/prefer-default-export": [0]
+  }
+}

package.json

@@ -5,7 +5,8 @@
   "main": "src/index.js",
   "scripts": {
     "start:dev": "NODE_ENV=dev webpack-dev-server",
-    "build": "rm -rf ./dist && npx webpack"
+    "build": "rm -rf ./dist && npx webpack",
+    "lint": "eslint --ext .js src"
   },
   "repository": "https://github.com/Rynxiao/datepicker.git",
   "author": "ryn",
@@ -15,14 +16,25 @@
   },
   "devDependencies": {
     "babel-core": "^6.26.3",
+    "babel-eslint": "^9.0.0",
     "babel-loader": "7.1.5",
     "babel-preset-env": "^1.7.0",
     "css-loader": "^1.0.0",
+    "eslint": "^5.6.0",
+    "eslint-config-airbnb": "^17.1.0",
+    "eslint-loader": "^2.1.1",
+    "eslint-plugin-import": "^2.14.0",
+    "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-react": "^7.11.1",
     "html-webpack-plugin": "^3.2.0",
     "mini-css-extract-plugin": "^0.4.3",
+    "pre-commit": "^1.2.2",
     "style-loader": "^0.23.0",
     "webpack": "^4.19.1",
     "webpack-cli": "^3.1.0",
     "webpack-dev-server": "^3.1.8"
-  }
+  },
+  "pre-commit": [
+    "lint"
+  ]
 }

src/index.js

@@ -1 +1,6 @@
-alert(1)
+const message = {
+  a: 1,
+  b: 2,
+}
+
+console.log(message)

webpack/webpack.config.dev.js

@@ -1,38 +1,52 @@
 const path = require('path')
 const webpack = require('webpack')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+
 const projectPath = path.resolve(__dirname, '../')
 
 module.exports = {
-	mode: 'development',
-	entry: path.resolve(projectPath, 'src/index.js'),
-	output: {
-		path: path.resolve(__dirname, 'dist'),
-		filename: 'bundle.js'
-	},
+  mode: 'development',
+  entry: path.resolve(projectPath, 'src/index.js'),
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
   module: {
     rules: [
       {
+        test: /\.js[x]?$/,
+        enforce: 'pre',
+        use: [{
+          loader: 'eslint-loader',
+          options: { fix: true },
+        }],
+        include: path.resolve(projectPath, './src/**/*.js'),
+        exclude: [
+          path.resolve(projectPath, 'node_modules'),
+          path.resolve(projectPath, './webpack/**/*.js'),
+        ],
+      },
+      {
         test: /\.js$/,
         loader: 'babel-loader',
-        include: path.resolve(projectPath, 'src'),
-        exclude: path.resolve(projectPath, "node_modules"),
-     	},
+        include: path.resolve(projectPath, './src/**/*.js'),
+        exclude: path.resolve(projectPath, 'node_modules'),
+      },
       {
         test: /\.css$/,
         use: [
-        	{ loader: "style-loader" },
+          { loader: 'style-loader' },
           {
-          	loader: "css-loader",
-          	options: {
+            loader: 'css-loader',
+            options: {
               modules: true,
-          		camelCase: true,
-          		localIdentName: '[name]__[local]--[hash:base64:5]'
-          	}
-          }
-        ]
+              camelCase: true,
+              localIdentName: '[name]__[local]--[hash:base64:5]',
+            },
+          },
+        ],
       },
-    ]
+    ],
   },
   plugins: [
     new webpack.HotModuleReplacementPlugin(),
@@ -40,12 +54,12 @@ module.exports = {
       title: 'DatePicker',
       filename: 'index.html',
       template: path.resolve(projectPath, 'index.html'),
-      inject: false
-    })
+      inject: false,
+    }),
   ],
   devServer: {
     port: 8080,
     contentBase: path.resolve(projectPath, 'build'),
-    hot: true
+    hot: true,
   },
-}
+}

webpack/webpack.config.prod.js

@@ -1,54 +1,55 @@
 const path = require('path')
-const MiniCssExtractPlugin = require("mini-css-extract-plugin")
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const HtmlWebpackPlugin = require('html-webpack-plugin')
+
 const projectPath = path.resolve(__dirname, '../')
 
 module.exports = {
-	mode: 'production',
-	entry: './src/index.js',
-	output: {
-		path: path.resolve(__dirname, '../dist'),
-		filename: '[name]-bundle-[hash:8].js'
-	},
+  mode: 'production',
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, '../dist'),
+    filename: '[name]-bundle-[hash:8].js',
+  },
   module: {
     rules: [
       {
         test: /\.js$/,
         loader: 'babel-loader',
         include: path.resolve(projectPath, 'src'),
-        exclude: path.resolve(projectPath, "node_modules"),
-     	},
+        exclude: path.resolve(projectPath, 'node_modules'),
+      },
       {
         test: /\.css$/,
         use: [
           {
             loader: MiniCssExtractPlugin.loader,
             options: {
-              publicPath: '../build/styles'
-            }
+              publicPath: '../build/styles',
+            },
+          },
+          {
+            loader: 'css-loader',
+            options: {
+              modules: true,
+              camelCase: true,
+              localIdentName: '[name]__[local]--[hash:base64:5]',
+            },
           },
-          { 
-          	loader: "css-loader",
-          	options: {
-          		modules: true,
-          		camelCase: true,
-          		localIdentName: '[name]__[local]--[hash:base64:5]'
-          	}
-          }
-        ]
-      }
-    ]
+        ],
+      },
+    ],
   },
   plugins: [
     new MiniCssExtractPlugin({
-      filename: "[name].css",
-      chunkFilename: "[id].css"
+      filename: '[name].css',
+      chunkFilename: '[id].css',
     }),
     new HtmlWebpackPlugin({
       title: 'CSS Modules Demo',
       filename: 'index.html',
       template: path.resolve(projectPath, 'index.html'),
-      inject: false
-    })
+      inject: false,
+    }),
   ],
-}
+}