Install ESLint

Author: Aljullu

.eslintrc

@@ -0,0 +1,154 @@
+{
+  "extends": "eslint:recommended",
+  "parser": "babel-eslint",
+  "env": {
+    "browser": true,
+    "node": true,
+    "mocha": true,
+    "es6": true
+  },
+  "plugins": [
+    "react",
+    "babel"
+  ],
+  "rules": {
+    # Posible errors
+    "no-extra-parens": 0,
+    "valid-jsdoc": [1, { "requireReturn": false }],
+    # Best practices
+    "accessor-pairs": 1,
+    "block-scoped-var": 1,
+    "complexity": 1,
+    "consistent-return": 1,
+    "curly": [1, "multi-line"],
+    "dot-location": [1, "property"],
+    "dot-notation": 1,
+    "eqeqeq": [1, "smart"],
+    "guard-for-in": 1,
+    "no-alert": 1,
+    "no-caller": 2,
+    "no-div-regex": 1,
+    "no-else-return": 1,
+    "no-eq-null": 1,
+    "no-eval": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 1,
+    "no-floating-decimal": 1,
+    "no-implicit-coercion": 1,
+    "no-implied-eval": 1,
+    "no-invalid-this": 0,
+    "babel/no-invalid-this": 1,
+    "no-iterator": 2,
+    "no-labels": 1,
+    "no-lone-blocks": 1,
+    "no-loop-func": 1,
+    "no-magic-numbers": 0,
+    "no-multi-spaces": 1,
+    "no-multi-str": 1,
+    "no-new-func": 1,
+    "no-new-wrappers": 1,
+    "no-new": 1,
+    "no-octal-escape": 2,
+    "no-param-reassign": 1,
+    "no-proto": 1,
+    "no-return-assign": 1,
+    "no-script-url": 1,
+    "no-self-compare": 1,
+    "no-sequences": 1,
+    "no-throw-literal": 1,
+    "no-unused-expressions": 1,
+    "no-unused-vars": 0,
+    "no-useless-call": 1,
+    "no-useless-concat": 1,
+    "no-void": 1,
+    "no-warning-comments": 0,
+    "no-with": 1,
+    "radix": 0,
+    "vars-on-top": 0,
+    "wrap-iife": 1,
+    "yoda": 1,
+    # Variables
+    "init-declarations": 1,
+    "no-catch-shadow": 1,
+    "no-label-var": 1,
+    "no-shadow-restricted-names": 1,
+    "no-shadow": 1,
+    "no-undef-init": 1,
+    "no-undefined": 1,
+    "no-use-before-define": 1,
+    # Stylistic issues
+    "array-bracket-spacing": [1, "never"],
+    "block-spacing": [1, "always"],
+    "brace-style": 1,
+    "camelcase": 1,
+    "comma-dangle": 1,
+    "comma-spacing": 1,
+    "comma-style": 1,
+    "computed-property-spacing": 1,
+    "consistent-this": 1,
+    "eol-last": 1,
+    "func-names": 0,
+    "func-style": 0,
+    "id-length": 0,
+    "id-match": 1,
+    "indent": [1, 2, { "SwitchCase": 1 }],
+    "jsx-quotes": 1,
+    "key-spacing": 1,
+    "line-comment-position": 0,
+    "linebreak-style": 1,
+    "lines-around-comment": 0,
+    "max-depth": 1,
+    "max-len": [1, { "ignoreUrls": true }],
+    "max-nested-callbacks": 1,
+    "max-params": [1, 4],
+    "max-statements": 1,
+    "multiline-ternary": 0,
+    "new-cap": 1,
+    "new-parens": 1,
+    "newline-after-var": 1,
+    "newline-before-return": 1,
+    "no-array-constructor": 1,
+    "no-bitwise": 1,
+    "no-continue": 0,
+    "no-inline-comments": 0,
+    "no-lonely-if": 1,
+    "no-multiple-empty-lines": 1,
+    "no-negated-condition": 1,
+    "no-nested-ternary": 1,
+    "no-new-object": 1,
+    "no-plusplus": 0,
+    "no-restricted-syntax": 1,
+    "no-ternary": 0,
+    "no-trailing-spaces": 1,
+    "no-underscore-dangle": 1,
+    "no-unreachable": 1,
+    "no-unneeded-ternary": 1,
+    "object-curly-spacing": [1, "always"],
+    "object-property-newline": 0,
+    "one-var-declaration-per-line": 0,
+    "one-var": 0,
+    "operator-assignment": 1,
+    "operator-linebreak": [1, "after"],
+    "padded-blocks": [1, "never"],
+    "quote-props": [1, "as-needed"],
+    "quotes": [1, 'single'],
+    "require-jsdoc": 1,
+    "semi-spacing": 1,
+    "semi": 1,
+    "sort-keys": 0,
+    "sort-vars": 0,
+    "space-before-blocks": 1,
+    "space-before-function-paren": [1, "never"],
+    "space-in-parens": 1,
+    "space-infix-ops": 1,
+    "space-unary-ops": 1,
+    "spaced-comment": 1,
+    "wrap-regex": 0,
+    # Other
+    "no-console": 0,
+    "strict": 0,
+    "react/jsx-no-undef": 1,
+    "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 1
+  }
+}

package.json

@@ -9,11 +9,16 @@
   "devDependencies": {
     "babel-cli": "^6.24.1",
     "babel-core": "^6.26.0",
+    "babel-eslint": "^8.2.2",
     "babel-jest": "^22.4.0",
     "babel-loader": "^7.1.2",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-react": "^6.24.1",
+    "eslint": "^4.18.1",
+    "eslint-loader": "^1.9.0",
+    "eslint-plugin-babel": "^4.1.2",
+    "eslint-plugin-react": "^7.7.0",
     "jest": "^22.4.0",
     "path": "^0.12.7",
     "react-dom": "^16.2.0",

src/components/LazyLoadImage.jsx

@@ -7,7 +7,7 @@ class LazyLoadImage extends React.Component {
 
     this.state = {
       visible: false
-    }
+    };
 
     this.previousBoundingBox = {
       bottom: -1,
@@ -78,14 +78,15 @@ class LazyLoadImage extends React.Component {
 
   getPlaceholder() {
     const { className, height, placeholder, width } = this.props;
+
     if (placeholder) {
       return placeholder;
     }
 
     return (
       <span className={'lazy-load-image-placeholder ' + className}
         ref="placeholder"
-        style={{height, width}}>
+        style={{ height, width }}>
       </span>
     );
   }

webpack.config.js

@@ -9,7 +9,13 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(js|jsx)$/,
+        enforce: 'pre',
+        test: /\.jsx?$/,
+        loaders: ['eslint-loader'],
+        include: path.resolve(__dirname, 'src'),
+        exclude: /(node_modules|bower_components|build)/
+      }, {
+        test: /\.jsx?$/,
         include: path.resolve(__dirname, 'src'),
         exclude: /(node_modules|bower_components|build)/,
         use: {