change lint to use .eslintrc.json

Gruntfile.js

@@ -1,6 +1,7 @@
-"use strict";
+/*eslint-env node*/
+
+'use strict';
 
-const path = require('path');
 const fs = require('fs');
 
 module.exports = function(grunt) {
@@ -27,7 +28,7 @@ module.exports = function(grunt) {
           'threejs/resources/*.js',
         ],
         options: {
-          configFile: 'build/conf/eslint.json',
+          //configFile: 'build/conf/eslint.json',
           //rulesdir: ['build/rules'],
         },
       },
@@ -39,7 +40,7 @@ module.exports = function(grunt) {
           'threejs/lessons/resources/*.html',
         ],
         options: {
-          configFile: 'build/conf/eslint-examples.json',
+//          configFile: 'build/conf/eslint-examples.json',
         },
       },
     },

build/conf/eslint.json

@@ -1,86 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es6": true
-  },
-  "plugins": [
-    "eslint-plugin-html",
-    "eslint-plugin-optional-comma-spacing",
-    "eslint-plugin-one-variable-per-var",
-    "eslint-plugin-require-trailing-comma"
-  ],
-  "extends": "eslint:recommended",
-  "rules": {
-    "no-alert": 2,
-    "no-array-constructor": 2,
-    "no-caller": 2,
-    "no-catch-shadow": 2,
-    "no-const-assign": 2,
-    "no-labels": 2,
-    "no-eval": 2,
-    "no-extend-native": 2,
-    "no-extra-bind": 2,
-    "no-implied-eval": 2,
-    "no-iterator": 2,
-    "no-label-var": 2,
-    "no-labels": 2,
-    "no-lone-blocks": 2,
-    "no-loop-func": 2,
-    "no-multi-str": 2,
-    "no-native-reassign": 2,
-    "no-new": 2,
-    "no-new-func": 2,
-    "no-new-object": 2,
-    "no-new-wrappers": 2,
-    "no-octal-escape": 2,
-    "no-process-exit": 2,
-    "no-proto": 2,
-    "no-return-assign": 2,
-    "no-script-url": 2,
-    "no-sequences": 2,
-    "no-shadow-restricted-names": 2,
-    "no-spaced-func": 2,
-    "no-trailing-spaces": 2,
-    "no-undef-init": 2,
-    "no-underscore-dangle": 2,
-    "no-unused-expressions": 2,
-    "no-use-before-define": 0,
-    "no-with": 2,
-    "consistent-return": 2,
-    "curly": [2, "all"],
-    "no-extra-parens": [2, "functions"],
-    "eqeqeq": 2,
-    "new-cap": 2,
-    "new-parens": 2,
-    "semi-spacing": [2, {"before": false, "after": true}],
-    "space-infix-ops": 2,
-    "space-unary-ops": [2, { "words": true, "nonwords": false }],
-    "strict": [2, "function"],
-    "yoda": [2, "never"],
-
-    "brace-style": [2, "1tbs", { "allowSingleLine": false }],
-    "camelcase": [0],
-    "comma-spacing": 0,
-    "comma-dangle": 0,
-    "comma-style": [2, "last"],
-    "dot-notation": 0,
-    "eol-last": [0],
-    "global-strict": [0],
-    "key-spacing": [0],
-    "no-comma-dangle": [0],
-    "no-irregular-whitespace": 2,
-    "no-multi-spaces": [0],
-    "no-obj-calls": 2,
-    "no-shadow": [0],
-    "no-undef": [2],
-    "no-unreachable": 2,
-    "one-variable-per-var/one-variable-per-var": [2],
-    "optional-comma-spacing/optional-comma-spacing": [2, {"after": true}],
-    "quotes": [0, "single"],
-    "require-trailing-comma/require-trailing-comma": [2],
-    "semi": [2, "always"],
-    "space-before-function-paren": [2, "never"],
-    "keyword-spacing": [1, {"before": true, "after": true, "overrides": {}} ]
-  }
-
-}

threejs/resources/editor.js

