Skip to content
Biome
Docs Enterprise Playground
Blog

noTripleSlashReference (JavaScript)

Language JavaScript (and super languages)

Summary

Section titled “Summary”

How to configure

Section titled “How to configure”
biome.json
{
  "linter": {
    "rules": {
      "nursery": {
        "noTripleSlashReference": "error"
      }
    }
  }
}

Description

Section titled “Description”

Disallow triple-slash reference comments that can be replaced by imports.

A triple-slash reference is a special TypeScript comment at the top of a file, such as /// <reference path="./globals.d.ts" />. It tells TypeScript to load another file, package, or built-in library before checking the current file. This was the main way to share code between files before JavaScript had import statements.

An import statement shows which file or package the code depends on, and every modern tool understands it. A triple-slash reference adds types to the whole file without making the dependency visible in the code.

By default, this rule reports:

  • every /// <reference path="..." /> comment;
  • every /// <reference types="..." /> comment for a package that the file also imports, because the import already loads the package’s types.

Only comments at the very top of the file are checked, before any code. TypeScript treats /// comments that come later as ordinary comments.

Examples

Section titled “Examples”

Invalid

Section titled “Invalid”
/// <reference path="./globals.d.ts" />
code-block.ts:1:1 lint/nursery/noTripleSlashReference ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Unexpected triple-slash reference to ./globals.d.ts.
  
  > 1 │ /// <reference path="./globals.d.ts" />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ A triple-slash reference loads code for the whole file without showing which parts the file uses.
  
  ℹ Use an import statement to load the file instead.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
  
/// <reference types="lodash" />
import { debounce } from "lodash";
code-block.ts:1:1 lint/nursery/noTripleSlashReference ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ This triple-slash reference to lodash is redundant.
  
  > 1 │ /// <reference types="lodash" />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ import { debounce } from "lodash";
    3 │ 
  
  ℹ The file already imports lodash here, which also loads its types.
  
    1 │ /// <reference types="lodash" />
  > 2 │ import { debounce } from "lodash";
      │                          ^^^^^^^^
    3 │ 
  
  ℹ Remove the triple-slash reference.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

Valid

Section titled “Valid”
/// <reference types="vite/client" />
/// <reference lib="dom" />
import "./globals";

Options

Section titled “Options”

Each option controls one kind of reference. "always" allows the reference and "never" reports it.

lib

Section titled “lib”

Type: "always" | "never"

Default: "always"

Controls /// <reference lib="..." /> comments, which load a built-in TypeScript library such as dom or es2020.

biome.json
{
  "linter": {
    "rules": {
      "nursery": {
        "noTripleSlashReference": {
          "level": "on",
          "options": {
            "lib": "never"
          }
        }
      }
    }
  }
}

Invalid

Section titled “Invalid”
/// <reference lib="dom" />
code-block.ts:1:1 lint/nursery/noTripleSlashReference ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Unexpected triple-slash reference to dom.
  
  > 1 │ /// <reference lib="dom" />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ A triple-slash reference loads code for the whole file without showing which parts the file uses.
  
  ℹ Add the library to the lib option of your tsconfig.json file instead.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.

path

Section titled “path”

Type: "always" | "never"

Default: "never"

Controls /// <reference path="..." /> comments, which load another file.

biome.json
{
  "linter": {
    "rules": {
      "nursery": {
        "noTripleSlashReference": {
          "level": "on",
          "options": {
            "path": "always"
          }
        }
      }
    }
  }
}

Valid

Section titled “Valid”
/// <reference path="./globals.d.ts" />

types

Section titled “types”

Type: "always" | "never" | "preferImport"

Default: "preferImport"

Controls /// <reference types="..." /> comments, which load the types of a package. With "preferImport", the comment is reported only when the file also imports the same package. With "never", every such comment is reported.

biome.json
{
  "linter": {
    "rules": {
      "nursery": {
        "noTripleSlashReference": {
          "level": "on",
          "options": {
            "types": "never"
          }
        }
      }
    }
  }
}

Invalid

Section titled “Invalid”
/// <reference types="vite/client" />
code-block.ts:1:1 lint/nursery/noTripleSlashReference ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ⚠ Unexpected triple-slash reference to vite/client.
  
  > 1 │ /// <reference types="vite/client" />
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ A triple-slash reference loads code for the whole file without showing which parts the file uses.
  
  ℹ Import from the package instead, or add the package to the types option of your tsconfig.json file.
  
  ℹ This rule belongs to the nursery group, which means it is not yet stable and may change in the future. Visit https://biomejs.dev/linter/#nursery for more information.
Section titled “Related links”

Sponsored by

Copyright (c) 2023-present Biome Developers and Contributors.