@typescript-eslint/parser
Advanced tools
The @typescript-eslint/parser is an ESLint parser that allows for the analysis and linting of TypeScript code. It is part of the TypeScript-ESLint project, which aims to bring ESLint's powerful static analysis capabilities to TypeScript codebases. The parser converts TypeScript source code into an ESTree-compatible form so that it can be used by ESLint for linting and other code analysis tasks.
Parsing TypeScript code
This feature allows the parser to read TypeScript files and produce an abstract syntax tree (AST) that is compatible with ESLint, enabling it to understand and lint TypeScript syntax.
const { ESLint } = require('eslint');
async function main() {
const eslint = new ESLint({
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaVersion: 2020,
sourceType: 'module',
project: './tsconfig.json'
}
});
const results = await eslint.lintFiles(['src/**/*.ts']);
// Handle the results
}
main();Integration with ESLint rules
The parser can be used in conjunction with ESLint rules, including those specifically designed for TypeScript, to enforce code quality and style guidelines.
module.exports = {
parser: '@typescript-eslint/parser',
extends: [
'plugin:@typescript-eslint/recommended'
],
rules: {
'@typescript-eslint/no-unused-vars': 'error',
'@typescript-eslint/explicit-function-return-type': 'warn'
}
};babel-eslint is an ESLint parser that allows you to lint all valid Babel code with ESLint. While it is not specifically designed for TypeScript, it can be used to lint code that uses Babel for transpilation, including TypeScript when used with the appropriate Babel plugins.
This is a deprecated package that was used to provide ESLint rules for TypeScript before the TypeScript-ESLint project was created. It has been replaced by the @typescript-eslint/parser and typescript-eslint/eslint-plugin packages.
An ESLint parser which leverages TypeScript ESTree to allow for ESLint to lint TypeScript source code.
You can find our Getting Started docs here
These docs walk you through setting up ESLint, this parser, and our plugin. If you know what you're doing and just want to quick start, read on...
$ yarn add -D typescript @typescript-eslint/parser
$ npm i --save-dev typescript @typescript-eslint/parser
In your ESLint configuration file, set the parser property:
{
"parser": "@typescript-eslint/parser"
}
There is sometimes an incorrect assumption that the parser itself is what does everything necessary to facilitate the use of ESLint with TypeScript. In actuality, it is the combination of the parser and one or more plugins which allow you to maximize your usage of ESLint with TypeScript.
For example, once this parser successfully produces an AST for the TypeScript source code, it might well contain some information which simply does not exist in a standard JavaScript context, such as the data for a TypeScript-specific construct, like an interface.
The core rules built into ESLint, such as indent have no knowledge of such constructs, so it is impossible to expect them to work out of the box with them.
Instead, you also need to make use of one more plugins which will add or extend rules with TypeScript-specific features.
By far the most common case will be installing the @typescript-eslint/eslint-plugin plugin, but there are also other relevant options available such a @typescript-eslint/eslint-plugin-tslint.
The following additional configuration options are available by specifying them in parserOptions in your ESLint configuration file.
interface ParserOptions {
ecmaFeatures?: {
jsx?: boolean;
globalReturn?: boolean;
};
ecmaVersion?: number | 'latest';
jsxPragma?: string | null;
jsxFragmentName?: string | null;
lib?: string[];
project?: string | string[];
projectFolderIgnoreList?: string[];
tsconfigRootDir?: string;
extraFileExtensions?: string[];
warnOnUnsupportedTypeScriptVersion?: boolean;
program?: import('typescript').Program;
moduleResolver?: string;
emitDecoratorMetadata?: boolean;
}
parserOptions.ecmaFeatures.jsxDefault false.
Enable parsing JSX when true. More details can be found here.
NOTE: this setting does not affect known file types (.js, .mjs, .cjs, .jsx, .ts, .mts, .cts, .tsx, .json) because the TypeScript compiler has its own internal handling for known file extensions.
The exact behavior is as follows:
.js, .mjs, .cjs, .jsx, .tsx files are always parsed as if this is true..ts, .mts, .cts files are always parsed as if this is false..md, .vue):
parserOptions.project is not provided:
parserOptions.project is provided (i.e. you are using rules with type information):
falseparserOptions.ecmaFeatures.globalReturnDefault false.
This options allows you to tell the parser if you want to allow global return statements in your codebase.
parserOptions.ecmaVersionDefault 2018.
Accepts any valid ECMAScript version number or 'latest':
'latest'When it's a version or a year, the value must be a number - so do not include the es prefix.
Specifies the version of ECMAScript syntax you want to use. This is used by the parser to determine how to perform scope analysis, and it affects the default
parserOptions.jsxPragmaDefault 'React'
The identifier that's used for JSX Elements creation (after transpilation).
If you're using a library other than React (like preact), then you should change this value. If you are using the new JSX transform you can set this to null.
This should not be a member expression - just the root identifier (i.e. use "React" instead of "React.createElement").
If you provide parserOptions.project, you do not need to set this, as it will automatically detected from the compiler.
parserOptions.jsxFragmentNameDefault null
The identifier that's used for JSX fragment elements (after transpilation).
If null, assumes transpilation will always use a member of the configured jsxPragma.
This should not be a member expression - just the root identifier (i.e. use "h" instead of "h.Fragment").
If you provide parserOptions.project, you do not need to set this, as it will automatically detected from the compiler.
parserOptions.libDefault ['es2018']
For valid options, see the TypeScript compiler options.
Specifies the TypeScript libs that are available. This is used by the scope analyser to ensure there are global variables declared for the types exposed by TypeScript.
If you provide parserOptions.project, you do not need to set this, as it will automatically detected from the compiler.
parserOptions.projectDefault undefined.
This option allows you to provide a path to your project's tsconfig.json. This setting is required if you want to use rules which require type information. Relative paths are interpreted relative to the current working directory if tsconfigRootDir is not set. If you intend on running ESLint from directories other than the project root, you should consider using tsconfigRootDir.
Accepted values:
// path
project: './tsconfig.json';
// glob pattern
project: './packages/**/tsconfig.json';
// array of paths and/or glob patterns
project: ['./packages/**/tsconfig.json', './separate-package/tsconfig.json'];
If you use project references, TypeScript will not automatically use project references to resolve files. This means that you will have to add each referenced tsconfig to the project field either separately, or via a glob.
TypeScript will ignore files with duplicate filenames in the same folder (for example, src/file.ts and src/file.js). TypeScript purposely ignore all but one of the files, only keeping the one file with the highest priority extension (the extension priority order (from highest to lowest) is .ts, .tsx, .d.ts, .js, .jsx). For more info see #955.
Note that if this setting is specified and createDefaultProgram is not, you must only lint files that are included in the projects as defined by the provided tsconfig.json files. If your existing configuration does not include all of the files you would like to lint, you can create a separate tsconfig.eslint.json as follows:
{
// extend your base config so you don't have to redefine your compilerOptions
"extends": "./tsconfig.json",
"include": [
"src/**/*.ts",
"test/**/*.ts",
"typings/**/*.ts",
// etc
// if you have a mixed JS/TS codebase, don't forget to include your JS files
"src/**/*.js"
]
}
parserOptions.tsconfigRootDirDefault undefined.
This option allows you to provide the root directory for relative tsconfig paths specified in the project option above.
parserOptions.projectFolderIgnoreListDefault ["**/node_modules/**"].
This option allows you to ignore folders from being included in your provided list of projects.
This is useful if you have configured glob patterns, but want to make sure you ignore certain folders.
It accepts an array of globs to exclude from the project globs.
For example, by default it will ensure that a glob like ./**/tsconfig.json will not match any tsconfigs within your node_modules folder (some npm packages do not exclude their source files from their published packages).
parserOptions.extraFileExtensionsDefault undefined.
This option allows you to provide one or more additional file extensions which should be considered in the TypeScript Program compilation.
The default extensions are ['.js', '.mjs', '.cjs', '.jsx', '.ts', '.mts', '.cts', '.tsx'].
Add extensions starting with ., followed by the file extension. E.g. for a .vue file use "extraFileExtensions": [".vue"].
parserOptions.warnOnUnsupportedTypeScriptVersionDefault true.
This option allows you to toggle the warning that the parser will give you if you use a version of TypeScript which is not explicitly supported
parserOptions.createDefaultProgramDefault false.
This option allows you to request that when the project setting is specified, files will be allowed when not included in the projects defined by the provided tsconfig.json files. Using this option will incur significant performance costs. This option is primarily included for backwards-compatibility. See the project section above for more information.
parserOptions.programsDefault undefined.
This option allows you to programmatically provide an array of one or more instances of a TypeScript Program object that will provide type information to rules.
This will override any programs that would have been computed from parserOptions.project or parserOptions.createDefaultProgram.
All linted files must be part of the provided program(s).
parserOptions.moduleResolverDefault undefined.
This option allows you to provide a custom module resolution. The value should point to a JS file that default exports (export default, or module.exports =, or export =) a file with the following interface:
interface ModuleResolver {
version: 1;
resolveModuleNames(
moduleNames: string[],
containingFile: string,
reusedNames: string[] | undefined,
redirectedReference: ts.ResolvedProjectReference | undefined,
options: ts.CompilerOptions,
): (ts.ResolvedModule | undefined)[];
}
Refer to the TypeScript Wiki for an example on how to write the resolveModuleNames function.
Note that if you pass custom programs via options.programs this option will not have any effect over them (you can simply add the custom resolution on them directly).
parserOptions.emitDecoratorMetadataDefault undefined.
This option allow you to tell parser to act as if emitDecoratorMetadata: true is set in tsconfig.json, but without type-aware linting. In other words, you don't have to specify parserOptions.project in this case, making the linting process faster.
createProgram(configFile, projectDirectory)This serves as a utility method for users of the parserOptions.programs feature to create a TypeScript program instance from a config file.
declare function createProgram(
configFile: string,
projectDirectory?: string,
): import('typescript').Program;
Example usage in .eslintrc.js:
const parser = require('@typescript-eslint/parser');
const programs = [parser.createProgram('tsconfig.json')];
module.exports = {
parserOptions: {
programs,
},
};
Please see typescript-eslint for the supported TypeScript version.
Please ensure that you are using a supported version before submitting any issues/bug reports.
Please use the @typescript-eslint/parser issue template when creating your issue and fill out the information requested as best you can. This will really help us when looking into your issue.
TypeScript ESLint Parser is licensed under a permissive BSD 2-clause license.
FAQs
An ESLint custom parser which leverages TypeScript ESTree
We found that @typescript-eslint/parser demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.