Changes between Version 27 and Version 28 of WebInspectorCodingStyleGuide

Timestamp:

Jun 18, 2020, 1:29:09 PM (5 years ago)

Author:

Devin Rousso

Comment:

--

WebInspectorCodingStyleGuide

@@ -20 +20 @@
 * The `{` after a named, non-inlined function goes on the next line. Anywhere else, the `{` stays on the same line.
 * Style for object literals is: `{key1: value1, key2: value2}`. When key and variable names coincide, use the syntax `{key}` rather than `{key: key}`. If the object is complex enough, each `key: value,` should be on its own line.
+* Always include a trailing comma for object literals.
 * Add new lines before and after different tasks performed in the same function.
 * Else-blocks should share a line with leading `}`.
 * Long promise chains should place `.then()` blocks on a new line.
-* Calling a constructor with no arguments should have no parenthesis `'()'`. (ex: `var map = new Map;`)
+* Calling a constructor with no arguments should have no parenthesis `()`. (ex: `var map = new Map;`)
 * Put anonymous functions inline if they are not used as a subroutine.
 * Prefer `let` to `var`, unless the variable is not used in a block scoping manner. Be careful when using `let` with `case` switches, as [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let#Temporal_dead_zone_and_errors_with_let all switch cases share the same block by default]. Only use `const` for values that will not change between executions (i.e. actual constants).
@@ -41 +42 @@
 
 * Use `Map` and `Set` collections instead of plain objects if the key values are unknown or not monotonic (i.e., frequently added then removed).
-* Use `hsla()` over hex or `rgba` for colors in CSS.
+* Use `hsla()` over hex or `rgba()` for colors in CSS.
 * Use `for..of` syntax when performing actions on each element. Use `forEach` when chaining methods in a functional style. Use a classical for loop when doing index math.
 * When using `forEach` or `map`, use an arrow function or supply the `this`-object as the optional second parameter rather than binding it.
@@ -94 +95 @@
 3   let foo = (val) => val;
 4   let foo = (val) => { return value++; }
-5   let foo = function doStuff(val) { return value++; }
+5   let foo = (val) => {
+        return value++;
+    };
+6   let foo = function doStuff(val) { return value++; }
+7   let foo = function doStuff(val) {
+        return value++;
+    }
 }}}
 
@@ -103 +110 @@
 In cases where the expression computes a value (a + 42) or performs a side effect (++a), prefer option (4).
 In some sense, curly braces are a signpost to the effect of "careful, we do actual work here".
+
+If the implicit return is not used (4, 5, 6, 7), always put the function body on new lines from the `{` and `}` (as demonstrated in 5 and 7).
 
 GOOD: