"An issue has been identified where TSLint and VSCode fail to display red underlines in

I am currently working on a single .ts file where I am experimenting with configuring tslint and tsconfig. To test the configuration, I intentionally added extra spaces and removed semicolons.

Despite running the command tslint filename.ts and detecting errors in the .ts file, my VSCode is not highlighting these issues with red lines?

I used CLI to generate tslint.json and tsconfig.json files: tslint --init,tsc --init

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

However, when viewing it in Angular app, it appears as shown below:

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

I have tried exploring the documentation for both tslint and tsconfig but unable to find how to properly configure them.

Can someone guide me on how to receive red line indicators in normal .ts files? Thanks in advance

angulartypescriptvisual-studio-codetslint

Answer №1

Finally cracked the code! It turns out that the issue lies with the TSLint extension and not the TSLint CLI itself. The extension requires both tslint and typescript to be present in the node_modules folder in order to function properly. So, I made sure to include them in my package.json:

{
  "devDependencies": {
    "typescript": "^3.2.1",
    "tslint": "5.11.0"
  }
}

After running npm install and restarting VSCode, those familiar red lines were back in action. :-)

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

The Typescript object may be null even with its initial value set

1: let a: Record<string, any> | null = {}; 2: a['b'] = 2; Encountered the TS2531: Object is possibly 'null' error on Row 2 despite having an initial value. To address this issue, the code was updated as follows: 1: let a: Record ...

typescriptobjectnulltslint

Issue encountered when trying to retrieve the property of an object within an array in an Angular application

Having an issue with comparing path properties in Chrome https://i.sstatic.net/o3MnP.png Chrome debug shows different content for path properties compared to Angular https://i.sstatic.net/b0FrD.png Angular throws error: 'Property 'path' ...

arraysangular

Typescript struggling to load the hefty json file

Currently, I am attempting to load a JSON file within my program. Here's the code snippet that I have used: seed.d.ts: declare module "*.json" { const value: any; export default value; } dataset.ts: import * as data from "./my.json" ...

javascriptnode.jstypescript

`Next.js: Addressing synchronization issues between useMemo and useState`

const initializeProjects = useMemo(() => { const data: ProjectDraft[] = t('whiteLabel.projects', {returnObjects: true}) const modifiedData: ProjectWL[] = data.map((item, index) => { return { ... ...

reactjstypescriptnext.jsreact-hooksreact-i18next

Weighing the importance of a multiple-choice quiz

I am faced with the challenge of assessing 25 multiple choice questions, each offering 4 answer choices worth varying points. Additionally, I have 2 free response questions that I wish to score based on the time taken to answer them. My proposed scoring ru ...

node.jsreactjsangular

Highlighting DOM elements that have recently been modified in Angular

Is there a simple way to change the style of an element when a bound property value changes, without storing a dedicated property in the component? The elements I want to highlight are input form elements: <tr field label="Lieu dépôt"> ...

cssangulartypescriptcontrolvalueaccessor

The RxJs 'from' function is currently producing an Observable that is unrecognized

import { Tenant } from './tenant'; import { from, Observable } from 'rxjs'; export const testTenants: Tenant[] = [ { 'tenant_id': 'ID1' } ] const tenants$: Observable<Tenant>= from(testTenant ...

typescriptrxjs

Setting up popover functionality in TypeScript with Bootstrap 4

Seeking assistance with initializing popovers using TypeScript. I am attempting to initialize each element with the data-toggle="popover" attribute found on the page using querySelectorAll(). Here is an example of what I have tried so far: export class P ...

javascriptjquerytypescriptpopover

The NgRx Store encountered an error: Unable to freeze

I am currently developing a basic login application using Angular, NgRx Store, and Firebase. I have implemented a login action that is supposed to log in to Firebase and store the credentials in the store. However, it seems like there is an issue in my imp ...

angulartypescriptngrxngrx-storengrx-effects

Utilizing RavenDB with NodeJS to fetch associated documents and generate a nested outcome within a query

My index is returning data in the following format: Company_All { name : string; id : string; agentDocumentId : string } I am wondering if it's possible to load the related agent document and then construct a nested result using selectFie ...

node.jstypescriptravendb

The ng-repeat functionality in Angular 2 is not functioning correctly when trying to select an option from an array of objects. Instead of displaying the actual object, it is

When using ngRepeat in Angular 2, I have found that selecting options from an array of strings works perfectly fine. However, when the data is an array of objects, the ngModel displays '[Object object]' instead of the selected object. I have trie ...

objectselectangular

Unusual output from the new Date() function: it displays the upcoming month

Your assistance and explanation are greatly appreciated. I have created a method that is supposed to return all the days of a given month by using two parameters- the year and the month: private _getDaysOfMonth(year: number, month: number): Array<Date& ...

javascripttypescriptdatedatetime

Angular6 Error: Property 'catch' is missing

I am new to Angular and have a basic understanding of it. I am interested in learning how to use HttpClient to create a JSON file instead of relying on a real server. I have set up a service and imported HttpClient: service.ts import { Injectable } from ...

node.jsangular

It appears that you are utilizing Vue CLI within a container environment

I have been attempting to run my Vue.js application using VS Code remote containers. It is successfully deployed and accessible through the URL: localhost:8080/, however, when I update a JavaScript file, it does not recompile or hot-reload. devcontainer.j ...

dockervue.jsvisual-studio-code

Sorting with lodash in Angular 2

Section: import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import * as _ from 'lodash'; @Component({ selector: 'app-ore-table', templateUrl: './ore-table ...

angularsortinglodash

Exploring the latest features of Angular 2's ngModel form to track user selections

Consider this form: <form name="setQuestions_form" (ngSubmit)="set_questions()"> <ng-select [multiple]="true" [options]="questions" [(ngModel)]="selectedQuestions" name="selectedQuestions"></ng-select> <button>send</butt ...

formsangular

Using Angular 4 to transfer data from a dynamic modal to a component

Currently implementing material design, I have set up a dialogService for dynamically loading MdDialog. My goal is to create a search dialog with filters that, upon submission, directs the user to a search-results component route. However, I am struggling ...

javascriptangulartypescriptmaterial-design

What is the best way to switch on/off data loading from the server with a click

I have a button with a click event that sends a server request each time it is clicked. The request should only be sent when the condition showVersions is true. The functionality of the button historyBtn should act as a toggle. This has been my attempt: ...

angular

There seems to be an issue with locating a differ that supports the object '[object Object]' of type 'object'. NgFor is only compatible with binding to Iterables like Arrays

My route.js const express = require('express'); const router = express.Router(); const University = require('../models/university'); var mongo = require('mongodb').MongoClient; var assert = require('assert'); va ...

javascriptangular

What are the best practices for styling a component in Fluent UI when using React and TypeScript?

I'm attempting to set a background color for this specific div element: import * as React from 'react' import { Itest } from '../../../../../models' import { getPreviewStyles } from './preview.style.ts' type IPreviewP ...

reactjstypescriptfluentui-react