Linting TypeScript

The recommended linter for TypeScript code is ESLint which brings a wide range of linting rules that can also be extended with plugins. RustRover shows warnings and errors reported by ESLint right in the editor, as you type. Learn more from ESLint.

RustRover highlights errors reported by ESLint in .ts and .tsx files when @typescript-eslint/parser is set as a parser in your project ESLint configuration. Learn more from the readme file in the typescript-eslint repo.

Install and configure ESLint

In the embedded Terminal (Alt+F12) , type one of the following commands:
- npm init @eslint/config@latest to install ESLint in the current project and generate a configuration file.
  Answer the questions of the wizard. As a result, RustRover installs the latest version of ESLint and generates a eslint.config.js configuration file.
- npm install --save-dev eslint to install ESLint as a development dependency.
- npm install --g eslint for global installation.
- pnpm create @eslint/config@latest to install ESLint in the current project and generate a configuration file.
  Answer the questions of the wizard. As a result, RustRover installs the latest version of ESLint and generates a eslint.config.js configuration file.
- pnpm add -D eslint to install ESLint as a development dependency.
- pnpm add -g eslint for global installation.
- yarn create @eslint/config to install ESLint in the current project and generate a configuration file.
  Answer the questions of the wizard. As a result, RustRover installs the latest version of ESLint and generates a eslint.config.js configuration file.
- yarn add -D eslint to install ESLint as a development dependency.
- yarn add eslint for global installation.
By default, ESLint is disabled. Enable it on the Settings | Languages and Frameworks | JavaScript | Code Quality Tools | ESLint as described in Activate and configure ESLint in RustRover".

Use ESLint for TypeScript in a new project

In the embedded Terminal (Alt+F12) , type:
npm install @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev
If you installed ESLint globally, install @typescript-eslint/eslint-plugin globally as well. Learn more about installation and versions compatibility from the @typescript-eslint/eslint-plugin official documentation.
In the .eslintrc configuration file or under eslintConfig in package.json, add:
{ "parser": "@typescript-eslint/parser", "plugins": [ "@typescript-eslint" ], "extends": [ "plugin:@typescript-eslint/recommended" ] }

Suppress linting TypeScript code with ESLint

If you are already using @typescript-eslint/parser but you do not want to check TypeScript code with ESLint, add .ts or .tsx to the .eslintignore file.

ESLint 4.0

If you are using previous versions of ESLint, you have to install babel-eslint, typescript-eslint-parser, or eslint-plugin-typescript because ESLint 4.0 and earlier do not support scoped packages.

Use babel-eslint

In the embedded Terminal (Alt+F12) , type:
npm install eslint babel-eslint --save-dev
Learn more about installation and versions compatibility from the babel-eslint official documentation.
In the .eslintrc configuration file or under eslintConfig in package.json, add:
{ "parser": "babel-eslint" }

Use typescript-eslint-parser

In the embedded Terminal (Alt+F12) , type:
npm install typescript-eslint-parser --save-dev
Learn more from the typescript-eslint-parser official documentation.
In the .eslintrc configuration file or under eslintConfig in package.json, add:
{ "parser": "typescript-eslint-parser" }

Use eslint-plugin-typescript

In the embedded Terminal (Alt+F12) , type:
npm install typescript-eslint-parser eslint-plugin-typescript --save-dev
If you installed ESLint globally, install eslint-plugin-typescript globally as well. Learn more from the eslint-plugin-typescript official documentation.
In the .eslintrc configuration file or under eslintConfig in package.json, add:
{ "parser": "typescript-eslint-parser", "plugins": [ "eslint-plugin-typescript" ] }

Last modified: 25 June 2024