useVarsOnTop (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.4.12
Diagnostic Category: lint/style/useVarsOnTop
This rule isn’t recommended, so you need to enable it.
This rule doesn’t have a fix.
The default severity of this rule is information.
Sources:
- Same as vars-on-top

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "style": {
5
        "useVarsOnTop": "error"
6
      }
7
    }
8
  }
9
}

Description

Require var declarations to appear at the top of their containing scope.

Because var declarations are hoisted to the top of the nearest function, script, module, or static block, placing them later in the body makes code harder to follow. Keeping them at the top makes the scope’s variable declarations easier to find. Note that this is not a problem for let and const declarations, which are block-scoped and not hoisted.

This rule only allows leading standalone var statements. At module scope, leading export var declarations are allowed too. Directives and imports may appear before them.

Examples

Invalid

1
function f() {
2
    doSomething();
3
    var value = 1;
4
}

code-block.js:3:5 lint/style/useVarsOnTop ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ℹ This var declaration is not at the top of its containing scope.
  
    1 │ function f() {
    2 │     doSomething();
  > 3 │     var value = 1;
      │     ^^^^^^^^^^^^^
    4 │ }
    5 │ 
  
  ℹ var declarations are hoisted to the top of their enclosing function, script, module, or static block, so declaring them later makes the scope harder to read.
  
  ℹ Move this var declaration before other statements in the same scope. At module scope, imports may remain before it.

Valid

1
function f() {
2
    var value = 1;
3
    doSomething(value);
4
}