Is there an ESLint rule that is equivalent to 'no-floating-promises' as found in the deprecated TSLint?

During my migration process from TSLint to ESLint, I've noticed that there doesn't seem to be a specific rule in ESLint to ensure promises are being handled correctly. In TSLint, the no-floating-promises rule required either using async/await or then/catch for all promises. Is there a similar functionality available in ESLint?

I came across this answer, but it seems to address a different issue – specifically about using catch() with all promises. Additionally, the suggested solution utilizes the npm package eslint-plugin-package, which hasn't been updated in two years.

typescripteslint

Answer №1

The typescript-eslint plugin is equipped with a rule that ensures proper handling of all promises.

If you have ESLint installed:

Begin by installing the typescript-eslint plugin:

npm i --save-dev eslint typescript @typescript-eslint/parser @typescript-eslint/eslint-plugin

Integrate it into your existing ESLint configuration:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: [
    '@typescript-eslint',
  ],
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
  ],
};

If you opted for "enforce popular coding style" and selected "Standard" during ESLint installation, chances are you already have this plugin. Nevertheless, double-check your ESLint config file if unsure.

Also, remember to add the rule to your rules object:

// .eslintrc.js
/* other configurations */
rules: {
    "@typescript-eslint/no-floating-promises": "error",
    /* other rules */
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 2 Google Chart: Defining column type using TypeScript

I am currently attempting to implement the Timeline chart functionality from the angular2-google-chart module for Google Charts. Unlike the other examples provided, this specific chart type requires a column type definition — a requirement not present in ...

angulartypescriptcharts

What is the process for initializing the default/prefilled value of an input element within a mat-form-field when the page loads?

I'm looking to create an HTML element where the default data (stored in the variable 'preselectedValue') is automatically filled into the input field when the component loads. The user should then be able to directly edit this search string. ...

htmlangulartypescriptangular-material

Show a table row based on a specific condition in Angular

I'm having this issue with the tr tag in my code snippet below: <tr *ngFor="let data of list| paginate:{itemsPerPage: 10, currentPage:p} ; let i=index " *ngIf="data.status=='1'" > <td> </td> <td> ...

angulartypescript

Employing the Eclipse Palantir TypeScript Plug-in in conjunction with JSPM

I currently utilize the Palantir Eclipse TypeScript Plug-in (v1.8.0.v20160223-1645), which functions flawlessly when my d.ts files are stored in the same source folder /src. However, due to JSPM, these files reside in a different folder now, causing issues ...

eclipse-plugintypescriptnpmjspm

Type 'Partial' cannot be assigned a value when combining interfaces with generic types

Consider the following scenario: class Table<ValuesType extends DefaultTableValues = DefaultTableValues>{ public values: ValuesType; constructor(initialValues:ValuesType) { this.values=initialValues; } public set(newValues:Pa ...

typescript

The exported variable 'SAlert' is utilizing the name 'AlertInterface' from an external module

Utilizing the antd alert component (ts) with styled components import styled from 'styled-components'; import Alert from 'antd/es/alert'; export const SAlert = styled(Alert)` && { margin-bottom: 24px; border-radiu ...

reactjstypescriptantdalert

Sending a document to a server using the Next.js API endpoint

While utilizing the Next.js API as a middleware to handle requests before sending them to the server, I encountered an issue with sending a multipart/formdata request containing a file. The process works fine when directly calling the backend API from the ...

reactjstypescriptaxiosnext.jsmultipartform-data

Comparison of Types using Strings

Is there a simpler way to solve this problem? My goal is to compare a string value with a defined type. The type I have looks like this, and I receive a string value from an API request. type stringTypes = 'abc' | 'asd' const testVal ...

javascriptnode.jstypescript

What is the true function of the `as` keyword within a mapped type?

I am new to typescript and I find the usage of as confusing in the following example. type foo = "a" | "b" | 1 | 2; type bar = { [k in foo as number]: any } This example passes type checking. The resulting bar type is transformed i ...

typescript

An unexpected 'foo' key was discovered in the current state being processed by the reducer when using redux-toolkit's configure store and a customized store enhancer

I've been working on developing a custom store enhancer to add new values to my root state. However, I've encountered an unexpected key error after delving into the complexities of custom enhancers. While I can see the new state part in devtools ...

javascripttypescriptreduxredux-toolkit

Error TS2339: Cannot access attribute 'reactive_support' on interface 'LocalizedStringsMethods'

Encountering the error TS2339: Property 'reactive_support' does not exist on type 'LocalizedStringsMethods' I recently updated TypeScript from version 2.6 to 2.9, and attempted import LocalizedStrings from 'react-localization&apo ...

reactjstypescript

What is the best way to retrieve a value from an array of objects containing both objects and strings in TypeScript?

Consider this scenario with an array: const testData = [ { properties: { number: 1, name: 'haha' } , second: 'this type'}, ['one', 'two', 'three'], ]; The goal is to access the value of 'second&ap ...

typescripttypestypeerror

Is there a way to eliminate the right margin in React?

I am currently working with React to layout three elements below the topElement. My goal is to have these 3 elements fill up the space equally beneath topElement, removing the right-hand gap highlighted in red in the provided image (while keeping the gap a ...

cssreactjstypescriptmaterial-ui

The makeStyles function in MUI v5 with Typescript always returns null

I am currently in the process of transitioning my components from MUI v4 to v5, and I have reached a point where I am unsure how to migrate my makeStyles components. In the previous version, I had a working implementation like this: const useStyles = make ...

reactjstypescriptmaterial-uijss

Anticipate that the typescript tsc will generate an error, yet no error was encountered

While working in the IDE to edit the TypeScript code, an issue was noticed in checkApp.ts with the following warning: Argument type { someWrongParams: any } is not assignable to parameter type AddAppToListParams. Surprisingly, when running tsc, no error ...

javascriptnode.jstypescript

What is the recommended approach for replacing TypeScript `enum` with a different solution?

In my recent studies, I came across a recommendation to avoid using the built-in enum feature in TypeScript. Instead, the suggestion was to define custom enums as follows: const MyEnum = { name: 'name', email: 'email' } as const; ty ...

typescriptenums

What is the best way to retrieve the data from a specific section when a checkbox is selected in Angular 2?

When I select a checkbox for any section and then click the submit button, I want to display the details of that section in the console. Can someone assist me with this? **Stackblitz link:** : https://stackblitz.com/edit/angular-q7y8k1?file=src%2Fapp%2Fa ...

javascriptangulartypescript

Angular throws an error when double quotes are used instead of single quotes

How can I fix the build error in the production environment? ERROR: /home/vsts/work/1/s/src/app/app.component.spec.ts[1, 32]: " should be ' ERROR: /home/vsts/work/1/s/src/app/app.component.spec.ts[2, 30]: " should be ' All files pass lin ...

angulartypescript

Sequelize Date Range Error When Using Op.between with TypeScript

My goal is to retrieve all records from a MySql table that were created within a specific date range. To accomplish this, I created the following code snippet: import { Sequelize, Model, DataTypes, Op } from 'sequelize'; const sequelize = new ...

mysqldatabasetypescriptsequelize.js

The data type 'string' cannot be assigned to the type 'SystemStyleObject | undefined' in the context of Next.js and Chakra UI

I am currently working on a project that involves Next.js, TypeScript, and Chakra UI. While configuring Button themes in the button.ts file, I encountered an error related to the baseStyle object for properties like borderRadius, color, and border: Type & ...

reactjstypescriptnext.jseslintchakra-ui