@@ -1,5 +1,5 @@
-(function() {
-"use strict";
+(function() {  // eslint-disable-line
+'use strict';  // eslint-disable-line
 
 /* global monaco, require */
 
@@ -25,7 +25,7 @@ function getSearch(url) {
 }
 
 const getFQUrl = (function() {
-  const a = document.createElement("a");
+  const a = document.createElement('a');
   return function getFQUrl(url) {
     a.href = url;
     return a.href;
@@ -34,18 +34,18 @@ const getFQUrl = (function() {
 
 function getHTML(url, callback) {
   var req = new XMLHttpRequest();
-  req.open("GET", url, true);
+  req.open('GET', url, true);
   req.addEventListener('load', function() {
     var success = req.status === 200 || req.status === 0;
     callback(success ? null : 'could not load: ' + url, req.responseText);
   });
   req.addEventListener('timeout', function() {
-    callback("timeout get: " + url);
+    callback('timeout get: ' + url);
   });
   req.addEventListener('error', function() {
-    callback("error getting: " + url);
+    callback('error getting: ' + url);
   });
-  req.send("");
+  req.send('');
 }
 
 function fixSourceLinks(url, source) {
@@ -58,7 +58,7 @@ function fixSourceLinks(url, source) {
   var prefix = u.origin + dirname(u.pathname);
 
   function addPrefix(url) {
-    return url.indexOf("://") < 0 ? (prefix + url) : url;
+    return url.indexOf('://') < 0 ? (prefix + url) : url;
   }
   function makeLinkFQed(match, p1, url) {
     return p1 + '"' + addPrefix(url) + '"';
@@ -150,14 +150,14 @@ function parseHTML(url, html) {
   htmlParts.html.source += scripts + '\n';
 
   // add style section if there is non
-  if (html.indexOf("${css}") < 0) {
-    html = html.replace("</head>", "<style>\n${css}</style>\n</head>");
+  if (html.indexOf('${css}') < 0) {
+    html = html.replace('</head>', '<style>\n${css}</style>\n</head>');
   }
 
   // add hackedparams section.
   // We need a way to pass parameters to a blob. Normally they'd be passed as
   // query params but that only works in Firefox >:(
-  html = html.replace("</head>", '<script id="hackedparams">window.hackedParams = ${hackedParams}\n</script>\n</head>');
+  html = html.replace('</head>', '<script id="hackedparams">window.hackedParams = ${hackedParams}\n</script>\n</head>');
 
   var links = '';
   html = html.replace(cssLinkRE, function(p0, p1) {
@@ -194,7 +194,7 @@ function main() {
     parseHTML(query.url, html);
     setupEditor(query.url);
     if (query.startPane) {
-      const button = document.querySelector(".button-" + query.startPane);
+      const button = document.querySelector('.button-' + query.startPane);
       toggleSourcePane(button);
     }
   });
@@ -208,11 +208,11 @@ function getSourceBlob(options) {
     URL.revokeObjectURL(blobUrl);
   }
   var source = g.html;
-  source = source.replace("${hackedParams}", JSON.stringify(g.query));
+  source = source.replace('${hackedParams}', JSON.stringify(g.query));
   source = source.replace('${html}', htmlParts.html.editor.getValue());
   source = source.replace('${css}', htmlParts.css.editor.getValue());
   source = source.replace('${js}', htmlParts.js.editor.getValue());
-  source = source.replace('<head>', '<head>\n<script match="false">threejsLessonSettings = ' + JSON.stringify(options) + ";</script>");
+  source = source.replace('<head>', '<head>\n<script match="false">threejsLessonSettings = ' + JSON.stringify(options) + ';</script>');
 
   var scriptNdx = source.indexOf('<script>');
   g.numLinesBeforeScript = (source.substring(0, scriptNdx).match(/\n/g) || []).length;
@@ -223,7 +223,7 @@ function getSourceBlob(options) {
 }
 
 function dirname(path) {
-  var ndx = path.lastIndexOf("/");
+  var ndx = path.lastIndexOf('/');
   return path.substring(0, ndx + 1);
 }
 
@@ -245,24 +245,24 @@ function openInCodepen() {
   `;
   const pen = {
     title                 : g.title,
-    description           : "from: " + g.url,
-    tags                  : ["three.js", "threejsfundamentals.org"],
-    editors               : "101",
+    description           : 'from: ' + g.url,
+    tags                  : ['three.js', 'threejsfundamentals.org'],
+    editors               : '101',
     html                  : htmlParts.html.editor.getValue().replace(lessonHelperScriptRE, ''),
     css                   : htmlParts.css.editor.getValue(),
     js                    : comment + addCORSSupport(htmlParts.js.editor.getValue()),
   };
 
-  const elem = document.createElement("div");
+  const elem = document.createElement('div');
   elem.innerHTML = `
     <form method="POST" target="_blank" action="https://codepen.io/pen/define" class="hidden">'
       <input type="hidden" name="data">
       <input type="submit" />
     "</form>"
   `;
-  elem.querySelector("input[name=data]").value = JSON.stringify(pen);
+  elem.querySelector('input[name=data]').value = JSON.stringify(pen);
   window.frameElement.ownerDocument.body.appendChild(elem);
-  elem.querySelector("form").submit();
+  elem.querySelector('form').submit();
   window.frameElement.ownerDocument.body.removeChild(elem);
 }
 
@@ -281,7 +281,7 @@ function openInJSFiddle() {
   //   js                    : comment + htmlParts.js.editor.getValue(),
   // };
 
-  const elem = document.createElement("div");
+  const elem = document.createElement('div');
   elem.innerHTML = `
     <form method="POST" target="_black" action="https://jsfiddle.net/api/mdn/" class="hidden">
       <input type="hidden" name="html" />
@@ -292,46 +292,46 @@ function openInJSFiddle() {
       <input type="submit" />
     </form>
   `;
-  elem.querySelector("input[name=html]").value = htmlParts.html.editor.getValue().replace(lessonHelperScriptRE, '');
-  elem.querySelector("input[name=css]").value = htmlParts.css.editor.getValue();
-  elem.querySelector("input[name=js]").value = comment + addCORSSupport(htmlParts.js.editor.getValue());
-  elem.querySelector("input[name=title]").value = g.title;
+  elem.querySelector('input[name=html]').value = htmlParts.html.editor.getValue().replace(lessonHelperScriptRE, '');
+  elem.querySelector('input[name=css]').value = htmlParts.css.editor.getValue();
+  elem.querySelector('input[name=js]').value = comment + addCORSSupport(htmlParts.js.editor.getValue());
+  elem.querySelector('input[name=title]').value = g.title;
   window.frameElement.ownerDocument.body.appendChild(elem);
-  elem.querySelector("form").submit();
+  elem.querySelector('form').submit();
   window.frameElement.ownerDocument.body.removeChild(elem);
 }
 
 function setupEditor() {
 
   forEachHTMLPart(function(info, ndx, name) {
-    info.parent = document.querySelector(".panes>." + name);
+    info.parent = document.querySelector('.panes>.' + name);
     info.editor = runEditor(info.parent, info.source, info.language);
-    info.button = document.querySelector(".button-" + name);
+    info.button = document.querySelector('.button-' + name);
     info.button.addEventListener('click', function() {
       toggleSourcePane(info.button);
       run();
     });
   });
 
-  g.fullscreen = document.querySelector(".button-fullscreen");
+  g.fullscreen = document.querySelector('.button-fullscreen');
   g.fullscreen.addEventListener('click', toggleFullscreen);
 
-  g.run = document.querySelector(".button-run");
+  g.run = document.querySelector('.button-run');
   g.run.addEventListener('click', run);
 
-  g.iframe = document.querySelector(".result>iframe");
-  g.other = document.querySelector(".panes .other");
+  g.iframe = document.querySelector('.result>iframe');
+  g.other = document.querySelector('.panes .other');
 
-  document.querySelector(".button-codepen").addEventListener('click', openInCodepen);
-  document.querySelector(".button-jsfiddle").addEventListener('click', openInJSFiddle);
+  document.querySelector('.button-codepen').addEventListener('click', openInCodepen);
+  document.querySelector('.button-jsfiddle').addEventListener('click', openInJSFiddle);
 
-  g.result = document.querySelector(".panes .result");
-  g.resultButton = document.querySelector(".button-result");
+  g.result = document.querySelector('.panes .result');
+  g.resultButton = document.querySelector('.button-result');
   g.resultButton.addEventListener('click', function() {
      toggleResultPane();
      run();
   });
-  g.result.style.display = "none";
+  g.result.style.display = 'none';
   toggleResultPane();
 
   if (window.innerWidth > 1200) {
@@ -341,7 +341,7 @@ function setupEditor() {
   window.addEventListener('resize', resize);
 
   showOtherIfAllPanesOff();
-  document.querySelector(".other .loading").style.display = "none";
+  document.querySelector('.other .loading').style.display = 'none';
 
   resize();
   run({glDebug: false});
@@ -364,14 +364,14 @@ function run(options) {
 }
 
 function addClass(elem, className) {
-  var parts = elem.className.split(" ");
+  var parts = elem.className.split(' ');
   if (parts.indexOf(className) < 0) {
-    elem.className = elem.className + " " + className;
+    elem.className = elem.className + ' ' + className;
   }
 }
 
 function removeClass(elem, className) {
-  var parts = elem.className.split(" ");
+  var parts = elem.className.split(' ');
   var numParts = parts.length;
   for (;;) {
     var ndx = parts.indexOf(className);
@@ -381,7 +381,7 @@ function removeClass(elem, className) {
     parts.splice(ndx, 1);
   }
   if (parts.length !== numParts) {
-    elem.className = parts.join(" ");
+    elem.className = parts.join(' ');
     return true;
   }
   return false;
@@ -399,8 +399,8 @@ function toggleClass(elem, className) {
 function toggleIFrameFullscreen(childWindow) {
   const frame = childWindow.frameElement;
   if (frame) {
-    const isFullScreen = toggleClass(frame, "fullscreen");
-    frame.ownerDocument.body.style.overflow = isFullScreen ? "hidden" : "";
+    const isFullScreen = toggleClass(frame, 'fullscreen');
+    frame.ownerDocument.body.style.overflow = isFullScreen ? 'hidden' : '';
   }
 }
 
@@ -417,12 +417,12 @@ function toggleSourcePane(pressedButton) {
   forEachHTMLPart(function(info) {
     var pressed = pressedButton === info.button;
     if (pressed && !info.showing) {
-      addClass(info.button, "show");
-      info.parent.style.display = "block";
+      addClass(info.button, 'show');
+      info.parent.style.display = 'block';
       info.showing = true;
     } else {
-      removeClass(info.button, "show");
-      info.parent.style.display = "none";
+      removeClass(info.button, 'show');
+      info.parent.style.display = 'none';
       info.showing = false;
     }
   });
@@ -431,12 +431,12 @@ function toggleSourcePane(pressedButton) {
 }
 
 function showingResultPane() {
-  return g.result.style.display !== "none";
+  return g.result.style.display !== 'none';
 }
 function toggleResultPane() {
   var showing = showingResultPane();
-  g.result.style.display = showing ? "none" : "block";
-  addRemoveClass(g.resultButton, "show", !showing);
+  g.result.style.display = showing ? 'none' : 'block';
+  addRemoveClass(g.resultButton, 'show', !showing);
   showOtherIfAllPanesOff();
   resize();
 }
@@ -446,7 +446,7 @@ function showOtherIfAllPanesOff() {
   forEachHTMLPart(function(info) {
     paneOn = paneOn || info.showing;
   });
-  g.other.style.display = paneOn ? "none" : "block";
+  g.other.style.display = paneOn ? 'none' : 'block';
 }
 
 function getActualLineNumberAndMoveTo(lineNo, colNo) {

threejs/resources/threejs-lessons-helper.js

@@ -42,7 +42,7 @@
     root.threejsLessonsHelper = factory.call(root);
   }
 }(this, function() {
-  "use strict";
+  'use strict';  // eslint-disable-line
 
   var topWindow = this;
 
@@ -59,12 +59,12 @@
   function updateCSSIfInIFrame() {
     if (isInIFrame()) {
       try {
-        document.getElementsByTagName("html")[0].className = "iframe";
+        document.getElementsByTagName('html')[0].className = 'iframe';
       } catch (e) {
         // eslint-disable-line
       }
       try {
-        document.body.className = "iframe";
+        document.body.className = 'iframe';
       } catch (e) {
         // eslint-disable-line
       }
@@ -72,7 +72,7 @@
   }
 
   function isInEditor() {
-    return window.location.href.substring(0, 4) === "blob";
+    return window.location.href.substring(0, 4) === 'blob';
   }
 
   /**
@@ -89,7 +89,7 @@
   function showNeedWebGL(canvas) {
     var doc = canvas.ownerDocument;
     if (doc) {
-      var div = doc.createElement("div");
+      var div = doc.createElement('div');
       div.innerHTML = `
         <div style="
            position: absolute;
@@ -110,7 +110,7 @@
           </div>
         </div>
       `;
-      div = div.querySelector("div");
+      div = div.querySelector('div');
       doc.body.appendChild(div);
     }
   }
@@ -118,8 +118,8 @@
   var origConsole = {};
 
   function setupConsole() {
-    var parent = document.createElement("div");
-    parent.className = "console";
+    var parent = document.createElement('div');
+    parent.className = 'console';
     Object.assign(parent.style, {
       fontFamily: 'monospace',
       fontSize: 'medium',
@@ -135,7 +135,7 @@
     var added = false;
 
     function addLine(type, str) {
-      var div = document.createElement("div");
+      var div = document.createElement('div');
       div.textContent = str;
       div.className = type;
       parent.appendChild(div);
@@ -181,8 +181,8 @@
           // the default is to do nothing. Preventing the default
           // means allowing context to be restored
           e.preventDefault();
-          var div = document.createElement("div");
-          div.className = "contextlost";
+          var div = document.createElement('div');
+          div.className = 'contextlost';
           div.innerHTML = '<div>Context Lost: Click To Reload</div>';
           div.addEventListener('click', function() {
               window.location.reload();
@@ -210,7 +210,7 @@
     if (!isInIFrame(window)) {
       return;
     }
-    var iframes = window.parent.document.getElementsByTagName("iframe");
+    var iframes = window.parent.document.getElementsByTagName('iframe');
     for (var ii = 0; ii < iframes.length; ++ii) {
       var iframe = iframes[ii];
       if (iframe.contentDocument === window.document) {
@@ -599,8 +599,8 @@
    */
   function glEnumToString(value) {
     var name = glEnums[value];
-    return (name !== undefined) ? ("gl." + name) :
-        ("/*UNKNOWN WebGL ENUM*/ 0x" + value.toString(16) + "");
+    return (name !== undefined) ? ('gl.' + name) :
+        ('/*UNKNOWN WebGL ENUM*/ 0x' + value.toString(16) + '');
   }
 
   /**
@@ -628,9 +628,9 @@
       }
     }
     if (value === null) {
-      return "null";
+      return 'null';
     } else if (value === undefined) {
-      return "undefined";
+      return 'undefined';
     } else {
       return value.toString();
     }
@@ -651,7 +651,7 @@
     for (var ii = 0; ii < numArgs; ++ii) {
       argStrs.push(glFunctionArgToString(functionName, numArgs, ii, args[ii]));
     }
-    return argStrs.join(", ");
+    return argStrs.join(', ');
   }
 
   function makePropertyWrapper(wrapper, original, propertyName) {
@@ -694,7 +694,7 @@
 
     var errorFunc = options.errorFunc || function(err, functionName, args) {
       console.error("WebGL error " + glEnumToString(err) + " in " + functionName +  // eslint-disable-line
-          "(" + glFunctionArgsToString(functionName, args) + ")");
+          '(' + glFunctionArgsToString(functionName, args) + ')');
     };
 
     // Holds booleans for each GL error so after we get the error ourselves
@@ -791,8 +791,8 @@
     }
 
     if (wrapper.bindBuffer) {
-      sharedState.wrappers["webgl"] = { wrapper: wrapper, orig: ctx };
-      addEnumsForContext(ctx, ctx.bindBufferBase ? "WebGL2" : "WebGL");
+      sharedState.wrappers['webgl'] = { wrapper: wrapper, orig: ctx };
+      addEnumsForContext(ctx, ctx.bindBufferBase ? 'WebGL2' : 'WebGL');
     }
 
     return wrapper;
@@ -885,7 +885,7 @@
                 var str = glFunctionArgToString(funcName, numArgs, ndx, arg);
                 // shorten because of long arrays
                 if (str.length > 200) {
-                  str = str.substring(0, 200) + "...";
+                  str = str.substring(0, 200) + '...';
                 }
                 return str;
               });
@@ -937,7 +937,7 @@
               if (matcher) {
                 try {
                   var error = new Error();
-                  var lines = error.stack.split("\n");
+                  var lines = error.stack.split('\n');
                   // window.fooLines = lines;
                   // lines.forEach(function(line, ndx) {
                   //   origConsole.log("#", ndx, line);
@@ -959,8 +959,8 @@
               }
 
               console.error(  // eslint-disable-line
-                  "WebGL error" + lineInfo, glEnumToString(err), "in",
-                  funcName, "(", enumedArgs.join(", "), ")");
+                  'WebGL error' + lineInfo, glEnumToString(err), 'in',
+                  funcName, '(', enumedArgs.join(', '), ')');
 
             },
           });