triple-slash-reference
Disallow certain triple slash directives in favor of ES6-style import declarations.
Extending "plugin:@typescript-eslint/recommended"
in an ESLint configuration enables this rule.
TypeScript's ///
triple-slash references are a way to indicate that types from another module are available in a file.
Use of triple-slash reference type directives is generally discouraged in favor of ECMAScript Module import
s.
This rule reports on the use of /// <reference lib="..." />
, /// <reference path="..." />
, or /// <reference types="..." />
directives.
module.exports = {
"rules": {
"@typescript-eslint/triple-slash-reference": "error"
}
};
Try this rule in the playground ↗
Options
This rule accepts the following options:
type Options = [
{
lib?: 'always' | 'never';
path?: 'always' | 'never';
types?: 'always' | 'never' | 'prefer-import';
},
];
const defaultOptions: Options = [
{ lib: 'always', path: 'never', types: 'prefer-import' },
];
Any number of the three kinds of references can be specified as an option.
Specifying 'always'
disables this lint rule for that kind of reference.
lib
When set to 'never'
, bans /// <reference lib="..." />
and enforces using an import
instead:
- ❌ Incorrect
- ✅ Correct
/// <reference lib="code" />
globalThis.value;
Open in Playgroundimport { value } from 'code';
Open in Playgroundpath
When set to 'never'
, bans /// <reference path="..." />
and enforces using an import
instead:
- ❌ Incorrect
- ✅ Correct
/// <reference path="code" />
globalThis.value;
Open in Playgroundimport { value } from 'code';
Open in Playgroundtypes
When set to 'never'
, bans /// <reference types="..." />
and enforces using an import
instead:
- ❌ Incorrect
- ✅ Correct
/// <reference types="code" />
globalThis.value;
Open in Playgroundimport { value } from 'code';
Open in PlaygroundThe types
option may alternately be given a "prefer-import"
value.
Doing so indicates the rule should only report if there is already an import
from the same location:
- ❌ Incorrect
- ✅ Correct
/// <reference types="code" />
import { valueA } from 'code';
globalThis.valueB;
Open in Playgroundimport { valueA, valueB } from 'code';
Open in PlaygroundWhen Not To Use It
Most modern TypeScript projects generally use import
statements to bring in types.
It's rare to need a ///
triple-slash reference outside of auto-generated code.
If your project is a rare one with one of those use cases, this rule might not be for you.
You might consider using ESLint disable comments for those specific situations instead of completely disabling this rule.
When Not To Use It
If you want to use all flavors of triple slash reference directives.