Add eslint and jscs linters. Fix linting errors.

kimmobrunfeldt · Aug 3, 2015 · 4bd8914 · 4bd8914
1 parent 9ef585d
commit 4bd8914
Show file tree

Hide file tree

Showing 16 changed files with 243 additions and 70 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,59 @@
+{
+    "env": {
+        "browser":    true,
+        "amd":        true,
+        "node":       true
+    },
+
+    "globals": {
+        "define":     false,
+        "require":    true,
+
+        "alert":      true,
+        "console":    true,
+        "module":     true,
+
+        "describe":   true,
+        "it":         true,
+        "before":     true,
+        "beforeEach": true,
+        "after":      true,
+        "afterEach":  true,
+        "expect":     true,
+        "should":     true,
+
+        "Promise":    true, // allow possibly overwriting Promise
+    },
+
+    "rules": {
+        "dot-notation":         0, // allow obj['somePropertyName']
+        "new-cap":              0, // do not require 'new' keyword, allows i.e. "var promise = $.Deferred()"
+        "no-alert":             0, // disencourage alert() and confirm()
+        "no-console":           0,
+        "no-mixed-spaces-and-tabs": 1,
+        "semi-spacing": [2, {"before": false, "after": true}],
+        "no-spaced-func":       1,
+        "no-undef":             1,
+        "no-shadow":            1,
+        "no-trailing-spaces":   1,
+        "no-extra-parens":      1,
+        "no-underscore-dangle": 0, // allow _variableName
+        "no-new":               0,
+        "no-nested-ternary":    1,
+        "no-process-exit":      0,
+
+        // requires local variable names to be used, but allows unused arguments
+        "no-unused-vars":       [2, { "vars": "all", "args": "none" }],
+        "no-use-before-define": 0,
+
+        // disable requirements for strict spacing rules in object properties or assignments
+        "key-spacing":          0,
+        "no-multi-spaces":      0,
+
+        "quotes":               0, // allow both single and double quotes
+        "space-after-keywords": 1,
+        "space-infix-ops":      1,
+        "space-return-throw-case": 1,
+        "strict":               0
+    }
+}
diff --git a/.jscs.json b/.jscs.json
@@ -0,0 +1,74 @@
+{
+    "disallowImplicitTypeConversion": ["string"],
+    "disallowMixedSpacesAndTabs": true,
+    "disallowMultipleLineBreaks": true,
+    "disallowMultipleVarDecl": true,
+    "disallowNewlineBeforeBlockStatements": true,
+    "disallowMultipleLineStrings": true,
+    "disallowMultipleVarDecl": null,
+    "disallowSpaceAfterPrefixUnaryOperators": true,
+    "disallowSpacesInAnonymousFunctionExpression": {
+        "beforeOpeningRoundBrace": true
+    },
+    "disallowSpacesInsideObjectBrackets": null,
+    "disallowSpacesInsideArrayBrackets": "all",
+    "disallowSpacesInsideParentheses": true,
+    "disallowTrailingWhitespace": true,
+
+    "maximumLineLength": {
+        "value": 100,
+        "allowComments": true,
+        "allowRegex": true
+    },
+
+    "fileExtensions": [".js", ".jsx"],
+
+    "requireCamelCaseOrUpperCaseIdentifiers": true,
+    "requireCommaBeforeLineBreak": true,
+    "requireCurlyBraces": [
+        "if",
+        "else",
+        "for",
+        "while",
+        "do",
+        "try",
+        "catch"
+    ],
+    "requireSpaceAfterBinaryOperators": true,
+    "requireSpaceAfterKeywords": [
+        "do",
+        "for",
+        "if",
+        "else",
+        "switch",
+        "case",
+        "try",
+        "catch",
+        "void",
+        "while",
+        "with",
+        "return",
+        "typeof"
+    ],
+    "requireSpaceBeforeBinaryOperators": [
+        "=", "+=", "-=", "*=", "/=", "%=", "<<=", ">>=", ">>>=",
+        "&=", "|=", "^=", "+=",
+
+        "+", "-", "*", "/", "%", "<<", ">>", ">>>", "&",
+        "|", "^", "&&", "||", "===", "==", ">=",
+        "<=", "<", ">", "!=", "!=="
+    ],
+    "requireSpacesInConditionalExpression": true,
+    "requireSpaceBeforeBlockStatements": true,
+    "requireSpacesInForStatement": true,
+    "requireLineFeedAtFileEnd": true,
+    "requireSpacesInFunctionExpression": {
+        "beforeOpeningCurlyBrace": true
+    },
+
+    "validateLineBreaks": "LF",
+    "validateIndentation": 4,
+    "validateQuoteMarks": {
+        "mark": "'", "escape": true
+    }
+}
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -15,6 +15,8 @@ updated.
 Then you can edit `src/progressbar.js` and changes can be tested in browser.
 Edit `local-dev/main.js` to your testing needs.
 
