Displaying TypeScript issues across the entire project in WebStorm allows for a comprehensive overview

Is it possible to have Webstorm consistently report all TypeScript errors across an entire project without having to open each individual file? I prefer using the language service for performance reasons rather than running tsc as a task.

I've noticed that Webstorm displays all issues in Dart projects by utilizing the Dart analysis server, which is similar to the Typescript language service. Essentially, I am seeking a way to configure Webstorm (or vscode) to function in the same manner for TypeScript as it does for Dart projects when it comes to identifying project-wide errors.

Update 2016-09-09:

Here's a quick example using Webstorm:

  • Create a new project: File > New Project > Empty project
  • Configure Webstorm settings: Preferences > Languages & Frameworks > TypeScript
  • Enable TypeScript Service (experimental)
  • Activate TypeScript Compiler
  • Enable Track Changes
  • Set Scope to Project Files
  • Choose Set Options Manually
  • Add command line options: --noEmit

Add these files to the project:

test1.ts

export const foo:number = 5;

test2.ts

import {foo} from './test1';
const bar:string = foo;
  • Close all documents and exit Webstorm.
  • Reopen Webstorm.
  • Open the file test1.ts.
  • Check "Current Errors" and "Project Errors" panes, they are both empty.
  • Click on the "Compile all" button.
  • Current Errors: empty (why?)
  • Project Errors: test2.ts > Error:(3, 7) TS2322: Type 'number' is not assignable to type 'string'.

Now update the content of test1.ts to the following:

export const foo:string = "";

Save test1.ts.

  • Both "Current Errors" and "Project Errors" remain the same as before.
  • In this scenario, I would expect the panes to be cleared since the error in test2.ts has been resolved. However, because test2.ts is not currently opened in the editor, it does not seem to refresh.
  • Click on the compile all button.
  • Now both "Current Errors" and "Project Errors" are reset.

Answer №1

When working in Webstorm, the tab labeled Typescript -> Current Errors provides a real-time display of project-wide errors.

If you introduce or correct an error, you will see the updates appear in this tab immediately.

To ensure accurate results, make sure that the Typescript preferences are set correctly. In the example provided, Webstorm is utilizing the project's tsconfig.json file. Additionally, it is recommended to run a 'Compile All' command at least once from this tab to generate the errors cache.

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

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

Is it possible to maintain the input and output types while creating a function chain factory in

Take a look at the following code snippet involving pyramids: /** * @template T, U * @param {T} data * @param {(data: T) => Promise<U>} fn */ function makeNexter(data, fn) { return { data, next: async () => fn(data), }; } retu ...

Executing asynchronous function in Angular using Typescript

My team and I are new to Angular and we are facing a challenge with invoking methods in sequence and returning a value. The issue is that the return statement is being executed before the completion of the execution process. We have tried various approac ...

Flex-Layout in Angular - The Ultimate Combination

Recently, I decided to delve into Angular and the Flex-Layout framework. After installing flex-layout through npm, I proceeded to import it in my app.module.ts file like so: import { FlexLayoutModule } from '@angular/flex-layout'; imports: [ Fl ...

Running terminal commands in typescript

Can Typescript be used to run commands similar to JavaScript using the Shelljs Library? ...

Is it possible to integrate the Firestore npm library into my Express application?

Recently, I created my own library to act as a nosql database on my node.js web server in place of mongodb. I came across this interesting quote: Applications that use Google's Server SDKs should not be used in end-user environments, such as on pho ...

What is the process for creating a new Object based on an interface in Typescript?

I am dealing with an interface that looks like this: interface Response { items: { productId: string; productName: string; price: number; }[] } interface APIResponse { items: { productId: string; produc ...

troubleshoot using Visual Studio Code

Here's the scenario: I need to debug a project using VS Code. The project is usually started by a batch file and then runs some JavaScript code. Now, I want to debug the JavaScript code, but I'm not sure how to do that. If anyone has any instruct ...

Tips for managing numerous HTTP requests in Angular 6

I have a method that is trying to chain together 3 requests like this: showProfileDetails() { this.getUserInfo(this.currentUser.id).pipe( mergeMap(e => this.getAccounts(this.currentUser.id) ), mergeMap(e => this.getPayments ...

Monitor modifications to documents and their respective sub-collections in Firebase Cloud Functions

Is it possible to run a function when there is a change in either a document within the parent collection or a document within one of its subcollections? I have tried using the code provided in the Firebase documentation, but it only triggers when a docume ...

Component in Next.js fetching data from an external API

I am attempting to generate cards dynamically with content fetched from an API. Unfortunately, I have been unsuccessful in finding a method that works during website rendering. My goal is to pass the "packages" as properties to the component within the div ...

The specified object is not extensible, hence the property effectTag cannot be added

Upon launching the React application, it initially renders perfectly, but after a few seconds, an error occurs that I am unable to debug. The error is being shown in node_modules/react-dom/cjs/react-dom.development.js:21959. Can anyone provide assistance ...

Error occurred after attempting to make a GET request

What I aim to achieve: I need to send two parameters from the front-end to the back-end. This is the code snippet: In TypeScript file: activeFromActiveToQuery(req?: any): Observable<ResponseWrapper>{ const options = createRequestOption(req) ...

What is the correct way to write SVG markup within SVG tags in a React and NextJS environment?

I currently have a Svg component set up like this interface SvgIconProps { children: React.ReactNode; strokeWidth?: number; width?: number; height?: number; className?: string; } export const SvgIcon = ({ children, strokeWidth = 1, width = ...

Converting an Array of Objects into a single Object in React: A Tutorial

AccessData fetching information from the database using graphql { id: '', name: '', regions: [ { id: '', name: '', districts: [ { id: '', ...

Creating an HTTP method handler function in Next.js API routes with an unspecified number of generic parameters

Looking to create a wrapper function in NextJS for API routes that can handle multiple HTTP methods with different handlers. For example, check out the TS playground interface GetResponse { hello: string, } // empty object type PostResponse = Record&l ...

Ways to fix a "define is not defined" issue when utilizing jasmine karma with compiled typescript for component testing

I'm faced with an issue in my typescript app where the compiled code is stored in a single file named myjs.js within the js folder. Additionally, I have karma jasmine configured on my workspace. Inside myjs.js, there's a segment of code like thi ...

Is that possible to prevent the use of the & symbol in Angular 4 HTTP requests?

Using an HTTP request to save data in my database. The code snippet I used is: const form = '&inputdata=' + myinput + '&rf_date=' + rf_date; return this.http.post(this.rootUrl, form, {headers : this.reqHeader}); In thi ...

The jspdf tool tries to cram my extensive data into a single page, resulting in an overcrowded and barely visible PDF document

My PDF generated using Jspdf is being forced to fit in one page, making it difficult to see all the data because there is a huge amount of information present. To view the issue, please visit this link: https://jsfiddle.net/frost000/04qt7gsm/21/ var pdf ...

ANGULAR: Issue with filtering an array by clicking a button is not functioning

I've been attempting to apply a filter to my array by using modulo on the id when clicking multiple buttons. I initially tried using pipe but was advised to stick with .filter(). Despite watching numerous online tutorials, I keep encountering errors o ...

Is it possible to exclude a certain prop from a styled component that has emotions?

Within my code, there exists a component called BoxWithAs, which is defined as follows: const BoxWithAs = styled.div( { WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale' // And more … } ); Everythin ...