After transitioning from deprecated TSlint to ESLint, which style guide is most similar to TSLint in the ESLint ecosystem?

QUERY - Can anyone recommend the closest ESLint style guide to TSLint for an Angular project in VSCode? I'm looking for a out-of-the-box solution that doesn't require me to tweak too many rules in .eslintrc.json file.

I initially set up my style guide using Google (thinking it's Typescript-friendly), but I'm encountering more errors compared to when I was using TSLint.

For example, the maximum code length is now 80 characters instead of the previous 140 characters in TSLint. Additionally, the new style guide enforces no space after '{'.

import { AfterViewInit, Component, Input, OnDestroy, OnInit } from '@angular/core';

NOTE - I recently made the switch from TSLint to ESLint in my VSCode Angular project and have been facing numerous ESLint errors that were not present before. I opted for Google as the style guide during the installation process.

https://i.sstatic.net/UTQtg.png

This is my current .eslintrc.json configuration:

{
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "google"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "rules": {
    "max-len": ["error", {
      "code": 140
    }]
  }
}

Answer №1

Switching things up in my coding setup - I decided to tweak the style guide within my .eslintrc.json configuration file. Instead of using "extends": ["google"], now it reads as "extends": ["plugin:@typescript-eslint/recommended"]. This change has surprisingly resolved numerous errors that never popped up when I was using TSLint. Could this new style be a closer match? What do you think?

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

How to create classes in typescript without utilizing the class keyword

As someone new to TypeScript, I have a curious question about classes. In pre-ES6 JavaScript, there were no classes. So, naturally, one would think it's possible to avoid using them in TypeScript as well. However, I am struggling to figure out the c ...

Encountering an HTTP parsing failure while sending XML through Angular 5's HttpClient

Struggling to access a local webservice through XML: Take a look at the code below: const httpOptions = { headers: new HttpHeaders({ 'Content-Type': 'text/xml', 'Accept': 'text/xml', 'Response- ...

Error handling in Angular2 RxJS when using switchMap

Is there a way to properly manage errors that occur when calling this.authService.refreshToken()? How can I handle errors within the switchmap block or implement error handling in this scenario? post3(endpoint: string, body: string) : Observable<any& ...

Sharing methods between two components on the same page in Angular can greatly improve code efficiency

On a single page, I have two components sharing some methods and properties. How can I utilize a service to achieve this? See the sample code snippet below... @Component({ selector: 'app', template: '<h1>AppComponent1</h1>' ...

Attempting to retrieve backend data through an API to be displayed on the frontend

After successfully sending form data from my React front end to the server using fetch, I am struggling to make this data accessible from the front end again. Despite being able to access and utilize the data within my API function on the server side, I&ap ...

Setting a dynamically addressed property within a TypeScript interface

I have a situation where I need to dynamically access an object property using a variable that represents a keyof the object type. Here's an example: interface FidelityCheckRow { P1: number; P2: string; P3: string; } const keys: (keyof F ...

Error: In Angular and Typescript, the function this.$resource is not recognized

I keep encountering a TypeError: this.$resource is not a function. Below is the code snippet causing the issue: export class DataAccessService implements IDataAccessService { static $inject = ["$resource"]; constructor(private $resource: ng ...

Dealing with the error "Type 'date[]' is not assignable to type '[date?, date?]' in a React hook

I'm attempting to assign a date range but encountering an error that states: Type 'Date[]' is not assignable to type '[Date?, Date?]'. Types of property 'length' are incompatible. Type 'number' is not assignab ...

What could be the reason for the react hook form failing to capture the data upon submission?

I am struggling to access the props' value after clicking the button, as it keeps returning undefined. My goal is to display the years of service and profession details based on the user's selection. return ( <form onSubmit={handleSubmit(o ...

Converting string literals to an array of enums

I have a scenario where I am getting the following data in an API response: { "roles": [ "ADMIN", "USER" ] } The response always includes an array of roles (USER, PRESENTER, ORGANIZER, and ADMIN). I am looking to transform this into a valid TypeScript a ...

Encountering NoResourceAdapterError when using @admin-bro/nestjs alongside @admin-bro/sequelize and MySQL?

Encountering a similar issue with '@admin-bro/sequelize' NoResourceAdapterError: No compatible adapters found for the provided resource import { Database, Resource } from '@admin-bro/sequelize'; import { AdminModule } from '@admin- ...

Can property overloading be achieved?

Can functions be overloaded in the same way properties can? I'm interested in overloading properties to have separate documentation for different types passed to them. Currently, both values are set to the same value but I need distinct JSDoc for dif ...

Error in parsing: An unexpected symbol appeared, an identifier or keyword was expected at the end of the expression

Whenever I attempt to display data from an API, an error always pops up. My goal is to showcase each piece of data individually. To help you analyze the issue, I've included the URL of the API below: civilizationes.component.ts import { Component, O ...

What is the best method to retrieve HTTP headers from the backend and simultaneously send HTTP parameters to it in ASP.NET Core and Angular?

I am currently working with Angular 15 and ASP.NET Core 5. The backend retrieves paged items based on the parameters pageSize and pageIndex. Once the action method receives the pageSize and pageIndex parameters, it sends both the paged items and the total ...

Single-use binding format

I am a beginner with Angular and I have some doubts about the syntax used in Angular. In AngularJS, we can achieve one-time binding like this: <p>{{::myVar}}</p> In Angular, I know we can do it differently. <p [innerText]="myVar"></ ...

Invoking event emitter within a promise in Angular 2

My event emitter is not functioning properly within a promise's then method. No errors are being generated, it just won't execute. In the child component: @Output() isLoggingIn = new EventEmitter<boolean>(); onLogin() { this.isLoggingI ...

Clearing dropdown values when navigating back on a page in Angular 6: A step-by-step guide

Image Within the App Component, I have implemented a dropdown list. When an option is selected from the dropdown, it should navigate to another page using routing. Additionally, upon clicking the back button, it should return the user to the app compone ...

Unable to download files from Angular frontend connected to Spring backend, experiencing corruption or malfunction

I am facing an issue with downloading files (.odt) stored in a mysql database. Here is the code snippet for handling this operation in my project: Backend (using Spring, not Spring Boot): @RequestMapping(value = "/downloadRequest", method = Requ ...

Troubleshooting problem in Grunt-TS, Grunt, watch/compile, and Dropbox integration

UPDATE: Recently, I've been experiencing some issues with another computer when it comes to watching and compiling. It seems like the tscommandxxxxxx.tmp.txt files that are generated during compilation might be causing the trouble... sometimes they ar ...

How to extract a single value from ngFor in Angular 2

Currently, I am handling deep nested JSON objects from the server and using a pipe for parsing. However, the issue is that it is iterating through every key when I only need to retrieve one value. How can I accomplish this? Below are the relevant code sn ...