eslint

If a feature is sometimes useful

and sometimes dangerous and

if there is a better option

then always use the better option.

- The Principle of the Good Part - jslint

Jslint is a JavaScript program

that looks for problems

in JavaScript programs.

 

It is a code quality tool

The goal of this project is

to help JavaScript developers

write complex programs

without worrying about typos and

language gotchas.

- jshint

When I’ve been trying to fix something for hours

jslint vs. jshint

jslint

  • sehr streng
  • seit der letzten Version
    weniger Ausnahmen zugelassen
  • kein eigenes Ruleset

jshint

  • verbreiteterer Einsatz in der Community
  • "relaxing" - mode
  • keine eigenen Regeln

eslint

  • eigenes Regelset definier- und erweiterbar
  • Fehlermeldungen enthalten Regelnamen
  • benötigt jedoch Konfiguration

installation

Dokumentation

 

vagrant@local-test:/vagrant/auxmoney-web/calvin$ 

sudo npm install -g eslint

​ant lint-js

.eslintrc

/*global module */
"use strict";

module.exports = {
    "rules": {
        /* regelset */
    },
    "env": {
        "browser": true,
        "jquery": true
    },
    "globals": {
        "AUX": false,
        "Modernizr" : false,
        "Translator" : false
    },
    "extends": "eslint:recommended"
};

.eslintignore

# ignore all js files here
src/Auxmoney/MainBundle/Resources/public/js/compiled/**/*.js
src/Auxmoney/MainBundle/Resources/public/js/vendor/**/*.js

web/anlegercockpit/public/js/bids.min.js
web/anlegercockpit/public/js/bugReport.min.js
web/anlegercockpit/public/js/chartTest.min.js
web/anlegercockpit/public/js/dashboard.min.js
...


# TODO: lint the following files
web/anlegercockpit/public/js_dev/bids.js
web/anlegercockpit/public/js_dev/bugReport.js
web/anlegercockpit/public/js_dev/chartTest.js
web/anlegercockpit/public/js_dev/dashboard.js
...

rules 1/3


"indent": [2, 4, {"SwitchCase": 1}],
"quotes": [2, "double", "avoid-escape"],
"semi": [2, "always"],
"strict": [2, "global"],
"init-declarations": [2, "always"],
"no-shadow": 2, /* Shadowing is the process by which a local variable 
                shares the same name as a variable in its containing scope. */
"no-use-before-define": [2, "nofunc"],

"array-bracket-spacing": [2, "never"],
"block-spacing": [2, "always"],
"brace-style": [2, "1tbs", {"allowSingleLine": false}], /* one true brace style */
"camelcase": [2, {"properties": "always"}],
"comma-spacing": [2, {"before": false, "after": true}],
"comma-style": [2, "last"],

"consistent-this": [2, "self"],

"eol-last": [2, "unix"],

"id-length": [2, {"min": 3, "max": 40, "exceptions": [
    "AC", "e", "i", "id", "j", "n", "ms", "ua", "ui", "ux", "X", "Y"
]}]

rules 2/3


"max-depth": [1, 6], /* maximum depth blocks can be nested */
"max-len": [2, 150, 4], /* like PSR-2 */
"max-params": [2, 6],
"no-array-constructor": 2, /* The array literal notation [] is preferrable. */
"no-lonely-if": 2,

"no-multiple-empty-lines": [2, {"max": 2}],
"no-nested-ternary": 2, /* short if/else --> ? : */

"no-spaced-func": 2,
"no-trailing-spaces": 2,

"no-underscore-dangle": 2,
"one-var": [2, "always"], 
    /* There should be just one variable declaration for all variables in the function. 
        That declaration typically appears at the top of the function.
        You should use one variable declaration for each variable you want to define. */

"padded-blocks": [2, "never"], /* Block must be padded by blank lines. */

"quote-props": [2, "consistent"],

"require-jsdoc": 1

rules 3/3

"space-after-keywords": [2, "always"],
"space-before-blocks": [2, "always"],
"space-before-function-paren": [2, "never"],
"space-before-keywords": [2, "always"],
"space-in-parens": [2, "never"],
"space-infix-ops": 2,
"space-return-throw-case": 2,
"eqeqeq": 2,
"guard-for-in": 2, /* filter unwanted properties */
"no-alert": 2,
"no-eval": 2,
"no-fallthrough": 2, /* switch case without break */
"no-floating-decimal": 2, /* avoid leading/trailing decimal point */
"no-implicit-coercion": [2, {"boolean": true, "number": true, "string": true}],
    /* convert value types */