+Shorter way to do local development is running: ```npm run dev```.
+
 ## General project stuff
 
 This package uses npm/node tools just in the developer environment. Grunt is used as a task runner
@@ -122,3 +124,4 @@ animation customizations and possible even using different easings per animation
 * Automate tests so that testing is locally fast and CI runs tests with more browsers in Sauce Labs
 * Because of introducing text attribute, the library must modify CSS also. Provide user an option to make CSS them selves.
 * Keep **master** branch as a release branch so that new users can see the documentation for latest release instead of development version.
+* Add some tasks to package.json aside with grunt tasks. I would want to move from Grunt to npm scripts totally but Sauce Labs tests are run with grunt.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "progressbar.js",
   "version": "0.8.1-dev",
-  "description": "Beautiful and responsive progress bars with animated SVG paths",
+  "description": "Responsive and slick progress bars with animated SVG paths",
   "main": "src/main.js",
   "dependencies": {
     "shifty": "1.2.2"
@@ -12,27 +12,36 @@
     "chai": "^1.10.0",
     "chai-stats": "kimmobrunfeldt/chai-stats",
     "commander": "^2.4.0",
+    "concurrently": "^0.1.1",
+    "eslint": "^1.0.0",
     "grunt": "^0.4.5",
     "grunt-contrib-jshint": "^0.10.0",
     "grunt-contrib-uglify": "^0.6.0",
     "grunt-karma": "^0.9.0",
     "grunt-shell": "^1.1.1",
+    "jscs": "^2.0.0",
     "karma": "^0.12.24",
     "karma-bro": "^0.8.0",
     "karma-mocha": "^0.1.9",
     "karma-sauce-launcher": "^0.2.10",
     "lodash": "^2.4.1",
     "mocha": "^2.0.1",
     "mustache": "^0.8.2",
+    "node-static": "^0.7.7",
     "semver": "^4.1.0",
     "shelljs": "^0.3.0",
+    "sinon": "~1.14.1",
     "string": "^2.2.0",
     "testem": "^0.6.22",
-    "watchify": "^2.1.1",
-    "sinon": "~1.14.1"
+    "watchify": "^2.1.1"
   },
   "scripts": {
-    "test": "grunt test"
+    "test": "grunt test",
+    "dev": "concurrent 'npm run serve' 'grunt watch' 'open http://localhost:8080'",
+    "serve": "static ./local-dev -c 0",
+    "lint": "./tools/lint.sh",
+    "jscs": "jscs ./src ./test",
+    "eslint": "eslint --ext .js ./src ./test"
   },
   "repository": {
     "type": "git",
@@ -43,7 +52,7 @@
   "bugs": {
     "url": "https://github.com/kimmobrunfeldt/progressbar.js/issues"
   },
-  "homepage": "https://github.com/kimmobrunfeldt/progressbar.js",
+  "homepage": "https://kimmobrunfeldt.github.io/progressbar.js/",
   "keywords": [
     "progress",
     "bar",
@@ -55,6 +64,8 @@
     "radial",
     "line",
     "loading",
-    "loader"
+    "loader",
+    "semi-circle",
+    "indicator"
   ]
-}
+}
diff --git a/src/circle.js b/src/circle.js
@@ -3,7 +3,6 @@
 var Shape = require('./shape');
 var utils = require('./utils');
 
