add eslint examples

threejs/lessons/threejs-prerequisites.md

@@ -58,7 +58,7 @@ outdated
 
 ## Always use `strict` mode
 
-Put `'use strict';` at the top of every JavaScript file.
+Put `'use strict';` at the top of every JavaScript file. It will help prevent lots of bugs.
 
 ## Know how closures work
 
@@ -115,7 +115,7 @@ tell JavaScript that by binding it to the function.
 
 There is no reason to use `var` **EVER** and at this point it's considered bad practice
 to use it at all. Use `const` if the variable will never be reassigned which is most of
-the time. Use `let` in those cases where the value changes.
+the time. Use `let` in those cases where the value changes. This will help avoid tons of bugs.
 
 ### Use `for(elem of collection)` never `for(elem in collection)`
 
@@ -281,14 +281,41 @@ const bWidth = 20;
 someElement.style.width = `${aWidth + bWidth}px`;
 ```
 
+# Learn JavaScript coding convensions.
+
+While you're welcome to format your code any way you chose there is at least one convension you should be aware of. Variables, function names, method names, in JavaScript are all lowercasedCamelCase. Constructors, the names of classes are CapitalizedCamelCase. If you follow this rule you code will match most other JavaScript.
+
 # Consider using Visual Studio Code
 
 Of course use whatever editor you want but if you haven't tried it consider using [Visual Studio Code](https://code.visualstudio.com/)
 for JavaScript and after installing it [setup eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint).
 It might take a few minutes to setup but it will help you immensely with finding bugs in your JavaScript.
 
-As a simple example if you enable [the `no-undef` rule](https://eslint.org/docs/rules/no-undef) then VSCode via ESLint will
-warn you of many undefined variables. You'll get warnings using `THREE` so add `/* global THREE */` at the top of your JavaScript files.
+Some examples
+
+If you enable [the `no-undef` rule](https://eslint.org/docs/rules/no-undef) then VSCode via ESLint will warn you of many undefined variables. 
+
+<div class="threejs_center"><img style="width: 615px;" src="resources/images/vscode-eslint-not-defined.png"></div>
+
+Above you can see I mis-spelled `doTheThing` as `doThing`. There's a red squigle under `doThing` and hovering over it it tells me it's undefined. One error avoided.
+
+You'll get warnings using `THREE` so add `/* global THREE */` at the top of your JavaScript files to tell eslint that `THREE` exists.
+
+<div class="threejs_center"><img style="width: 615px;" src="resources/images/vscode-eslint-not-a-constructor.png"></div>
+
+Above you can see eslint knows the rule that `UpperCaseNames` are constructors and so you should be using `new`. Another error caught and avoided. This is [the `new-cap` rule](https://eslint.org/docs/rules/new-cap).
+
+There's 100s of rules you can turn on or off or customize. For example above I mentioned you should use `const` and `let` over `var`.
+
+Here I used `var` and it warned me I should use `let` or `const`
+
+<div class="threejs_center"><img style="width: 615px;" src="resources/images/vscode-eslint-var.png"></div>
+
+Here I used `let` but it saw I never change the value so it suggested I use `const`.
+
+<div class="threejs_center"><img style="width: 615px;" src="resources/images/vscode-eslint-let.png"></div>
+
+For those cases where you really need to override a rule [you can add comments to disable them](https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments) for a single line or a section of code.
 
 # If you really need to support legacy browsers use a transpiler