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.

Before you start

Download and install Node.js.
Configure a Node.js interpreter in your project as described in Configuring a local Node.js interpreter, or in Using Node.js on Windows Subsystem for Linux, or in Configuring remote Node.js interpreters.

Install ESLint

ESLint version 9 and later

In the embedded Terminal (Alt+F12) , type:
npm install --save-dev eslint @eslint/js typescript typescript-eslint
pnpm add --save-dev eslint @eslint/js typescript typescript-eslint
yarn add --dev eslint @eslint/js typescript typescript-eslint

Learn more from the typescript-eslint official website.

ESLint version 8 and earlier

In the embedded Terminal (Alt+F12) , type:
npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint typescript
pnpm add --save-dev eslint @eslint/js typescript-eslint
yarn add --dev eslint @eslint/js typescript-eslint

Learn more from the typescript-eslint official website.

Configuration file

Depending on the ESLint version you are using, RustRover recognizes configurations in the following file types:

ESLint version 9 and later

eslint.config.js, eslint.config.mjs, or eslint.config.cjs (flat format), learn more from the ESLint official website.

You can also use configuration files written in TypeScript, such as, eslint.config.ts, eslint.config.mts, or eslint.config.cts. To do that, you need to specify the unstable_ts_config flag.

Press Ctrl+Alt+S to open settings and then select Languages & Frameworks | JavaScript | Code Quality Tools | ESLint.
Select Manual ESLint Configuration.
In the Extra eslint options field, type --flag unstable_ts_config.
Click Apply to save the changes and close the dialog.

ESLint version 8 and earlier

.eslintrc.* (.eslintrc, .eslintrc.json, or .eslintrc.yaml file, or a file in another supported format).
.eslintignore
package.json with a eslintIgnore or a eslintConfig property. This configuration system is deprecated, learn more from the ESLint official website.

Learn how to switch to the flat format from ESLint configuration migration guide.

Create and edit a configuration file

Open a configuration file or create a new one in the root of your project. Populate the configuration file depending on the ESLint version you are using:
// @ts-check import eslint from '@eslint/js'; import tseslint from 'typescript-eslint'; export default tseslint.config( eslint.configs.recommended, tseslint.configs.recommended, );
Learn more from the typescript-eslint official website.
/* eslint-env node */ module.exports = { extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'], parser: '@typescript-eslint/parser', plugins: ['@typescript-eslint'], root: true, };
Learn more from the typescript-eslint official website.

Configure ESLint in RustRover

By default, ESLint is configured automatically. You can choose to specify all the configuration settings manually or disable ESLint.

Learn more from ESLint.

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.

Lint your code

When installed and enabled, ESLint activates automatically every time you open a TypeScript file. You can also configure ESLint to detect and fix problems automatically on save.

By default, RustRover marks detected problems based on the severity levels from the ESLint configuration. See Configuring ESLint highlighting to learn how to override these settings.

Descriptions of the errors detected in the current file and quick-fixes for them are available from the editor and from the File tab of the Problems tool window.

Errors in all previously opened files and quick-fixes for them are shown in the Project Errors tab of the Problems tool window. To open the tool window, click the Inspection widget in the upper-right corner of the editor:

For more information, refer to View problems and apply quick-fixes in the editor and Problems tool window.

To view the description of a problem in the editor, hover over the highlighted code.
To resolve the detected problem, click ESLint: Fix '<rule name>' or press Alt+Shift+Enter.
To resolve all the detected problems in the current file, click More actions (Alt+Enter) and select ESLint: Fix current file from the list.
Alternatively, open the File tab of the Problems tool window Alt+6, where you can view problem descriptions, apply quick-fixes, navigate to the fragments in the source code where errors occurred, as well as fix them in the Editor Preview pane without leaving the tool window.
Learn more from Problems tool window.
You can also configure ESLint to fix all the problems in a file when this file is saved. To configure such behavior, select the Run eslint --fix on save checkbox on the ESLint page of the Settings dialog as described in Activating and configuring ESLint in RustRover.

Learn more from View problems and apply quick-fixes in the editor and from ESLint.

Last modified: 27 November 2024