martinandert/babel-plugin-css-in-js

View on GitHub

Showing 51 of 51 total issues

Avoid too many return statements within this function.
Open

  return false;
Severity: Major
Found in src/transformObjectExpressionIntoStyleSheetObject.js - About 30 mins to fix

    Function buildCSS has a Cognitive Complexity of 6 (exceeds 5 allowed). Consider refactoring.
    Open

    export default function buildCSS(stylesheets, options) {
      let css = '';
    
      foreach(stylesheets, (stylesheet, name) => {
        const cssOptions = extend({}, options);
    Severity: Minor
    Found in src/buildCSS.js - About 25 mins to fix

    Cognitive Complexity

    Cognitive Complexity is a measure of how difficult a unit of code is to intuitively understand. Unlike Cyclomatic Complexity, which determines how difficult your code will be to test, Cognitive Complexity tells you how difficult your code will be to read and comprehend.

    A method's cognitive complexity is based on a few simple rules:

    • Code is not considered more complex when it uses shorthand that the language provides for collapsing multiple statements into one
    • Code is considered more complex for each "break in the linear flow of the code"
    • Code is considered more complex when "flow breaking structures are nested"

    Further reading

    Missing trailing comma.
    Open

            'return value of cssInJS(...) must be assigned to a variable'
    Severity: Minor
    Found in src/index.js by eslint

    require or disallow trailing commas (comma-dangle)

    Trailing commas in object literals are valid according to the ECMAScript 5 (and ECMAScript 3!) spec. However, IE8 (when not in IE8 document mode) and below will throw an error when it encounters trailing commas in JavaScript.

    var foo = {
        bar: "baz",
        qux: "quux",
    };

    Trailing commas simplify adding and removing items to objects and arrays, since only the lines you are modifying must be touched. Another argument in favor of trailing commas is that it improves the clarity of diffs when an item is added or removed from an object or array:

    Less clear:

    var foo = {
    -    bar: "baz",
    -    qux: "quux"
    +    bar: "baz"
     };

    More clear:

    var foo = {
         bar: "baz",
    -    qux: "quux",
     };

    Rule Details

    This rule enforces consistent use of trailing commas in object and array literals.

    Options

    This rule has a string option or an object option:

    {
        "comma-dangle": ["error", "never"],
        // or
        "comma-dangle": ["error", {
            "arrays": "never",
            "objects": "never",
            "imports": "never",
            "exports": "never",
            "functions": "ignore",
        }]
    }
    • "never" (default) disallows trailing commas
    • "always" requires trailing commas
    • "always-multiline" requires trailing commas when the last element or property is in a different line than the closing ] or } and disallows trailing commas when the last element or property is on the same line as the closing ] or }
    • "only-multiline" allows (but does not require) trailing commas when the last element or property is in a different line than the closing ] or } and disallows trailing commas when the last element or property is on the same line as the closing ] or }

    Trailing commas in function declarations and function calls are valid syntax since ECMAScript 2017; however, the string option does not check these situations for backwards compatibility.

    You can also use an object option to configure this rule for each type of syntax. Each of the following options can be set to "never", "always", "always-multiline", "only-multiline", or "ignore". The default for each option is "never" unless otherwise specified.

    • arrays is for array literals and array patterns of destructuring. (e.g. let [a,] = [1,];)
    • objects is for object literals and object patterns of destructuring. (e.g. let {a,} = {a: 1};)
    • imports is for import declarations of ES Modules. (e.g. import {a,} from "foo";)
    • exports is for export declarations of ES Modules. (e.g. export {a,};)
    • functions is for function declarations and function calls. (e.g. (function(a,){ })(b,);)
      functions is set to "ignore" by default for consistency with the string option.

    never

    Examples of incorrect code for this rule with the default "never" option:

    /*eslint comma-dangle: ["error", "never"]*/
    
    var foo = {
        bar: "baz",
        qux: "quux",
    };
    
    var arr = [1,2,];
    
    foo({
      bar: "baz",
      qux: "quux",
    });

    Examples of correct code for this rule with the default "never" option:

    /*eslint comma-dangle: ["error", "never"]*/
    
    var foo = {
        bar: "baz",
        qux: "quux"
    };
    
    var arr = [1,2];
    
    foo({
      bar: "baz",
      qux: "quux"
    });

    always

    Examples of incorrect code for this rule with the "always" option:

    /*eslint comma-dangle: ["error", "always"]*/
    
    var foo = {
        bar: "baz",
        qux: "quux"
    };
    
    var arr = [1,2];
    
    foo({
      bar: "baz",
      qux: "quux"
    });

    Examples of correct code for this rule with the "always" option:

    /*eslint comma-dangle: ["error", "always"]*/
    
    var foo = {
        bar: "baz",
        qux: "quux",
    };
    
    var arr = [1,2,];
    
    foo({
      bar: "baz",
      qux: "quux",
    });

    always-multiline

    Examples of incorrect code for this rule with the "always-multiline" option:

    /*eslint comma-dangle: ["error", "always-multiline"]*/
    
    var foo = {
        bar: "baz",
        qux: "quux"
    };
    
    var foo = { bar: "baz", qux: "quux", };
    
    var arr = [1,2,];
    
    var arr = [1,
        2,];
    
    var arr = [
        1,
        2
    ];
    
    foo({
      bar: "baz",
      qux: "quux"
    });

    Examples of correct code for this rule with the "always-multiline" option:

    /*eslint comma-dangle: ["error", "always-multiline"]*/
    
    var foo = {
        bar: "baz",
        qux: "quux",
    };
    
    var foo = {bar: "baz", qux: "quux"};
    var arr = [1,2];
    
    var arr = [1,
        2];
    
    var arr = [
        1,
        2,
    ];
    
    foo({
      bar: "baz",
      qux: "quux",
    });

    only-multiline

    Examples of incorrect code for this rule with the "only-multiline" option:

    /*eslint comma-dangle: ["error", "only-multiline"]*/
    
    var foo = { bar: "baz", qux: "quux", };
    
    var arr = [1,2,];
    
    var arr = [1,
        2,];

    Examples of correct code for this rule with the "only-multiline" option:

    /*eslint comma-dangle: ["error", "only-multiline"]*/
    
    var foo = {
        bar: "baz",
        qux: "quux",
    };
    
    var foo = {
        bar: "baz",
        qux: "quux"
    };
    
    var foo = {bar: "baz", qux: "quux"};
    var arr = [1,2];
    
    var arr = [1,
        2];
    
    var arr = [
        1,
        2,
    ];
    
    var arr = [
        1,
        2
    ];
    
    foo({
      bar: "baz",
      qux: "quux",
    });
    
    foo({
      bar: "baz",
      qux: "quux"
    });

    functions

    Examples of incorrect code for this rule with the {"functions": "never"} option:

    /*eslint comma-dangle: ["error", {"functions": "never"}]*/
    
    function foo(a, b,) {
    }
    
    foo(a, b,);
    new foo(a, b,);

    Examples of correct code for this rule with the {"functions": "never"} option:

    /*eslint comma-dangle: ["error", {"functions": "never"}]*/
    
    function foo(a, b) {
    }
    
    foo(a, b);
    new foo(a, b);

    Examples of incorrect code for this rule with the {"functions": "always"} option:

    /*eslint comma-dangle: ["error", {"functions": "always"}]*/
    
    function foo(a, b) {
    }
    
    foo(a, b);
    new foo(a, b);

    Examples of correct code for this rule with the {"functions": "always"} option:

    /*eslint comma-dangle: ["error", {"functions": "always"}]*/
    
    function foo(a, b,) {
    }
    
    foo(a, b,);
    new foo(a, b,);

    When Not To Use It

    You can turn this rule off if you are not concerned with dangling commas. Source: http://eslint.org/docs/rules/

    Unexpected require().
    Open

          contextFileCache[file] = require(file);
    Severity: Minor
    Found in src/index.js by eslint

    Enforce require() on the top-level module scope (global-require)

    In Node.js, module dependencies are included using the require() function, such as:

    var fs = require("fs");

    While require() may be called anywhere in code, some style guides prescribe that it should be called only in the top level of a module to make it easier to identify dependencies. For instance, it's arguably harder to identify dependencies when they are deeply nested inside of functions and other statements:

    function foo() {
    
        if (condition) {
            var fs = require("fs");
        }
    }

    Since require() does a synchronous load, it can cause performance problems when used in other locations.

    Further, ES6 modules mandate that import and export statements can only occur in the top level of the module's body.

    Rule Details

    This rule requires all calls to require() to be at the top level of the module, similar to ES6 import and export statements, which also can occur only at the top level.

    Examples of incorrect code for this rule:

    /*eslint global-require: "error"*/
    /*eslint-env es6*/
    
    // calling require() inside of a function is not allowed
    function readFile(filename, callback) {
        var fs = require('fs');
        fs.readFile(filename, callback)
    }
    
    // conditional requires like this are also not allowed
    if (DEBUG) { require('debug'); }
    
    // a require() in a switch statement is also flagged
    switch(x) { case '1': require('1'); break; }
    
    // you may not require() inside an arrow function body
    var getModule = (name) => require(name);
    
    // you may not require() inside of a function body as well
    function getModule(name) { return require(name); }
    
    // you may not require() inside of a try/catch block
    try {
        require(unsafeModule);
    } catch(e) {
        console.log(e);
    }

    Examples of correct code for this rule:

    /*eslint global-require: "error"*/
    
    // all these variations of require() are ok
    require('x');
    var y = require('y');
    var z;
    z = require('z').initialize();
    
    // requiring a module and using it in a function is ok
    var fs = require('fs');
    function readFile(filename, callback) {
        fs.readFile(filename, callback)
    }
    
    // you can use a ternary to determine which module to require
    var logger = DEBUG ? require('dev-logger') : require('logger');
    
    // if you want you can require() at the end of your module
    function doSomethingA() {}
    function doSomethingB() {}
    var x = require("x"),
        z = require("z");

    When Not To Use It

    If you have a module that must be initialized with information that comes from the file-system or if a module is only used in very rare situations and will cause significant overhead to load it may make sense to disable the rule. If you need to require() an optional dependency inside of a try/catch, you can disable this rule for just that dependency using the // eslint-disable-line global-require comment. Source: http://eslint.org/docs/rules/

    Unexpected mix of '||' and '&&'.
    Open

      assert(t.isIdentifier(key) || t.isLiteral(key) && typeof key.value === 'string', 'key must be a string or identifier');

    Disallow mixes of different operators (no-mixed-operators)

    Enclosing complex expressions by parentheses clarifies the developer's intention, which makes the code more readable. This rule warns when different operators are used consecutively without parentheses in an expression.

    var foo = a && b || c || d;    /*BAD: Unexpected mix of '&&' and '||'.*/
    var foo = (a && b) || c || d;  /*GOOD*/
    var foo = a && (b || c || d);  /*GOOD*/

    Rule Details

    This rule checks BinaryExpression and LogicalExpression.

    This rule may conflict with [no-extra-parens](no-extra-parens.md) rule. If you use both this and [no-extra-parens](no-extra-parens.md) rule together, you need to use the nestedBinaryExpressions option of [no-extra-parens](no-extra-parens.md) rule.

    Examples of incorrect code for this rule:

    /*eslint no-mixed-operators: "error"*/
    
    var foo = a && b < 0 || c > 0 || d + 1 === 0;
    var foo = a + b * c;

    Examples of correct code for this rule:

    /*eslint no-mixed-operators: "error"*/
    
    var foo = a || b || c;
    var foo = a && b && c;
    var foo = (a && b < 0) || c > 0 || d + 1 === 0;
    var foo = a && (b < 0 || c > 0 || d + 1 === 0);
    var foo = a + (b * c);
    var foo = (a + b) * c;

    Options

    {
        "no-mixed-operators": [
            "error",
            {
                "groups": [
                    ["+", "-", "*", "/", "%", "**"],
                    ["&", "|", "^", "~", "<<", ">>", ">>>"],
                    ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
                    ["&&", "||"],
                    ["in", "instanceof"]
                ],
                "allowSamePrecedence": true
            }
        ]
    }

    This rule has 2 options.

    • groups (string[][]) - specifies groups to compare operators. When this rule compares two operators, if both operators are included in a same group, this rule checks it. Otherwise, this rule ignores it. This value is a list of groups. The group is a list of binary operators. Default is the groups for each kind of operators.
    • allowSamePrecedence (boolean) - specifies to allow mix of 2 operators if those have the same precedence. Default is true.

    groups

    The following operators can be used in groups option:

    • Arithmetic Operators: "+", "-", "*", "/", "%", "**"
    • Bitwise Operators: "&", "|", "^", "~", "<<", ">>", ">>>"
    • Comparison Operators: "==", "!=", "===", "!==", ">", ">=", "<", "<="
    • Logical Operators: "&&", "||"
    • Relational Operators: "in", "instanceof"

    Now, considers about {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} configure. This configure has 2 groups: bitwise operators and logical operators. This rule checks only if both operators are included in a same group. So, in this case, this rule comes to check between bitwise operators and between logical operators. This rule ignores other operators.

    Examples of incorrect code for this rule with {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} option:

    /*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/
    
    var foo = a && b < 0 || c > 0 || d + 1 === 0;
    var foo = a & b | c;

    Examples of correct code for this rule with {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} option:

    /*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/
    
    var foo = a || b > 0 || c + 1 === 0;
    var foo = a && b > 0 && c + 1 === 0;
    var foo = (a && b < 0) || c > 0 || d + 1 === 0;
    var foo = a && (b < 0 ||  c > 0 || d + 1 === 0);
    var foo = (a & b) | c;
    var foo = a & (b | c);
    var foo = a + b * c;
    var foo = a + (b * c);
    var foo = (a + b) * c;

    allowSamePrecedence

    Examples of correct code for this rule with {"allowSamePrecedence": true} option:

    /*eslint no-mixed-operators: ["error", {"allowSamePrecedence": true}]*/
    
    // + and - have the same precedence.
    var foo = a + b - c;

    Examples of incorrect code for this rule with {"allowSamePrecedence": false} option:

    /*eslint no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/
    
    // + and - have the same precedence.
    var foo = a + b - c;

    When Not To Use It

    If you don't want to be notified about mixed operators, then it's safe to disable this rule.

    Related Rules

    Unary operator '++' used.
    Open

      for (let i = 0; i < level; i++) {
    Severity: Minor
    Found in src/transformSpecificationIntoCSS.js by eslint

    disallow the unary operators ++ and -- (no-plusplus)

    Because the unary ++ and -- operators are subject to automatic semicolon insertion, differences in whitespace can change semantics of source code.

    var i = 10;
    var j = 20;
    
    i ++
    j
    // i = 11, j = 20
    var i = 10;
    var j = 20;
    
    i
    ++
    j
    // i = 10, j = 21

    Rule Details

    This rule disallows the unary operators ++ and --.

    Examples of incorrect code for this rule:

    /*eslint no-plusplus: "error"*/
    
    var foo = 0;
    foo++;
    
    var bar = 42;
    bar--;
    
    for (i = 0; i < l; i++) {
        return;
    }

    Examples of correct code for this rule:

    /*eslint no-plusplus: "error"*/
    
    var foo = 0;
    foo += 1;
    
    var bar = 42;
    bar -= 1;
    
    for (i = 0; i < l; i += 1) {
        return;
    }

    Options

    This rule has an object option.

    • "allowForLoopAfterthoughts": true allows unary operators ++ and -- in the afterthought (final expression) of a for loop.

    allowForLoopAfterthoughts

    Examples of correct code for this rule with the { "allowForLoopAfterthoughts": true } option:

    /*eslint no-plusplus: ["error", { "allowForLoopAfterthoughts": true }]*/
    
    for (i = 0; i < l; i++) {
        return;
    }
    
    for (i = 0; i < l; i--) {
        return;
    }

    Source: http://eslint.org/docs/rules/

    Do not access Object.prototype method 'hasOwnProperty' from target object.
    Open

      } else if (t.isIdentifier(expr) && context.hasOwnProperty(expr.name)) {

    Disallow use of Object.prototypes builtins directly (no-prototype-builtins)

    In ECMAScript 5.1, Object.create was added, which enables the creation of objects with a specified [[Prototype]]. Object.create(null) is a common pattern used to create objects that will be used as a Map. This can lead to errors when it is assumed that objects will have properties from Object.prototype. This rule prevents calling Object.prototype methods directly from an object.

    Rule Details

    This rule disallows calling some Object.prototype methods directly on object instances.

    Examples of incorrect code for this rule:

    /*eslint no-prototype-builtins: "error"*/
    
    var hasBarProperty = foo.hasOwnProperty("bar");
    
    var isPrototypeOfBar = foo.isPrototypeOf(bar);
    
    var barIsEnumerable = foo.propertyIsEnumerable("bar");

    Examples of correct code for this rule:

    /*eslint no-prototype-builtins: "error"*/
    
    var hasBarProperty = Object.prototype.hasOwnProperty.call(foo, "bar");
    
    var isPrototypeOfBar = Object.prototype.isPrototypeOf.call(foo, bar);
    
    var barIsEnumerable = {}.propertyIsEnumerable.call(foo, "bar");

    When Not To Use It

    You may want to turn this rule off if you will never use an object that shadows an Object.prototype method or which does not inherit from Object.prototype. Source: http://eslint.org/docs/rules/

    Unexpected string concatenation.
    Open

      css.push(indent(level) + '}');
    Severity: Minor
    Found in src/transformSpecificationIntoCSS.js by eslint

    Suggest using template literals instead of string concatenation. (prefer-template)

    In ES2015 (ES6), we can use template literals instead of string concatenation.

    var str = "Hello, " + name + "!";
    /*eslint-env es6*/
    
    var str = `Hello, ${name}!`;

    Rule Details

    This rule is aimed to flag usage of + operators with strings.

    Examples

    Examples of incorrect code for this rule:

    /*eslint prefer-template: "error"*/
    
    var str = "Hello, " + name + "!";
    var str = "Time: " + (12 * 60 * 60 * 1000);

    Examples of correct code for this rule:

    /*eslint prefer-template: "error"*/
    /*eslint-env es6*/
    
    var str = "Hello World!";
    var str = `Hello, ${name}!`;
    var str = `Time: ${12 * 60 * 60 * 1000}`;
    
    // This is reported by `no-useless-concat`.
    var str = "Hello, " + "World!";

    When Not To Use It

    This rule should not be used in ES3/5 environments.

    In ES2015 (ES6) or later, if you don't want to be notified about string concatenation, you can safely disable this rule.

    Related Rules

    Unexpected string concatenation.
    Open

        value = "'" + value.replace(/'/g, "\\'") + "'";
    Severity: Minor
    Found in src/buildCSSRule.js by eslint

    Suggest using template literals instead of string concatenation. (prefer-template)

    In ES2015 (ES6), we can use template literals instead of string concatenation.

    var str = "Hello, " + name + "!";
    /*eslint-env es6*/
    
    var str = `Hello, ${name}!`;

    Rule Details

    This rule is aimed to flag usage of + operators with strings.

    Examples

    Examples of incorrect code for this rule:

    /*eslint prefer-template: "error"*/
    
    var str = "Hello, " + name + "!";
    var str = "Time: " + (12 * 60 * 60 * 1000);

    Examples of correct code for this rule:

    /*eslint prefer-template: "error"*/
    /*eslint-env es6*/
    
    var str = "Hello World!";
    var str = `Hello, ${name}!`;
    var str = `Time: ${12 * 60 * 60 * 1000}`;
    
    // This is reported by `no-useless-concat`.
    var str = "Hello, " + "World!";

    When Not To Use It

    This rule should not be used in ES3/5 environments.

    In ES2015 (ES6) or later, if you don't want to be notified about string concatenation, you can safely disable this rule.

    Related Rules

    Unexpected block statement surrounding arrow body.
    Open

      return cache.fetch(className, (keys) => {
    Severity: Minor
    Found in src/compressClassName.js by eslint

    Require braces in arrow function body (arrow-body-style)

    Arrow functions have two syntactic forms for their function bodies. They may be defined with a block body (denoted by curly braces) () => { ... } or with a single expression () => ..., whose value is implicitly returned.

    Rule Details

    This rule can enforce or disallow the use of braces around arrow function body.

    Options

    The rule takes one or two options. The first is a string, which can be:

    • "always" enforces braces around the function body
    • "as-needed" enforces no braces where they can be omitted (default)
    • "never" enforces no braces around the function body (constrains arrow functions to the role of returning an expression)

    The second one is an object for more fine-grained configuration when the first option is "as-needed". Currently, the only available option is requireReturnForObjectLiteral, a boolean property. It's false by default. If set to true, it requires braces and an explicit return for object literals.

    "arrow-body-style": ["error", "always"]

    always

    Examples of incorrect code for this rule with the "always" option:

    /*eslint arrow-body-style: ["error", "always"]*/
    /*eslint-env es6*/
    let foo = () => 0;

    Examples of correct code for this rule with the "always" option:

    let foo = () => {
        return 0;
    };
    let foo = (retv, name) => {
        retv[name] = true;
        return retv;
    };

    as-needed

    Examples of incorrect code for this rule with the default "as-needed" option:

    /*eslint arrow-body-style: ["error", "as-needed"]*/
    /*eslint-env es6*/
    
    let foo = () => {
        return 0;
    };
    let foo = () => {
        return {
           bar: {
                foo: 1,
                bar: 2,
            }
        };
    };

    Examples of correct code for this rule with the default "as-needed" option:

    /*eslint arrow-body-style: ["error", "as-needed"]*/
    /*eslint-env es6*/
    
    let foo = () => 0;
    let foo = (retv, name) => {
        retv[name] = true;
        return retv;
    };
    let foo = () => ({
        bar: {
            foo: 1,
            bar: 2,
        }
    });
    let foo = () => { bar(); };
    let foo = () => {};
    let foo = () => { /* do nothing */ };
    let foo = () => {
        // do nothing.
    };
    let foo = () => ({ bar: 0 });

    requireReturnForObjectLiteral

    This option is only applicable when used in conjunction with the "as-needed" option.

    Examples of incorrect code for this rule with the { "requireReturnForObjectLiteral": true } option:

    /*eslint arrow-body-style: ["error", "as-needed", { "requireReturnForObjectLiteral": true }]*/
    /*eslint-env es6*/
    let foo = () => ({});
    let foo = () => ({ bar: 0 });

    Examples of correct code for this rule with the { "requireReturnForObjectLiteral": true } option:

    /*eslint arrow-body-style: ["error", "as-needed", { "requireReturnForObjectLiteral": true }]*/
    /*eslint-env es6*/
    
    let foo = () => {};
    let foo = () => { return { bar: 0 }; };

    never

    Examples of incorrect code for this rule with the "never" option:

    /*eslint arrow-body-style: ["error", "never"]*/
    /*eslint-env es6*/
    
    let foo = () => {
        return 0;
    };
    let foo = (retv, name) => {
        retv[name] = true;
        return retv;
    };

    Examples of correct code for this rule with the "never" option:

    /*eslint arrow-body-style: ["error", "never"]*/
    /*eslint-env es6*/
    
    let foo = () => 0;
    let foo = () => ({ foo: 0 });

    Source: http://eslint.org/docs/rules/

    Missing trailing comma.
    Open

                t.stringLiteral(generateClassName(styleId, gcnOptions))
    Severity: Minor
    Found in src/index.js by eslint

    require or disallow trailing commas (comma-dangle)

    Trailing commas in object literals are valid according to the ECMAScript 5 (and ECMAScript 3!) spec. However, IE8 (when not in IE8 document mode) and below will throw an error when it encounters trailing commas in JavaScript.

    var foo = {
        bar: "baz",
        qux: "quux",
    };

    Trailing commas simplify adding and removing items to objects and arrays, since only the lines you are modifying must be touched. Another argument in favor of trailing commas is that it improves the clarity of diffs when an item is added or removed from an object or array:

    Less clear:

    var foo = {
    -    bar: "baz",
    -    qux: "quux"
    +    bar: "baz"
     };

    More clear:

    var foo = {
         bar: "baz",
    -    qux: "quux",
     };

    Rule Details

    This rule enforces consistent use of trailing commas in object and array literals.

    Options

    This rule has a string option or an object option:

    {
        "comma-dangle": ["error", "never"],
        // or
        "comma-dangle": ["error", {
            "arrays": "never",
            "objects": "never",
            "imports": "never",
            "exports": "never",
            "functions": "ignore",
        }]
    }
    • "never" (default) disallows trailing commas
    • "always" requires trailing commas
    • "always-multiline" requires trailing commas when the last element or property is in a different line than the closing ] or } and disallows trailing commas when the last element or property is on the same line as the closing ] or }
    • "only-multiline" allows (but does not require) trailing commas when the last element or property is in a different line than the closing ] or } and disallows trailing commas when the last element or property is on the same line as the closing ] or }

    Trailing commas in function declarations and function calls are valid syntax since ECMAScript 2017; however, the string option does not check these situations for backwards compatibility.

    You can also use an object option to configure this rule for each type of syntax. Each of the following options can be set to "never", "always", "always-multiline", "only-multiline", or "ignore". The default for each option is "never" unless otherwise specified.

    • arrays is for array literals and array patterns of destructuring. (e.g. let [a,] = [1,];)
    • objects is for object literals and object patterns of destructuring. (e.g. let {a,} = {a: 1};)
    • imports is for import declarations of ES Modules. (e.g. import {a,} from "foo";)
    • exports is for export declarations of ES Modules. (e.g. export {a,};)
    • functions is for function declarations and function calls. (e.g. (function(a,){ })(b,);)
      functions is set to "ignore" by default for consistency with the string option.

    never

    Examples of incorrect code for this rule with the default "never" option:

    /*eslint comma-dangle: ["error", "never"]*/
    
    var foo = {
        bar: "baz",
        qux: "quux",
    };
    
    var arr = [1,2,];
    
    foo({
      bar: "baz",
      qux: "quux",
    });

    Examples of correct code for this rule with the default "never" option:

    /*eslint comma-dangle: ["error", "never"]*/
    
    var foo = {
        bar: "baz",
        qux: "quux"
    };
    
    var arr = [1,2];
    
    foo({
      bar: "baz",
      qux: "quux"
    });

    always

    Examples of incorrect code for this rule with the "always" option:

    /*eslint comma-dangle: ["error", "always"]*/
    
    var foo = {
        bar: "baz",
        qux: "quux"
    };
    
    var arr = [1,2];
    
    foo({
      bar: "baz",
      qux: "quux"
    });

    Examples of correct code for this rule with the "always" option:

    /*eslint comma-dangle: ["error", "always"]*/
    
    var foo = {
        bar: "baz",
        qux: "quux",
    };
    
    var arr = [1,2,];
    
    foo({
      bar: "baz",
      qux: "quux",
    });

    always-multiline

    Examples of incorrect code for this rule with the "always-multiline" option:

    /*eslint comma-dangle: ["error", "always-multiline"]*/
    
    var foo = {
        bar: "baz",
        qux: "quux"
    };
    
    var foo = { bar: "baz", qux: "quux", };
    
    var arr = [1,2,];
    
    var arr = [1,
        2,];
    
    var arr = [
        1,
        2
    ];
    
    foo({
      bar: "baz",
      qux: "quux"
    });

    Examples of correct code for this rule with the "always-multiline" option:

    /*eslint comma-dangle: ["error", "always-multiline"]*/
    
    var foo = {
        bar: "baz",
        qux: "quux",
    };
    
    var foo = {bar: "baz", qux: "quux"};
    var arr = [1,2];
    
    var arr = [1,
        2];
    
    var arr = [
        1,
        2,
    ];
    
    foo({
      bar: "baz",
      qux: "quux",
    });

    only-multiline

    Examples of incorrect code for this rule with the "only-multiline" option:

    /*eslint comma-dangle: ["error", "only-multiline"]*/
    
    var foo = { bar: "baz", qux: "quux", };
    
    var arr = [1,2,];
    
    var arr = [1,
        2,];

    Examples of correct code for this rule with the "only-multiline" option:

    /*eslint comma-dangle: ["error", "only-multiline"]*/
    
    var foo = {
        bar: "baz",
        qux: "quux",
    };
    
    var foo = {
        bar: "baz",
        qux: "quux"
    };
    
    var foo = {bar: "baz", qux: "quux"};
    var arr = [1,2];
    
    var arr = [1,
        2];
    
    var arr = [
        1,
        2,
    ];
    
    var arr = [
        1,
        2
    ];
    
    foo({
      bar: "baz",
      qux: "quux",
    });
    
    foo({
      bar: "baz",
      qux: "quux"
    });

    functions

    Examples of incorrect code for this rule with the {"functions": "never"} option:

    /*eslint comma-dangle: ["error", {"functions": "never"}]*/
    
    function foo(a, b,) {
    }
    
    foo(a, b,);
    new foo(a, b,);

    Examples of correct code for this rule with the {"functions": "never"} option:

    /*eslint comma-dangle: ["error", {"functions": "never"}]*/
    
    function foo(a, b) {
    }
    
    foo(a, b);
    new foo(a, b);

    Examples of incorrect code for this rule with the {"functions": "always"} option:

    /*eslint comma-dangle: ["error", {"functions": "always"}]*/
    
    function foo(a, b) {
    }
    
    foo(a, b);
    new foo(a, b);

    Examples of correct code for this rule with the {"functions": "always"} option:

    /*eslint comma-dangle: ["error", {"functions": "always"}]*/
    
    function foo(a, b,) {
    }
    
    foo(a, b,);
    new foo(a, b,);

    When Not To Use It

    You can turn this rule off if you are not concerned with dangling commas. Source: http://eslint.org/docs/rules/

    Unexpected mix of '||' and '&&'.
    Open

      assert(t.isIdentifier(key) || t.isLiteral(key) && typeof key.value === 'string', 'key must be a string or identifier');

    Disallow mixes of different operators (no-mixed-operators)

    Enclosing complex expressions by parentheses clarifies the developer's intention, which makes the code more readable. This rule warns when different operators are used consecutively without parentheses in an expression.

    var foo = a && b || c || d;    /*BAD: Unexpected mix of '&&' and '||'.*/
    var foo = (a && b) || c || d;  /*GOOD*/
    var foo = a && (b || c || d);  /*GOOD*/

    Rule Details

    This rule checks BinaryExpression and LogicalExpression.

    This rule may conflict with [no-extra-parens](no-extra-parens.md) rule. If you use both this and [no-extra-parens](no-extra-parens.md) rule together, you need to use the nestedBinaryExpressions option of [no-extra-parens](no-extra-parens.md) rule.

    Examples of incorrect code for this rule:

    /*eslint no-mixed-operators: "error"*/
    
    var foo = a && b < 0 || c > 0 || d + 1 === 0;
    var foo = a + b * c;

    Examples of correct code for this rule:

    /*eslint no-mixed-operators: "error"*/
    
    var foo = a || b || c;
    var foo = a && b && c;
    var foo = (a && b < 0) || c > 0 || d + 1 === 0;
    var foo = a && (b < 0 || c > 0 || d + 1 === 0);
    var foo = a + (b * c);
    var foo = (a + b) * c;

    Options

    {
        "no-mixed-operators": [
            "error",
            {
                "groups": [
                    ["+", "-", "*", "/", "%", "**"],
                    ["&", "|", "^", "~", "<<", ">>", ">>>"],
                    ["==", "!=", "===", "!==", ">", ">=", "<", "<="],
                    ["&&", "||"],
                    ["in", "instanceof"]
                ],
                "allowSamePrecedence": true
            }
        ]
    }

    This rule has 2 options.

    • groups (string[][]) - specifies groups to compare operators. When this rule compares two operators, if both operators are included in a same group, this rule checks it. Otherwise, this rule ignores it. This value is a list of groups. The group is a list of binary operators. Default is the groups for each kind of operators.
    • allowSamePrecedence (boolean) - specifies to allow mix of 2 operators if those have the same precedence. Default is true.

    groups

    The following operators can be used in groups option:

    • Arithmetic Operators: "+", "-", "*", "/", "%", "**"
    • Bitwise Operators: "&", "|", "^", "~", "<<", ">>", ">>>"
    • Comparison Operators: "==", "!=", "===", "!==", ">", ">=", "<", "<="
    • Logical Operators: "&&", "||"
    • Relational Operators: "in", "instanceof"

    Now, considers about {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} configure. This configure has 2 groups: bitwise operators and logical operators. This rule checks only if both operators are included in a same group. So, in this case, this rule comes to check between bitwise operators and between logical operators. This rule ignores other operators.

    Examples of incorrect code for this rule with {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} option:

    /*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/
    
    var foo = a && b < 0 || c > 0 || d + 1 === 0;
    var foo = a & b | c;

    Examples of correct code for this rule with {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]} option:

    /*eslint no-mixed-operators: ["error", {"groups": [["&", "|", "^", "~", "<<", ">>", ">>>"], ["&&", "||"]]}]*/
    
    var foo = a || b > 0 || c + 1 === 0;
    var foo = a && b > 0 && c + 1 === 0;
    var foo = (a && b < 0) || c > 0 || d + 1 === 0;
    var foo = a && (b < 0 ||  c > 0 || d + 1 === 0);
    var foo = (a & b) | c;
    var foo = a & (b | c);
    var foo = a + b * c;
    var foo = a + (b * c);
    var foo = (a + b) * c;

    allowSamePrecedence

    Examples of correct code for this rule with {"allowSamePrecedence": true} option:

    /*eslint no-mixed-operators: ["error", {"allowSamePrecedence": true}]*/
    
    // + and - have the same precedence.
    var foo = a + b - c;

    Examples of incorrect code for this rule with {"allowSamePrecedence": false} option:

    /*eslint no-mixed-operators: ["error", {"allowSamePrecedence": false}]*/
    
    // + and - have the same precedence.
    var foo = a + b - c;

    When Not To Use It

    If you don't want to be notified about mixed operators, then it's safe to disable this rule.

    Related Rules

    Unexpected string concatenation.
    Open

        css.push(indent(level) + '@' + generateMediaQueryName(query, options) + ' {');
    Severity: Minor
    Found in src/transformSpecificationIntoCSS.js by eslint

    Suggest using template literals instead of string concatenation. (prefer-template)

    In ES2015 (ES6), we can use template literals instead of string concatenation.

    var str = "Hello, " + name + "!";
    /*eslint-env es6*/
    
    var str = `Hello, ${name}!`;

    Rule Details

    This rule is aimed to flag usage of + operators with strings.

    Examples

    Examples of incorrect code for this rule:

    /*eslint prefer-template: "error"*/
    
    var str = "Hello, " + name + "!";
    var str = "Time: " + (12 * 60 * 60 * 1000);

    Examples of correct code for this rule:

    /*eslint prefer-template: "error"*/
    /*eslint-env es6*/
    
    var str = "Hello World!";
    var str = `Hello, ${name}!`;
    var str = `Time: ${12 * 60 * 60 * 1000}`;
    
    // This is reported by `no-useless-concat`.
    var str = "Hello, " + "World!";

    When Not To Use It

    This rule should not be used in ES3/5 environments.

    In ES2015 (ES6) or later, if you don't want to be notified about string concatenation, you can safely disable this rule.

    Related Rules

    Calls to require() should use string literals
    Open

          contextFileCache[file] = require(file);
    Severity: Minor
    Found in src/index.js by eslint

    For more information visit Source: http://eslint.org/docs/rules/

    Unexpected string concatenation.
    Open

        css.push(indent(level) + '}');
    Severity: Minor
    Found in src/transformSpecificationIntoCSS.js by eslint

    Suggest using template literals instead of string concatenation. (prefer-template)

    In ES2015 (ES6), we can use template literals instead of string concatenation.

    var str = "Hello, " + name + "!";
    /*eslint-env es6*/
    
    var str = `Hello, ${name}!`;

    Rule Details

    This rule is aimed to flag usage of + operators with strings.

    Examples

    Examples of incorrect code for this rule:

    /*eslint prefer-template: "error"*/
    
    var str = "Hello, " + name + "!";
    var str = "Time: " + (12 * 60 * 60 * 1000);

    Examples of correct code for this rule:

    /*eslint prefer-template: "error"*/
    /*eslint-env es6*/
    
    var str = "Hello World!";
    var str = `Hello, ${name}!`;
    var str = `Time: ${12 * 60 * 60 * 1000}`;
    
    // This is reported by `no-useless-concat`.
    var str = "Hello, " + "World!";

    When Not To Use It

    This rule should not be used in ES3/5 environments.

    In ES2015 (ES6) or later, if you don't want to be notified about string concatenation, you can safely disable this rule.

    Related Rules

    Unnecessary escape character: [.
    Open

    const hasAttachedSelector = /[^:\[]+[:\[]/;

    Disallow unnecessary escape usage (no-useless-escape)

    Escaping non-special characters in strings, template literals, and regular expressions doesn't have any effect, as demonstrated in the following example:

    let foo = "hol\a"; // > foo = "hola"
    let bar = `${foo}\!`; // > bar = "hola!"
    let baz = /\:/ // same functionality with /:/

    Rule Details

    This rule flags escapes that can be safely removed without changing behavior.

    Examples of incorrect code for this rule:

    /*eslint no-useless-escape: "error"*/
    
    "\'";
    '\"';
    "\#";
    "\e";
    `\"`;
    `\"${foo}\"`;
    `\#{foo}`;
    /\!/;
    /\@/;

    Examples of correct code for this rule:

    /*eslint no-useless-escape: "error"*/
    
    "\"";
    '\'';
    "\x12";
    "\u00a9";
    "\371";
    "xs\u2111";
    `\``;
    `\${${foo}\}`;
    `$\{${foo}\}`;
    /\\/g;
    /\t/g;
    /\w\$\*\^\./;

    When Not To Use It

    If you don't want to be notified about unnecessary escapes, you can safely disable this rule. Source: http://eslint.org/docs/rules/

    Unexpected string concatenation.
    Open

        return '_' + keys.length.toString(36).split('').reverse().join('');
    Severity: Minor
    Found in src/compressClassName.js by eslint

    Suggest using template literals instead of string concatenation. (prefer-template)

    In ES2015 (ES6), we can use template literals instead of string concatenation.

    var str = "Hello, " + name + "!";
    /*eslint-env es6*/
    
    var str = `Hello, ${name}!`;

    Rule Details

    This rule is aimed to flag usage of + operators with strings.

    Examples

    Examples of incorrect code for this rule:

    /*eslint prefer-template: "error"*/
    
    var str = "Hello, " + name + "!";
    var str = "Time: " + (12 * 60 * 60 * 1000);

    Examples of correct code for this rule:

    /*eslint prefer-template: "error"*/
    /*eslint-env es6*/
    
    var str = "Hello World!";
    var str = `Hello, ${name}!`;
    var str = `Time: ${12 * 60 * 60 * 1000}`;
    
    // This is reported by `no-useless-concat`.
    var str = "Hello, " + "World!";

    When Not To Use It

    This rule should not be used in ES3/5 environments.

    In ES2015 (ES6) or later, if you don't want to be notified about string concatenation, you can safely disable this rule.

    Related Rules

    Unexpected string concatenation.
    Open

        result += options.prefixes.map(p => p.replace(invalidChars, '_')).join('-') + '-';
    Severity: Minor
    Found in src/generateClassName.js by eslint

    Suggest using template literals instead of string concatenation. (prefer-template)

    In ES2015 (ES6), we can use template literals instead of string concatenation.

    var str = "Hello, " + name + "!";
    /*eslint-env es6*/
    
    var str = `Hello, ${name}!`;

    Rule Details

    This rule is aimed to flag usage of + operators with strings.

    Examples

    Examples of incorrect code for this rule:

    /*eslint prefer-template: "error"*/
    
    var str = "Hello, " + name + "!";
    var str = "Time: " + (12 * 60 * 60 * 1000);

    Examples of correct code for this rule:

    /*eslint prefer-template: "error"*/
    /*eslint-env es6*/
    
    var str = "Hello World!";
    var str = `Hello, ${name}!`;
    var str = `Time: ${12 * 60 * 60 * 1000}`;
    
    // This is reported by `no-useless-concat`.
    var str = "Hello, " + "World!";

    When Not To Use It

    This rule should not be used in ES3/5 environments.

    In ES2015 (ES6) or later, if you don't want to be notified about string concatenation, you can safely disable this rule.

    Related Rules

    Unexpected string concatenation.
    Open

          assert(false, err + '\nWhen providing a function to cssInJS, all references must be in the function\'s scope.');

    Suggest using template literals instead of string concatenation. (prefer-template)

    In ES2015 (ES6), we can use template literals instead of string concatenation.

    var str = "Hello, " + name + "!";
    /*eslint-env es6*/
    
    var str = `Hello, ${name}!`;

    Rule Details

    This rule is aimed to flag usage of + operators with strings.

    Examples

    Examples of incorrect code for this rule:

    /*eslint prefer-template: "error"*/
    
    var str = "Hello, " + name + "!";
    var str = "Time: " + (12 * 60 * 60 * 1000);

    Examples of correct code for this rule:

    /*eslint prefer-template: "error"*/
    /*eslint-env es6*/
    
    var str = "Hello World!";
    var str = `Hello, ${name}!`;
    var str = `Time: ${12 * 60 * 60 * 1000}`;
    
    // This is reported by `no-useless-concat`.
    var str = "Hello, " + "World!";

    When Not To Use It

    This rule should not be used in ES3/5 environments.

    In ES2015 (ES6) or later, if you don't want to be notified about string concatenation, you can safely disable this rule.

    Related Rules

    Unexpected string concatenation.
    Open

        value = '' + value + 'px';
    Severity: Minor
    Found in src/buildCSSRule.js by eslint

    Suggest using template literals instead of string concatenation. (prefer-template)

    In ES2015 (ES6), we can use template literals instead of string concatenation.

    var str = "Hello, " + name + "!";
    /*eslint-env es6*/
    
    var str = `Hello, ${name}!`;

    Rule Details

    This rule is aimed to flag usage of + operators with strings.

    Examples

    Examples of incorrect code for this rule:

    /*eslint prefer-template: "error"*/
    
    var str = "Hello, " + name + "!";
    var str = "Time: " + (12 * 60 * 60 * 1000);

    Examples of correct code for this rule:

    /*eslint prefer-template: "error"*/
    /*eslint-env es6*/
    
    var str = "Hello World!";
    var str = `Hello, ${name}!`;
    var str = `Time: ${12 * 60 * 60 * 1000}`;
    
    // This is reported by `no-useless-concat`.
    var str = "Hello, " + "World!";

    When Not To Use It

    This rule should not be used in ES3/5 environments.

    In ES2015 (ES6) or later, if you don't want to be notified about string concatenation, you can safely disable this rule.

    Related Rules

    Severity
    Category
    Status
    Source
    Language