Tips for setting up the configuration of @typescript-eslint guidelines

I am in the process of transitioning to @typescript-eslint but I am finding the documentation to be quite inadequate. One specific issue I am facing is the errors like the following:

Line 58:  Expected a semicolon             @typescript-eslint/member-delimiter-style

My goal is to enforce a rule that disallows semicolons or commas. I did manage to find the documentation for this rule at https://github.com/bradzacher/eslint-plugin-typescript/blob/master/docs/rules/member-delimiter-style.md

However, I am struggling to find any examples on how to configure it within an actual eslint file! Any insights on how to do this would be greatly appreciated.

typescripteslinttypescript-eslint

Answer №1

To set up a .eslintrc.js configuration file, you need to include the following in the "rules" section:

"rules": {
    "@typescript-eslint/member-delimiter-style": ["error", {
      multiline: {
        delimiter: 'none',    
        requireLast: true,
      },
      singleline: {
        delimiter: 'semi',    
        requireLast: false,
      },
    }]
}

This configuration worked for me when setting the "@typescript-eslint/explicit-function-return-type" parameter. Additional information can be found on the rules project site on github.

Special thanks to maxkoryukov for enhancing my original response.

Answer №2

Check out these sample rules extracted from a .eslintrc.js file within a VueJS Typescript project.

The rule variations for semi colons apply to javascript/.vue files and typescript/.ts files respectively.

rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    quotes: [
      'error',
      'single'
    ],
    semi: [
      'error',
      'never'
    ],
    'vue/html-self-closing': [
      'error',
      {
        html: {
          void: 'any',
          normal: 'any',
          component: 'any'
        }
      }
    ],
    '@typescript-eslint/member-delimiter-style': [
      'error',
      {
        multiline: {
          delimiter: 'none',
          requireLast: true
        },
        singleline: {
          delimiter: 'semi',
          requireLast: false
        }
      }
    ]
  }

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

Creating a personalized NPM package: Converting and exporting TypeScript definitions