-
 var Circle = function Circle(container, options) {
     // Use two arcs to form a circle
     // See this answer http://stackoverflow.com/a/10477334/1446092

diff --git a/src/line.js b/src/line.js
@@ -3,7 +3,6 @@
 var Shape = require('./shape');
 var utils = require('./utils');
 
-
 var Line = function Line(container, options) {
     this._pathTemplate = 'M 0,{center} L 100,{center}';
     Shape.apply(this, arguments);

diff --git a/src/path.js b/src/path.js
@@ -9,7 +9,6 @@ var EASING_ALIASES = {
     easeInOut: 'easeInOutCubic'
 };
 
-
 var Path = function Path(path, opts) {
     // Default parameters for animation
     opts = utils.extend({
@@ -57,7 +56,8 @@ Path.prototype.set = function set(progress) {
     if (utils.isFunction(step)) {
         var easing = this._easing(this._opts.easing);
         var values = this._calculateTo(progress, easing);
-        step(values, this._opts.shape||this, this._opts.attachment);
+        var reference = this._opts.shape || this;
+        step(values, reference, this._opts.attachment);
     }
 };
 
@@ -103,7 +103,8 @@ Path.prototype.animate = function animate(progress, opts, cb) {
         easing: shiftyEasing,
         step: function(state) {
             self.path.style.strokeDashoffset = state.offset;
-            opts.step(state, opts.shape||self, opts.attachment);
+            var reference = opts.shape || self;
+            opts.step(state, reference, opts.attachment);
         },
         finish: function(state) {
             if (utils.isFunction(cb)) {

diff --git a/src/semicircle.js b/src/semicircle.js
@@ -4,7 +4,6 @@ var Shape = require('./shape');
 var Circle = require('./circle');
 var utils = require('./utils');
 
-
 var SemiCircle = function SemiCircle(container, options) {
     // Use one arc to form a SemiCircle
     // See this answer http://stackoverflow.com/a/10477334/1446092
@@ -22,8 +21,12 @@ SemiCircle.prototype._initializeSvg = function _initializeSvg(svg, opts) {
     svg.setAttribute('viewBox', '0 0 100 50');
 };
 
-SemiCircle.prototype._initializeTextElement = function _initializeTextElement(opts, container, element) {
-    if (opts.text.autoStyle) {
+SemiCircle.prototype._initializeTextElement = function _initializeTextElement(
+    opts,
+    container,
+    element
+) {
+    if (opts.text.style) {
         // Reset top style
         element.style.top = 'auto';
 
@@ -36,7 +39,6 @@ SemiCircle.prototype._initializeTextElement = function _initializeTextElement(op
     }
 };
 
-
 // Share functionality with Circle, just have different path
 SemiCircle.prototype._pathString = Circle.prototype._pathString;
 SemiCircle.prototype._trailString = Circle.prototype._trailString;

diff --git a/src/shape.js b/src/shape.js
@@ -5,7 +5,6 @@ var utils = require('./utils');
 
 var DESTROYED_ERROR = 'Object is destroyed';
 
-
 var Shape = function Shape(container, opts) {
     // Throw a better error if progress bars are not initialized with `new`
     // keyword
@@ -19,7 +18,9 @@ var Shape = function Shape(container, opts) {
     //   Line.prototype = new Shape();
     //
     // We just want to set the prototype for Line.
-    if (arguments.length === 0) return;
+    if (arguments.length === 0) {
+        return;
+    }
 
     // Default parameters for progress bar creation
     this._opts = utils.extend({
@@ -73,20 +74,30 @@ var Shape = function Shape(container, opts) {
 };
 
 Shape.prototype.animate = function animate(progress, opts, cb) {
-    if (this._progressPath === null) throw new Error(DESTROYED_ERROR);
+    if (this._progressPath === null) {
+        throw new Error(DESTROYED_ERROR)
+    };
+
     this._progressPath.animate(progress, opts, cb);
 };
 
 Shape.prototype.stop = function stop() {
-    if (this._progressPath === null) throw new Error(DESTROYED_ERROR);
+    if (this._progressPath === null) {
+        throw new Error(DESTROYED_ERROR);
+    }
+
     // Don't crash if stop is called inside step function
-    if (this._progressPath === undefined) return;
+    if (this._progressPath === undefined) {
+        return;
+    }
 
     this._progressPath.stop();
 };
 
 Shape.prototype.destroy = function destroy() {
-    if (this._progressPath === null) throw new Error(DESTROYED_ERROR);
+    if (this._progressPath === null) {
+        throw new Error(DESTROYED_ERROR);
+    }
 
     this.stop();
     this.svg.parentNode.removeChild(this.svg);
@@ -102,19 +113,29 @@ Shape.prototype.destroy = function destroy() {
 };
 
 Shape.prototype.set = function set(progress) {
-    if (this._progressPath === null) throw new Error(DESTROYED_ERROR);
+    if (this._progressPath === null) {
+        throw new Error(DESTROYED_ERROR);
+    }
+
     this._progressPath.set(progress);
 };
 
 Shape.prototype.value = function value() {
-    if (this._progressPath === null) throw new Error(DESTROYED_ERROR);
-    if (this._progressPath === undefined) return 0;
+    if (this._progressPath === null) {
+        throw new Error(DESTROYED_ERROR);
+    }
+
+    if (this._progressPath === undefined) {
+        return 0;
+    }
 
     return this._progressPath.value();
 };
 
 Shape.prototype.setText = function setText(text) {
-    if (this._progressPath === null) throw new Error(DESTROYED_ERROR);
+    if (this._progressPath === null) {
+        throw new Error(DESTROYED_ERROR);
+    }
 
     if (this.text === null) {
         // Create new text node
@@ -166,8 +187,12 @@ Shape.prototype._createTrail = function _createTrail(opts) {
     var newOpts = utils.extend({}, opts);
 
     // Defaults for parameters which modify trail path
-    if (!newOpts.trailColor) newOpts.trailColor = '#eee';
-    if (!newOpts.trailWidth) newOpts.trailWidth = newOpts.strokeWidth;
+    if (!newOpts.trailColor) {
+        newOpts.trailColor = '#eee';
+    }
+    if (!newOpts.trailWidth) {
+        newOpts.trailWidth = newOpts.strokeWidth;
+    }
 
     newOpts.color = newOpts.trailColor;
     newOpts.strokeWidth = newOpts.trailWidth;