codeforamerica/ohana-web-search

View on GitHub

Showing 2,141 of 2,141 total issues

Selector should have depth of applicability no greater than 3, but was 5
Open

        h1.name {
Severity: Minor
Found in app/assets/stylesheets/_base.scss by scss-lint

Name of variable greyscale_dark should be written in all lowercase letters with hyphens instead of underscores
Open

          color: $greyscale_dark;
Severity: Minor
Found in app/assets/stylesheets/_base.scss by scss-lint

Selector should have depth of applicability no greater than 3, but was 6
Open

          span {
Severity: Minor
Found in app/assets/stylesheets/_base.scss by scss-lint

Selector infoBox should be written in lowercase with hyphens
Open

  .infoBox {
Severity: Minor
Found in app/assets/stylesheets/_base.scss by scss-lint

Avoid using id selectors
Open

#map-size-control {
Severity: Minor
Found in app/assets/stylesheets/_base.scss by scss-lint

Avoid using id selectors
Open

#detail-info {
Severity: Minor
Found in app/assets/stylesheets/_base.scss by scss-lint

Property border-bottom already defined on line 969
Open

    border-bottom: 1px solid midtone($black, .1);
Severity: Minor
Found in app/assets/stylesheets/_base.scss by scss-lint

Properties should be ordered list-style-type, margin-bottom, margin-left
Open

    margin-bottom: 0;
Severity: Minor
Found in app/assets/stylesheets/_base.scss by scss-lint

Property color already defined on line 1061
Open

      color: rgba($main-list-mark-color, .4);
Severity: Minor
Found in app/assets/stylesheets/_base.scss by scss-lint

Selector should have depth of applicability no greater than 3, but was 5
Open

        .location-sidebar-content {
Severity: Minor
Found in app/assets/stylesheets/_base.scss by scss-lint

Multiple spaces found before 'require'.
Open

const erb =  require('./loaders/erb')
Severity: Minor
Found in config/webpack/environment.js by eslint

Disallow multiple spaces (no-multi-spaces)

Multiple spaces in a row that are not used for indentation are typically mistakes. For example:

if(foo  === "bar") {}

It's hard to tell, but there are two spaces between foo and ===. Multiple spaces such as this are generally frowned upon in favor of single spaces:

if(foo === "bar") {}

Rule Details

This rule aims to disallow multiple whitespace around logical expressions, conditional expressions, declarations, array elements, object properties, sequences and function parameters.

Examples of incorrect code for this rule:

/*eslint no-multi-spaces: "error"*/

var a =  1;

if(foo   === "bar") {}

a <<  b

var arr = [1,  2];

a ?  b: c

Examples of correct code for this rule:

/*eslint no-multi-spaces: "error"*/

var a = 1;

if(foo === "bar") {}

a << b

var arr = [1, 2];

a ? b: c

Options

To avoid contradictions if some other rules require multiple spaces, this rule has an option to ignore certain node types in the abstract syntax tree (AST) of JavaScript code.

exceptions

The exceptions object expects property names to be AST node types as defined by ESTree. The easiest way to determine the node types for exceptions is to use the online demo.

Only the Property node type is ignored by default, because for the [key-spacing](key-spacing.md) rule some alignment options require multiple spaces in properties of object literals.

Examples of correct code for the default "exceptions": { "Property": true } option:

/*eslint no-multi-spaces: "error"*/
/*eslint key-spacing: ["error", { align: "value" }]*/

var obj = {
    first:  "first",
    second: "second"
};

Examples of incorrect code for the "exceptions": { "Property": false } option:

/*eslint no-multi-spaces: ["error", { exceptions: { "Property": false } }]*/
/*eslint key-spacing: ["error", { align: "value" }]*/

var obj = {
    first:  "first",
    second: "second"
};

Examples of correct code for the "exceptions": { "BinaryExpression": true } option:

/*eslint no-multi-spaces: ["error", { exceptions: { "BinaryExpression": true } }]*/

var a = 1  *  2;

Examples of correct code for the "exceptions": { "VariableDeclarator": true } option:

/*eslint no-multi-spaces: ["error", { exceptions: { "VariableDeclarator": true } }]*/

var someVar      = 'foo';
var someOtherVar = 'barBaz';

Examples of correct code for the "exceptions": { "ImportDeclaration": true } option:

/*eslint no-multi-spaces: ["error", { exceptions: { "ImportDeclaration": true } }]*/

import mod          from 'mod';
import someOtherMod from 'some-other-mod';

When Not To Use It

If you don't want to check and disallow multiple spaces, then you should turn this rule off.

Related Rules

  • [key-spacing](key-spacing.md)
  • [space-infix-ops](space-infix-ops.md)
  • [space-in-brackets](space-in-brackets.md) (deprecated)
  • [space-in-parens](space-in-parens.md)
  • [space-after-keywords](space-after-keywords)
  • [space-unary-ops](space-unary-ops)
  • [space-return-throw-case](space-return-throw-case) Source: http://eslint.org/docs/rules/

Missing semicolon.
Open

environment.loaders.append('erb', erb)
Severity: Minor
Found in config/webpack/environment.js by eslint

require or disallow semicolons instead of ASI (semi)

JavaScript is unique amongst the C-like languages in that it doesn't require semicolons at the end of each statement. In many cases, the JavaScript engine can determine that a semicolon should be in a certain spot and will automatically add it. This feature is known as automatic semicolon insertion (ASI) and is considered one of the more controversial features of JavaScript. For example, the following lines are both valid:

var name = "ESLint"
var website = "eslint.org";

On the first line, the JavaScript engine will automatically insert a semicolon, so this is not considered a syntax error. The JavaScript engine still knows how to interpret the line and knows that the line end indicates the end of the statement.

In the debate over ASI, there are generally two schools of thought. The first is that we should treat ASI as if it didn't exist and always include semicolons manually. The rationale is that it's easier to always include semicolons than to try to remember when they are or are not required, and thus decreases the possibility of introducing an error.

However, the ASI mechanism can sometimes be tricky to people who are using semicolons. For example, consider this code:

return
{
    name: "ESLint"
};

This may look like a return statement that returns an object literal, however, the JavaScript engine will interpret this code as:

return;
{
    name: "ESLint";
}

Effectively, a semicolon is inserted after the return statement, causing the code below it (a labeled literal inside a block) to be unreachable. This rule and the [no-unreachable](no-unreachable.md) rule will protect your code from such cases.

On the other side of the argument are those who says that since semicolons are inserted automatically, they are optional and do not need to be inserted manually. However, the ASI mechanism can also be tricky to people who don't use semicolons. For example, consider this code:

var globalCounter = { }

(function () {
    var n = 0
    globalCounter.increment = function () {
        return ++n
    }
})()

In this example, a semicolon will not be inserted after the first line, causing a run-time error (because an empty object is called as if it's a function). The [no-unexpected-multiline](no-unexpected-multiline.md) rule can protect your code from such cases.

Although ASI allows for more freedom over your coding style, it can also make your code behave in an unexpected way, whether you use semicolons or not. Therefore, it is best to know when ASI takes place and when it does not, and have ESLint protect your code from these potentially unexpected cases. In short, as once described by Isaac Schlueter, a \n character always ends a statement (just like a semicolon) unless one of the following is true:

  1. The statement has an unclosed paren, array literal, or object literal or ends in some other way that is not a valid way to end a statement. (For instance, ending with . or ,.)
  2. The line is -- or ++ (in which case it will decrement/increment the next token.)
  3. It is a for(), while(), do, if(), or else, and there is no {
  4. The next line starts with [, (, +, *, /, -, ,, ., or some other binary operator that can only be found between two tokens in a single expression.

Rule Details

This rule enforces consistent use of semicolons.

Options

This rule has two options, a string option and an object option.

String option:

  • "always" (default) requires semicolons at the end of statements
  • "never" disallows semicolons as the end of statements (except to disambiguate statements beginning with [, (, /, +, or -)

Object option:

  • "omitLastInOneLineBlock": true ignores the last semicolon in a block in which its braces (and therefore the content of the block) are in the same line

always

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

/*eslint semi: ["error", "always"]*/

var name = "ESLint"

object.method = function() {
    // ...
}

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

/*eslint semi: "error"*/

var name = "ESLint";

object.method = function() {
    // ...
};

never

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

/*eslint semi: ["error", "never"]*/

var name = "ESLint";

object.method = function() {
    // ...
};

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

/*eslint semi: ["error", "never"]*/

var name = "ESLint"

object.method = function() {
    // ...
}

var name = "ESLint"

;(function() {
    // ...
})()

omitLastInOneLineBlock

Examples of additional correct code for this rule with the "always", { "omitLastInOneLineBlock": true } options:

/*eslint semi: ["error", "always", { "omitLastInOneLineBlock": true}] */

if (foo) { bar() }

if (foo) { bar(); baz() }

When Not To Use It

If you do not want to enforce semicolon usage (or omission) in any particular way, then you can turn this rule off.

Further Reading

Related Rules

  • [no-extra-semi](no-extra-semi.md)
  • [no-unexpected-multiline](no-unexpected-multiline.md)
  • [semi-spacing](semi-spacing.md) Source: http://eslint.org/docs/rules/

Missing semicolon.
Open

const environment = require('./environment')
Severity: Minor
Found in config/webpack/test.js by eslint

require or disallow semicolons instead of ASI (semi)

JavaScript is unique amongst the C-like languages in that it doesn't require semicolons at the end of each statement. In many cases, the JavaScript engine can determine that a semicolon should be in a certain spot and will automatically add it. This feature is known as automatic semicolon insertion (ASI) and is considered one of the more controversial features of JavaScript. For example, the following lines are both valid:

var name = "ESLint"
var website = "eslint.org";

On the first line, the JavaScript engine will automatically insert a semicolon, so this is not considered a syntax error. The JavaScript engine still knows how to interpret the line and knows that the line end indicates the end of the statement.

In the debate over ASI, there are generally two schools of thought. The first is that we should treat ASI as if it didn't exist and always include semicolons manually. The rationale is that it's easier to always include semicolons than to try to remember when they are or are not required, and thus decreases the possibility of introducing an error.

However, the ASI mechanism can sometimes be tricky to people who are using semicolons. For example, consider this code:

return
{
    name: "ESLint"
};

This may look like a return statement that returns an object literal, however, the JavaScript engine will interpret this code as:

return;
{
    name: "ESLint";
}

Effectively, a semicolon is inserted after the return statement, causing the code below it (a labeled literal inside a block) to be unreachable. This rule and the [no-unreachable](no-unreachable.md) rule will protect your code from such cases.

On the other side of the argument are those who says that since semicolons are inserted automatically, they are optional and do not need to be inserted manually. However, the ASI mechanism can also be tricky to people who don't use semicolons. For example, consider this code:

var globalCounter = { }

(function () {
    var n = 0
    globalCounter.increment = function () {
        return ++n
    }
})()

In this example, a semicolon will not be inserted after the first line, causing a run-time error (because an empty object is called as if it's a function). The [no-unexpected-multiline](no-unexpected-multiline.md) rule can protect your code from such cases.

Although ASI allows for more freedom over your coding style, it can also make your code behave in an unexpected way, whether you use semicolons or not. Therefore, it is best to know when ASI takes place and when it does not, and have ESLint protect your code from these potentially unexpected cases. In short, as once described by Isaac Schlueter, a \n character always ends a statement (just like a semicolon) unless one of the following is true:

  1. The statement has an unclosed paren, array literal, or object literal or ends in some other way that is not a valid way to end a statement. (For instance, ending with . or ,.)
  2. The line is -- or ++ (in which case it will decrement/increment the next token.)
  3. It is a for(), while(), do, if(), or else, and there is no {
  4. The next line starts with [, (, +, *, /, -, ,, ., or some other binary operator that can only be found between two tokens in a single expression.

Rule Details

This rule enforces consistent use of semicolons.

Options

This rule has two options, a string option and an object option.

String option:

  • "always" (default) requires semicolons at the end of statements
  • "never" disallows semicolons as the end of statements (except to disambiguate statements beginning with [, (, /, +, or -)

Object option:

  • "omitLastInOneLineBlock": true ignores the last semicolon in a block in which its braces (and therefore the content of the block) are in the same line

always

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

/*eslint semi: ["error", "always"]*/

var name = "ESLint"

object.method = function() {
    // ...
}

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

/*eslint semi: "error"*/

var name = "ESLint";

object.method = function() {
    // ...
};

never

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

/*eslint semi: ["error", "never"]*/

var name = "ESLint";

object.method = function() {
    // ...
};

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

/*eslint semi: ["error", "never"]*/

var name = "ESLint"

object.method = function() {
    // ...
}

var name = "ESLint"

;(function() {
    // ...
})()

omitLastInOneLineBlock

Examples of additional correct code for this rule with the "always", { "omitLastInOneLineBlock": true } options:

/*eslint semi: ["error", "always", { "omitLastInOneLineBlock": true}] */

if (foo) { bar() }

if (foo) { bar(); baz() }

When Not To Use It

If you do not want to enforce semicolon usage (or omission) in any particular way, then you can turn this rule off.

Further Reading

Related Rules

  • [no-extra-semi](no-extra-semi.md)
  • [no-unexpected-multiline](no-unexpected-multiline.md)
  • [semi-spacing](semi-spacing.md) Source: http://eslint.org/docs/rules/

Use // comments everywhere
Open

/* ==========================================================================
Severity: Minor
Found in app/assets/stylesheets/_base.scss by scss-lint

Color literals like #b3d4fc should only be used in variable declarations; they should be referred to via variable everywhere else.
Open

    background: #b3d4fc;
Severity: Minor
Found in app/assets/stylesheets/_base.scss by scss-lint

Expected property shorthand.
Open

  getStyle:getStyle,
Severity: Minor
Found in app/javascript/app/util/util.js by eslint

Require Object Literal Shorthand Syntax (object-shorthand)

EcmaScript 6 provides a concise form for defining object literal methods and properties. This syntax can make defining complex object literals much cleaner.

Here are a few common examples using the ES5 syntax:

// properties
var foo = {
    x: x,
    y: y,
    z: z,
};

// methods
var foo = {
    a: function() {},
    b: function() {}
};

Now here are ES6 equivalents:

/*eslint-env es6*/

// properties
var foo = {x, y, z};

// methods
var foo = {
    a() {},
    b() {}
};

Rule Details

This rule enforces the use of the shorthand syntax. This applies to all methods (including generators) defined in object literals and any properties defined where the key name matches name of the assigned variable.

Each of the following properties would warn:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    w: function() {},
    x: function *() {},
    [y]: function() {},
    z: z
};

In that case the expected syntax would have been:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    w() {},
    *x() {},
    [y]() {},
    z
};

This rule does not flag arrow functions inside of object literals. The following will not warn:

/*eslint object-shorthand: "error"*/
/*eslint-env es6*/

var foo = {
    x: (y) => y
};

Options

The rule takes an option which specifies when it should be applied. It can be set to one of the following values:

  • "always" (default) expects that the shorthand will be used whenever possible.
  • "methods" ensures the method shorthand is used (also applies to generators).
  • "properties" ensures the property shorthand is used (where the key and variable name match).
  • "never" ensures that no property or method shorthand is used in any object literal.
  • "consistent" ensures that either all shorthand or all longform will be used in an object literal.
  • "consistent-as-needed" ensures that either all shorthand or all longform will be used in an object literal, but ensures all shorthand whenever possible.

You can set the option in configuration like this:

{
    "object-shorthand": ["error", "always"]
}

Additionally, the rule takes an optional object configuration:

  • "avoidQuotes": true indicates that longform syntax is preferred whenever the object key is a string literal (default: false). Note that this option can only be enabled when the string option is set to "always", "methods", or "properties".
  • "ignoreConstructors": true can be used to prevent the rule from reporting errors for constructor functions. (By default, the rule treats constructors the same way as other functions.) Note that this option can only be enabled when the string option is set to "always" or "methods".
  • "avoidExplicitReturnArrows": true indicates that methods are preferred over explicit-return arrow functions for function properties. (By default, the rule allows either of these.) Note that this option can only be enabled when the string option is set to "always" or "methods".

avoidQuotes

{
    "object-shorthand": ["error", "always", { "avoidQuotes": true }]
}

Example of incorrect code for this rule with the "always", { "avoidQuotes": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/

var foo = {
    "bar-baz"() {}
};

Example of correct code for this rule with the "always", { "avoidQuotes": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidQuotes": true }]*/
/*eslint-env es6*/

var foo = {
    "bar-baz": function() {},
    "qux": qux
};

ignoreConstructors

{
    "object-shorthand": ["error", "always", { "ignoreConstructors": true }]
}

Example of correct code for this rule with the "always", { "ignoreConstructors": true } option:

/*eslint object-shorthand: ["error", "always", { "ignoreConstructors": true }]*/
/*eslint-env es6*/

var foo = {
    ConstructorFunction: function() {}
};

avoidExplicitReturnArrows

{
    "object-shorthand": ["error", "always", { "avoidExplicitReturnArrows": true }]
}

Example of incorrect code for this rule with the "always", { "avoidExplicitReturnArrows": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/

var foo = {
  foo: (bar, baz) => {
    return bar + baz;
  },

  qux: (foobar) => {
    return foobar * 2;
  }
};

Example of correct code for this rule with the "always", { "avoidExplicitReturnArrows": true } option:

/*eslint object-shorthand: ["error", "always", { "avoidExplicitReturnArrows": true }]*/
/*eslint-env es6*/

var foo = {
  foo(bar, baz) {
    return bar + baz;
  },

  qux: foobar => foobar * 2
};

Example of incorrect code for this rule with the "consistent" option:

/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/

var foo = {
    a,
    b: "foo",
};

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

/*eslint object-shorthand: [2, "consistent"]*/
/*eslint-env es6*/

var foo = {
    a: a,
    b: "foo"
};

var bar = {
    a,
    b,
};

Example of incorrect code with the "consistent-as-needed" option, which is very similar to "consistent":

/*eslint object-shorthand: [2, "consistent-as-needed"]*/
/*eslint-env es6*/

var foo = {
    a: a,
    b: b,
};

When Not To Use It

Anyone not yet in an ES6 environment would not want to apply this rule. Others may find the terseness of the shorthand syntax harder to read and may not want to encourage it with this rule.

Further Reading

Object initializer - MDN Source: http://eslint.org/docs/rules/

Unnecessary escape character: -.
Open

    styleProp = styleProp.replace(/\-(\w)/g, function(str, letter) {
Severity: Minor
Found in app/javascript/app/util/util.js by eslint

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/

Color literals like #ccc should only be used in variable declarations; they should be referred to via variable everywhere else.
Open

    border-top: 1px solid #ccc;
Severity: Minor
Found in app/assets/stylesheets/_base.scss by scss-lint

Properties should be ordered font-size, margin-left, padding-bottom, padding-top
Open

        padding-top: 4px;
Severity: Minor
Found in app/assets/stylesheets/_base.scss by scss-lint

'value' is already declared in the upper scope.
Open

      return (function(value) {
Severity: Minor
Found in app/javascript/app/util/util.js by eslint

disallow variable declarations from shadowing variables declared in the outer scope (no-shadow)

Shadowing is the process by which a local variable shares the same name as a variable in its containing scope. For example:

var a = 3;
function b() {
    var a = 10;
}

In this case, the variable a inside of b() is shadowing the variable a in the global scope. This can cause confusion while reading the code and it's impossible to access the global variable.

Rule Details

This rule aims to eliminate shadowed variable declarations.

Examples of incorrect code for this rule:

/*eslint no-shadow: "error"*/
/*eslint-env es6*/

var a = 3;
function b() {
    var a = 10;
}

var b = function () {
    var a = 10;
}

function b(a) {
    a = 10;
}
b(a);

if (true) {
    let a = 5;
}

Options

This rule takes one option, an object, with properties "builtinGlobals", "hoist" and "allow".

{
    "no-shadow": ["error", { "builtinGlobals": false, "hoist": "functions", "allow": [] }]
}

builtinGlobals

The builtinGlobals option is false by default. If it is true, the rule prevents shadowing of built-in global variables: Object, Array, Number, and so on.

Examples of incorrect code for the { "builtinGlobals": true } option:

/*eslint no-shadow: ["error", { "builtinGlobals": true }]*/

function foo() {
    var Object = 0;
}

hoist

The hoist option has three settings:

  • functions (by default) - reports shadowing before the outer functions are defined.
  • all - reports all shadowing before the outer variables/functions are defined.
  • never - never report shadowing before the outer variables/functions are defined.

hoist: functions

Examples of incorrect code for the default { "hoist": "functions" } option:

/*eslint no-shadow: ["error", { "hoist": "functions" }]*/
/*eslint-env es6*/

if (true) {
    let b = 6;
}

function b() {}

Although let b in the if statement is before the function declaration in the outer scope, it is incorrect.

Examples of correct code for the default { "hoist": "functions" } option:

/*eslint no-shadow: ["error", { "hoist": "functions" }]*/
/*eslint-env es6*/

if (true) {
    let a = 3;
}

let a = 5;

Because let a in the if statement is before the variable declaration in the outer scope, it is correct.

hoist: all

Examples of incorrect code for the { "hoist": "all" } option:

/*eslint no-shadow: ["error", { "hoist": "all" }]*/
/*eslint-env es6*/

if (true) {
    let a = 3;
    let b = 6;
}

let a = 5;
function b() {}

hoist: never

Examples of correct code for the { "hoist": "never" } option:

/*eslint no-shadow: ["error", { "hoist": "never" }]*/
/*eslint-env es6*/

if (true) {
    let a = 3;
    let b = 6;
}

let a = 5;
function b() {}

Because let a and let b in the if statement are before the declarations in the outer scope, they are correct.

allow

The allow option is an array of identifier names for which shadowing is allowed. For example, "resolve", "reject", "done", "cb".

Examples of correct code for the { "allow": ["done"] } option:

/*eslint no-shadow: ["error", { "allow": ["done"] }]*/
/*eslint-env es6*/

import async from 'async';

function foo(done) {
  async.map([1, 2], function (e, done) {
    done(null, e * 2)
  }, done);
}

foo(function (err, result) {
  console.log({ err, result });
});

Further Reading

Related Rules

Severity
Category
Status
Source
Language