"no-implied-eval": 2, /* e.g. setTimeout("alert('Hi!');", 100); */
"no-lone-blocks": 2,
"no-magic-numbers": 1,
"no-multi-spaces": [2, { "exceptions": { "VariableDeclarator": true } }],
"no-redeclare": 2,
"no-script-url": 2,
    /* e.g. location.href = "javascript:void(0)"; */
"no-self-compare": 2,
"no-unused-expressions": 2,
"no-warning-comments": [1, { "terms": ["todo", "fixme"], "location": "anywhere" }]

example

/*global AUX: true */
/*eslint no-console: 0 */
/*eslint no-unused-vars: [2, {"varsIgnorePattern": "waitForFinalEvent"}] */
"use strict";

var AUX = {
        // this value is also used in SCSS! should always be consistent with _global-variables.scss
        "mqSmallMedium": "screen and (min-width: 480px)",
        "mqMainNav": "screen and (min-width: 650px)",
        "mqMedium": "screen and (min-width: 768px)",
        "mqMediumInt": 768
    },
    waitForFinalEvent = null;

// detect pixel ratio of device
AUX.pixelRatio = window.devicePixelRatio || 1;

// Avoid `console` errors in browsers that lack a console.
(function() {
    var method = null,
        noop = function() {
            return undefined;
        },
        methods = [
            "assert", "clear", "count", "debug", "dir", "dirxml", "error",
            "exception", "group", "groupCollapsed", "groupEnd", "info", "log",
            "markTimeline", "profile", "profileEnd", "table", "time", "timeEnd",
            "timeStamp", "trace", "warn"
        ],
        length = methods.length,
        console = (window.console = window.console || {});

    while (length--) {
        method = methods[length];

        // Only stub undefined methods.
        if (!console[method]) {
            console[method] = noop;
        }
    }
}());

// extend Modernizr to test for appearance style
Modernizr.addTest("appearance", function() {
    return Modernizr.testAllProps("appearance");
});

// extend Modernizr to test for safari browser
Modernizr.addTest("safari", function() {
    return (navigator.userAgent.indexOf("Safari") !== -1 &&
        navigator.userAgent.indexOf("Chrome") === -1) ? true : false;
});

// extend Modernizer with androidstock browser ("Internet") check
(function() {
    var nua = navigator.userAgent,
        isAndroidStock = ((nua.indexOf("Mozilla/5.0") > -1 && nua.indexOf("Android ") > -1 &&
            nua.indexOf("AppleWebKit") > -1) && !(nua.indexOf("Chrome") > -1));
    if (isAndroidStock) {
        document.documentElement.className += " androidstock";
        Modernizr.androidstock = true;
    } else {
        document.documentElement.className += " no-androidstock";
        Modernizr.androidstock = false;
    }
}());

// extend Modernizr to test for webp image format
(function() {
    var canvas = document.createElement("canvas"),
        isWebP = (canvas.toDataURL && canvas.toDataURL("image/webp").indexOf("data:image/webp") === 0);
    if (isWebP) {
        document.documentElement.className += " webp";
        Modernizr.webp = true;
    } else {
        document.documentElement.className += " no-webp";
        Modernizr.webp = false;
    }
}());

/**
 * extend Modernizr to disable history if not on
 * - main domain,
 * - local development machine or
 * - on stage server
*/
(function() {
    if (Modernizr.history &&
        location.host !== "www.auxmoney.com" &&
        location.host !== "web.auxmoney.dev" &&
        location.host.indexOf("office.auxmoney.com") === -1) {
        document.documentElement.className.replace("history", "no-history");
        Modernizr.history = false;
    }
})();

waitForFinalEvent = (function() {
    var timers = {};
    return function(callback, ms, uniqueId) {
        if (!uniqueId) {
            throw ("missing uniqueId parameter");
        }
        if (timers[uniqueId]) {
            window.clearTimeout(timers[uniqueId]);
        }
        timers[uniqueId] = window.setTimeout(callback, ms);
    };
}());

//create requestAnimationFrame in global scope
if (!window.requestAnimationFrame) {
    //create requestAnimationFrame in global scope
    window.requestAnimationFrame = window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback) {
            window.setTimeout(callback, 1000 / 30);
            return Date.now();
        };
}
Made with Slides.com