Merge pull request #76 from serjxupypr/master

added es-lint
justcoded · Jan 10, 2019 · e1d371b · e1d371b
2 parents 7bdeb34 + 8b834cd
commit e1d371b
Show file tree

Hide file tree

Showing 11 changed files with 70 additions and 76 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,3 @@
+# ignore src external js folders
+/node_modules
+/src/js/external_modules
diff --git a/.eslintrc b/.eslintrc
@@ -1,11 +1,14 @@
 {
-  "parser": "babel-eslint",
   "globals": {
-    "jQuery": true
+    "jQuery": true,
+    "$": true
   },
   "env": {
     "browser": true,
     "node": true
   },
-  "extends": "eslint:recommended"
+  "extends": "airbnb-base",
+  "rules": {
+
+  }
 }
diff --git a/README.md b/README.md
@@ -44,7 +44,7 @@ This is not to say that Web Starter Kit cannot be used in browsers older than th
 | Easy start |  We don't use responsive boilerplate. You are free to make your own decision in what way to make responsive for the site. Just start with `index.html`.                          |
 | Sass support                           | Compile [Sass](http://sass-lang.com/) into CSS with ease, bringing support for variables, mixins and more (Run `gulp` for project compiling). In our WSK we follow Sass [guidelines](https://sass-guidelin.es/#architecture).                                                                                                      |
 | Performance optimization               | Minify and concatenate JavaScript, CSS, HTML and images to help keep your pages lean (Run `gulp` to create an optimised version of your project to `/assets`).                                                                                                |
-| Code Hinting               | JavaScript code hinting is done using [JsHint](https://www.npmjs.com/package/gulp-jshint) - a hinter tool for identifying and reporting on patterns in JavaScript. HTML code hinting is done using [HtmlHint](https://www.npmjs.com/package/gulp-htmlhint).                                                                                             |
+| Code Linting               | JavaScript code linting is done using [esLint](https://www.npmjs.com/package/gulp-eslint) - a linter tool for identifying and reporting on patterns in JavaScript (used airbnb-base rules https://www.npmjs.com/package/eslint-config-airbnb-base). HTML code hinting is done using [HtmlHint](https://www.npmjs.com/package/gulp-htmlhint).                                                                                             |
 | ES2015(ES6) Support                   | Optional ES2015 support .You can use all kind of ES6 features here. ES2015 source code will be automatically transpiled to ES5 for wide browser support.  |
 | Built-in HTTP Server                   | A built-in server for previewing your site locally while you develop and iterate.                                                                                                                                                                            |
 | Live Browser Reloading                 | Reload the browser in real-time anytime an edit is made without the need for an extension (Run `gulp` and edit your files).                                                                                                                           |
@@ -275,7 +275,7 @@ Also, you might want to add these sass files to the ignore list (check `getPathe
 | copy-folders           | Need to copy all folders from sources to assets.                       |
 | templates           | Compiles all pug files into html files.                       |
 | html-hint           | Need to hint html files.                    |
-| js-hint           | Need to hint js files.                      |
+| es-lint           | Need to lint js files.                      |
 | image-clean           | Removing images.                    |
 | image-min           | We use this to minify images.                    |
 | watch           | Task for watching all the changes.                   |

diff --git a/gulp-config.js b/gulp-config.js
@@ -17,7 +17,7 @@ module.exports = {
   },
   task: {
     htmlHint: 'html-hint',
-    jsHint: 'js-hint',
+    esLint: 'es-lint',
     buildCustomJs: 'build-custom-js',
     buildJsVendors: 'build-js-vendors',
     buildSass: 'build-sass',

diff --git a/gulpfile.js b/gulpfile.js
@@ -71,9 +71,10 @@
   requireTask(`${cfg.task.htmlHint}`, `./${cfg.folder.tasks}/`);
 
   /**
-   * Hint JS
+   * Lint ES
    */
-  requireTask(`${cfg.task.jsHint}`, `./${cfg.folder.tasks}/`, {
+
+  requireTask(`${cfg.task.esLint}`, `./${cfg.folder.tasks}/`, {
     src: cfg.folder.src
   });
 
@@ -213,11 +214,11 @@
       buildSassFiles: cfg.task.buildSassFiles,
       buildCustomJs: cfg.task.buildCustomJs,
       buildSass: cfg.task.buildSass,
-      jsHint: cfg.task.jsHint,
+      esLint: cfg.task.esLint,
       htmlHint: cfg.task.htmlHint,
       imageMin: cfg.task.imageMin
     }
-  });
+  }, false);
 
   /**
    * Default Gulp task
@@ -231,7 +232,7 @@
       cfg.task.buildSassFiles,
       cfg.task.buildStylesVendors,
       cfg.task.htmlHint,
-      cfg.task.jsHint,
+      cfg.task.esLint,
       cfg.task.imageMin
     ),
     cfg.task.copyFolders,
@@ -253,7 +254,6 @@
       cfg.task.buildSassFiles,
       cfg.task.buildStylesVendors,
       cfg.task.htmlHint,
-      cfg.task.jsHint,
       cfg.task.imageMin
     ),
     cfg.task.copyFolders,
@@ -275,12 +275,12 @@
       cfg.task.buildSassFiles,
       cfg.task.buildStylesVendors,
       cfg.task.htmlHint,
-      cfg.task.jsHint,
+      cfg.task.esLint,
       cfg.task.imageMin
     ),
     cfg.task.copyFolders,
     cfg.task.copyFoldersProduction
-  ));
+  ), true);
 
   /**
    * Remove image(s) from build folder if corresponding

diff --git a/package.json b/package.json
@@ -24,6 +24,10 @@
     "browser-sync": "^2.18.0",
     "browserify": "^14.0.0",
     "del": "^3.0.0",
+    "gulp-eslint": "^5.0.0",
+    "eslint": "^5.11.1",
+    "eslint-config-airbnb-base": "^13.1.0",
+    "eslint-plugin-import": "^2.14.0",
     "files-exist": "^1.0.2",
     "gulp": "^4.0.0",
     "gulp-autoprefixer": "^4.0.0",
@@ -35,7 +39,6 @@
     "gulp-htmlhint": "^0.3.1",
     "gulp-if": "^2.0.2",
     "gulp-imagemin": "^4.1.0",
-    "gulp-jshint": "^2.0.4",
     "gulp-newer": "^1.3.0",
     "gulp-notify": "^3.0.0",
     "gulp-rename": "^1.2.2",
@@ -45,7 +48,6 @@
     "gulp-util": "^3.0.8",
     "htmlhint-stylish": "^1.0.3",
     "imagemin-pngquant": "^5.0.0",
-    "jshint": "^2.9.4",
     "node-notifier": "^5.0.2",
     "path": "^0.12.7",
     "vinyl-buffer": "^1.0.0",

diff --git a/src/js/app.js b/src/js/app.js
@@ -5,12 +5,9 @@
 
 import DE from './modules/dots';
 
-( ($) => {
-  'use strict';
-
+(($) => {
   // When DOM is ready
   $(() => {
     DE.dotsEffect();
   });
-
-})(jQuery);
+})(jQuery);
diff --git a/src/js/modules/dots.js b/src/js/modules/dots.js
@@ -2,28 +2,28 @@
 //
 // You can remove or add your own function in this file.
 
-var DE = {
-  dotsEffect: function() {
-    var $cnt  = $('#home-canvas'),
-        cells = createCells();
-
-    $cnt.html(cells);
-
+const DE = {
+  dotsEffect() {
     function createCells() {
-      var width  = 10,
-          height = 10,
-          size   = width * height,
-          html   = '<div class="entry-cells">';
+      const width = 10;
+      const height = 10;
+      const size = width * height;
+      let html = '<div class="entry-cells">';
 
-      for (var i = 0; i < size; i++) {
-        html += '<div class="cell cell-' + i + '"></div>';
+      for (let i = 0; i < size; i += 1) {
+        html += `<div class="cell cell-${i}"></div>`;
       }
 
       html += '</div>';
 
       return html;
     }
-  }
+
+    const $cnt = $('#home-canvas');
+    const cells = createCells();
+
+    $cnt.html(cells);
+  },
 };
 
-export default DE;
+export default DE;
diff --git a/tasks/es-lint.js b/tasks/es-lint.js
@@ -0,0 +1,28 @@
+/**
+ * Lint ES
+ */
+'use strict';
+
+const gulp   = require('gulp'),
+      esLint = require('gulp-eslint');
+
+module.exports = function(options) {
+
+  return cb => {
+    gulp.src(`./${options.src}/js/**/*.js`)
+      .pipe(esLint())
+      // eslint.format() outputs the lint results to the console.
+      // Alternatively use eslint.formatEach() (see Docs).
+      .pipe(esLint.format())
+
+      ;
+
+      // To have the process exit with an error code (1) on
+      // lint error, return the stream and pipe to failAfterError last.
+
+      // .pipe(esLint.failAfterError());
+
+    cb();
+  };
+
+};
diff --git a/tasks/js-hint.js b/tasks/js-hint.js
diff --git a/tasks/watch.js b/tasks/watch.js
@@ -9,7 +9,7 @@ module.exports = function (options) {
   const { files } = options.sassFilesInfo;
 
   return () => {
-    gulp.watch(`./${options.src}/js/**/*`, gulp.series(options.tasks.buildCustomJs, options.tasks.jsHint));
+    gulp.watch(`./${options.src}/js/**/*`, gulp.series(options.tasks.buildCustomJs, options.tasks.esLint));
 
     gulp.watch(`./${options.src}/scss/**/*`, gulp.series(options.tasks.buildSass));