Issue #2771429 by martin107, Mile23: Add .eslintrc, lint JS errors

Author: martin107

.eslintrc

@@ -0,0 +1,95 @@
+{
+  "extends": "eslint:recommended",
+  "env": {
+    "browser": true
+  },
+  "globals": {
+    "Drupal": true,
+    "drupalSettings": true,
+    "drupalTranslations": true,
+    "domready": true,
+    "jQuery": true,
+    "_": true,
+    "matchMedia": true,
+    "Backbone": true,
+    "Modernizr": true,
+    "CKEDITOR": true
+  },
+  "rules": {
+    // Errors.
+    "array-bracket-spacing": [2, "never"],
+    "block-scoped-var": 2,
+    "brace-style": [2, "stroustrup", {"allowSingleLine": true}],
+    "comma-dangle": [2, "never"],
+    "comma-spacing": 2,
+    "comma-style": [2, "last"],
+    "computed-property-spacing": [2, "never"],
+    "curly": [2, "all"],
+    "eol-last": 2,
+    "eqeqeq": [2, "smart"],
+    "guard-for-in": 2,
+    "indent": [2, 2, {"SwitchCase": 1}],
+    "key-spacing": [2, {"beforeColon": false, "afterColon": true}],
+    "keyword-spacing": [2, {"before": true, "after": true}],
+    "linebreak-style": [2, "unix"],
+    "lines-around-comment": [2, {"beforeBlockComment": true, "afterBlockComment": false}],
+    "new-parens": 2,
+    "no-array-constructor": 2,
+    "no-caller": 2,
+    "no-catch-shadow": 2,
+    "no-eval": 2,
+    "no-extend-native": 2,
+    "no-extra-bind": 2,
+    "no-extra-parens": [2, "functions"],
+    "no-implied-eval": 2,
+    "no-iterator": 2,
+    "no-label-var": 2,
+    "no-labels": 2,
+    "no-lone-blocks": 2,
+    "no-loop-func": 2,
+    "no-multi-spaces": 2,
+    "no-multi-str": 2,
+    "no-native-reassign": 2,
+    "no-nested-ternary": 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-undefined": 2,
+    "no-unused-expressions": 2,
+    "no-unused-vars": [2, {"vars": "all", "args": "none"}],
+    "no-with": 2,
+    "object-curly-spacing": [2, "never"],
+    "one-var": [2, "never"],
+    "quote-props": [2, "consistent-as-needed"],
+    "quotes": [2, "single", "avoid-escape"],
+    "semi": [2, "always"],
+    "semi-spacing": [2, {"before": false, "after": true}],
+    "space-before-blocks": [2, "always"],
+    "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}],
+    "space-in-parens": [2, "never"],
+    "space-infix-ops": 2,
+    "space-unary-ops": [2, { "words": true, "nonwords": false }],
+    "spaced-comment": [2, "always"],
+    "strict": 2,
+    "yoda": [2, "never"],
+    // Warnings.
+    "max-nested-callbacks": [1, 3],
+    "valid-jsdoc": [1, {
+      "prefer": {
+        "returns": "return",
+        "property": "prop"
+      },
+      "requireReturn": false
+    }]
+  }
+}

STANDARDS.md

@@ -1,7 +1,10 @@
 HOWTO: Drupal Examples For Developers Coding Standards
 =======================================================
 
-Examples uses the same coding standards as Drupal core.
+Examples uses mostly the same coding standards as Drupal core.
+
+Examples uses the phpcs tool to allow for checking PHP coding standards. We also
+use eslint for JavaScript coding standards.
 
 Examples has a `phpcs.xml.dist` file at the root of the project. This file
 specifies the current coding standards 'sniffs' which code in the project must
@@ -59,3 +62,21 @@ Always look at the changes to see what `phpcbf` did.
 
 And always re-run `phpcs` in order to discover whether `phpcbf` handled all the
 errors.
+
+Installing eslint
+-----------------
+
+`eslint` is a node.js tool. You can and probably should install it globally,
+since installing it locally would add files to the examples project.
+Instructions available here: https://www.npmjs.com/package/eslint
+
+Examples has an `.eslintrc` file which defines the JavaScript coding standard.
+This file should be identical to the current Drupal core standard.
+
+Running eslint
+--------------
+
+You can run eslint this way:
+
+    $ cd /path/to/examples
+    $ eslint .

field_example/field_example.js

@@ -7,13 +7,16 @@
  * Provides a farbtastic colorpicker for the fancier widget.
  */
 (function ($) {
+
+  'use strict';
+
   Drupal.behaviors.field_example_colorpicker = {
     attach: function () {
-      $(".edit-field-example-colorpicker").on("focus", function (event) {
+      $('.edit-field-example-colorpicker').on('focus', function (event) {
         var edit_field = this;
-        var picker = $(this).closest('div').parent().find(".field-example-colorpicker");
+        var picker = $(this).closest('div').parent().find('.field-example-colorpicker');
         // Hide all color pickers except this one.
-        $(".field-example-colorpicker").hide();
+        $('.field-example-colorpicker').hide();
         $(picker).show();
         $.farbtastic(picker, function (color) {
           edit_field.value = color;

js_example/js/black.js

@@ -4,7 +4,9 @@
  */
 
 (function ($, Drupal, drupalSettings) {
-  "use strict";
+
+  'use strict';
+
   /**
    * Attaches the JS test behavior to to weight div.
    */

js_example/js/blue.js

@@ -4,7 +4,9 @@
  */
 
 (function ($, Drupal, drupalSettings) {
-  "use strict";
+
+  'use strict';
+
   /**
    * Attaches the JS test behavior to weight div.
    */

js_example/js/brown.js

@@ -4,7 +4,9 @@
  */
 
 (function ($, Drupal, drupalSettings) {
-  "use strict";
+
+  'use strict';
+
   /**
    * Attaches the JS test behavior to weight div.
    */

js_example/js/green.js

@@ -4,7 +4,9 @@
  */
 
 (function ($, Drupal, drupalSettings) {
-  "use strict";
+
+  'use strict';
+
   /**
    * Attaches the JS test behavior to weight div.
    */

js_example/js/js_example_accordion.js

@@ -4,7 +4,10 @@
  */
 
 (function ($) {
+
+  'use strict';
+
   $(function () {
-    $("#accordion").accordion();
-  })
+    $('#accordion').accordion();
+  });
 })(jQuery);

js_example/js/purple.js

@@ -4,7 +4,9 @@
  */
 
 (function ($, Drupal, drupalSettings) {
-  "use strict";
+
+  'use strict';
+
   /**
    * Attaches the JS test behavior to weight div.
    */

js_example/js/red.js

@@ -4,7 +4,9 @@
  */
 
 (function ($, Drupal, drupalSettings) {
-  "use strict";
+
+  'use strict';
+
   /**
    * Attaches the JS test behavior to weight div.
    */