Question: Do I need to adjust my TS configuration or add a TS build step? I recently developed a new npm package: Custom-NPM-Package / - src -- index.js -- index.d.ts -- IType.ts accompanied by this tsconfig.json: { "compilerOptions" ...

node.jsreactjstypescriptnpm

Steps for implementing an EsLint Constraint specifically for next/link

How can I set up a linting rule to display an error if the next/link component is used for routing? I want to restrict routing to only be allowed through the default method. To resolve this issue, I included the statement "@next/next/no-html-link-for-pag ...

htmlnext.jseslinteslintrc

Angular and Firestore, when combined, present a unique challenge as the queries

After upgrading the code of an outdated project to the latest versions of Angular and RxJs, I made every effort to update the code as thoroughly as possible. Here is a link to my previous code However, I am now encountering the issue of receiving undefin ...

angulartypescriptfirebaserxjs

What is the best way to display multiple items on a single page using the Ant Design (NG-Zorro) carousel component?

Hey there, I'm looking for a way to display multiple items per page using the ant design (NG-Zorro) carousel. I found some information on their website here: What I'm aiming for is to have something like this - Multiple Items If you have any i ...

angulartypescriptcarouselantdng-zorro-antd

typescript library experiencing issues with invalid regex flags in javascript nodes

I am facing an issue while attempting to import a plain JavaScript module into a Node application written in TypeScript. The error below is being thrown by one of the codes in the JavaScript module. b = s.matchAll(/<FILE_INCLUDE [^>]+>/gid); Synta ...

javascriptnode.jstypescript

Angular 10 - Compilation errors caused by the element's location

When running 'ng serve' or 'ng build' in Angular 10, I encountered a build error that stated: ERROR in projects/project-navigator/src/app/modals/building-permissions.component.html:89:61 - error NG8002: Can't bind to 'ngClass& ...

angulartypescriptbuildangular-cli

encountering an error of unsupported grant type while attempting to authenticate a user

I've seen a lot of discussions on this topic, but none have addressed my specific issue. Currently, I am working on an angular 5 application and trying to retrieve an authentication token by sending a post request to a server. Testing the connection ...

angularlaraveltypescriptlaravel-passport

What is the best way to display the arrows on a sorted table based on the sorting order in Angular?

I need assistance with sorting a table either from largest to smallest or alphabetically. Here is the HTML code of the section I'm trying to sort: <tr> <th scope="col" [appSort]="dataList" data-order ...

angulartypescriptalgorithmangular15

The chosen index in the Material Stepper feature is experiencing a malfunction

I've been busy working on a Mat-Stepper, actually two of them. I have a component that contains two ng-templates set up like this: Question: Why is my selected index not functioning as expected? Am I missing something? I know you can define [selected ...

javascriptangulartypescriptangular-material

After the click event, the variable in the Angular .ts file does not get refreshed

Great! I have a service in my .ts component that loops through an array of court names. Every time I click on a next or back arrow event, a counter is incremented starting at 0, where index 0 corresponds to field 1 and so on. The issue I'm facing is ...

javascriptangulartypescript

Retrieve the product IDs by selecting the checkboxes, then compile a fresh array consisting of the identified IDs

I am currently delving into the realm of typescript/angular2+ as a fledgling student, and I have taken on the task of creating a website to put my newfound knowledge to the test. The view is up and running, but I'm facing some roadblocks as I work on ...

javascriptangulartypescriptfrontend

What is the best way to ensure that Interface (or type) Properties always begin with a particular character?

I attempted to tackle this assignment using template literals, but unfortunately, I wasn't successful. Here is the interface that I am working with: interface SomeInterface { '@prop1': string; '@prop2': string; '@ ...

typescript

Angular 14.2.9: "Trouble with Form Data Binding - Seeking Assistance with Proper Data Population"

I'm currently using Angular version 14.2.9 and the component library I'm utilizing is: import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; While working on binding data to a form, I encountered an issue where the data wasn't d ...

htmlangulartypescriptdata-bindingangular-forms

Getting the local path of a file from an input file in Angular 7

Is there a way to retrieve the local file path from an input field in HTML? After running the code below, I obtained 'C:\fakepath\fileTest.txt' I am looking for a method to get the local path so that I can pass it on to my control ...

htmlangulartypescriptangular7

Mapping nested values from a Typescript object to properties of a JSON object

Within the scope of a current project I am involved in, we have opted for utilizing the Angular toolset identified as formly to dynamically generate our forms. The present configuration of the form is hardcoded into a Typescript object denoted as mockForm ...

javascriptjsontypescriptobjectnested-object

Exploring Model Object Properties with ngFor in Angular

Currently, I am developing an Angular application with a Model object that consists of properties of various types. My goal is to loop through these properties in the component and generate form fields for each property. Unfortunately, the implementation i ...

angulartypescript

The error message "Property 'data1' is not a valid property on the object type {}"

const Page: NextPage = ({data1}:{data1:any}) => { const [open, setOpen] = React.useState(false); const [data, setData] = React.useState(data1); const handleAddClick = () => { setOpen(true); }; ..... } export async function getServerS ...

reactjstypescriptnext.js

Ways to broaden the type signature of a Typescript comparator in order to facilitate sorting by properties nested within objects?

Here is a function that I created: arr.sort(alphabeticallyBy("name")) The function has the following signature: <T extends string>(prop: T) => (a: Partial<Record<T, string>>, b: Partial<Record<T, string>>) => ...

typescript

Powering up your React components with MDX, Storybook, and Typescript!

Currently, I am attempting to incorporate MDX markup into the creation of live documentation for my storybook. However, upon running the storybook, an error is occurring: Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: C ...

reactjstypescriptbabeljsstorybook

The current value of React.createRef() is perpetually empty

Ever since I started working on this code, I've been encountering a problem that seems to have no solution. Here's what's going on: import React, { Component } from 'react'; export class InfoPaneArrow extends Component<InfoPane ...

reactjstypescriptreact-ref