How can I exclude TypeScript files generated from js in WebStorm?

Using the Enable Typescript Compiler option results in a .js file being generated for every .ts and .tsx file by the TypeScript compiler.

https://i.sstatic.net/Yr0lR.jpg

When performing code completion, WebStorm does not recognize that the files were auto-generated, leading to suggestions from both the generated files and the TypeScript files. To address this issue, I have to manually mark each generated .js file as Plain Text:

https://i.sstatic.net/ElfMg.jpg

Despite this, text searches still yield results from the generated JavaScript files:

https://i.sstatic.net/iq50t.jpg

Is there a straightforward method to exclude the generated files similar to how directories can be excluded (aside from creating a scope that excludes all generated files)?

typescriptwebstorm

Answer №1

When utilizing text search, don't forget about the option to include scopes. It may be beneficial to create a personalized scope within the 

Preferences | Appearance & Behavior | Scopes
menu to exclude your generated files and employ this scope in the Find in Path dialog as your custom scope.

Answer №2

  1. To access the settings in WebStorm, go to Preferences by pressing ⌘,, then navigate to the TypeScript options.
  2. Make sure to tick the box for Use output path and specify a directory name (relative to the project directory). For instance, utilize 
    build/$FileDirRelativeToProjectRoot$
    -- this variable is crucial to prevent any naming conflicts. Opt for a build output directory that is not included in .gitignore (if using Git repository).

https://i.sstatic.net/9bkPO.png

  1. Exclude the specified directory from indexing by right-clicking on it in the Project pane and selecting Mark Directory As > Excluded.

(Verified with WebStorm 2016.1.1 running on OS X El Capitan)

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 sliding hamburger menu children fail to move in unison with the parent

I'm currently working on a dynamic sliding navigation menu that activates when the hamburger icon is clicked. However, I am facing an issue where the child <a> elements are not sliding along with the parent div. You can see how it currently loo ...

htmlcssreactjstypescript

Mastering the art of utilizing optionals in VueTS

As a relatively new coder, especially in Vue, I am curious about the best ways to declare non-existent values based on context using Vue / Typescript. Initial thoughts: It's important that variables bound to component templates are never undefined, ...

typescriptvue.jsvuejs2

A guide on including a class to a DOM element in Angular 6 without relying on Jquery

Currently, I have created a component template using Bootstrap that looks like this: <div class="container"> <div class="row my-4"> <div class="col-md-12 d-flex justify-content-center"> <h2> ...

javascriptjqueryangulartypescriptangularjs-directive

How can I define the type of a constructor that requires a parameter in TypeScript?

Having identified the issue, let's focus on a minimal example: // interfaces: interface ClassParameter{ x:number } interface ClassParameterNeeder{ y:number } type ClassParameterConstructor = new () => Cla ...

typescriptinterface

Navigating through embedded arrays in Angular

JSON Object const users = [{ "name":"Mark", "age":30, "isActive" : true, "cars":{ Owned : ["Ford", "BMW", "Fiat"], Rented : ["Ford", "BMW", "Fiat" ...

javascriptangulartypescript

Combining Angular subscriptions to fetch multiple data streams

I am looking to retrieve the most recent subscription from a group of subscriptions. Whenever the value of my FormControl changes, I want to capture only the latest value after the user has finished typing. Below is the code snippet I am using - let cont ...

javascriptangulartypescriptrxjs

Maximizing Component Reusability in React: Utilizing Various Types Across Components

interface DataInfo { name: string; src: string; id: string; price: number; } interface DataInfo2 { title: string; src: string; _id:string item_price: number; } const ItemData = ({ item }: DataInfo | DataInfo2) => { return ( <li ...

reactjstypescript

React-pdf has encountered a situation where more hooks were rendered compared to the last render cycle

I am currently integrating react-pdf to display a PDF document in a web view. The React application is built with TypeScript and Next.js. This is the code I have written so far: const MyPage: NextPage = () => { // some code here const [numPages, setN ...

reactjstypescriptnext.jsreact-pdf

Merging the functions 'plainToClass' and 'validate' into a single generic function in NodeJs

Here's the issue I'm facing: export const RegisterUser = async (request: Request): Promise<[number, UserResponse | { message: any }]> => { let userRequest = plainToClass(UserRequest, request.body); let errors = await validate(u ...

javascriptnode.jstypescriptprismaclass-transformer

Is there a method to incorporate a click event for the confirm button in the ElMessageBox UI element?

When I try to remove data from the table, I need a warning message to appear in the center of the screen first. The delete function is already set up, but I'm struggling to figure out how to implement a confirm button click event with ElMessageBox. I ...

javascripttypescriptvuejs3messageboxuielement

Encountered a runtime error in NgRx 7.4.0: "Uncaught TypeError: ctor is not a

I'm facing difficulties trying to figure out why I can't register my effects with NgRx version 7.4.0. Despite simplifying my effects class in search of a solution, I keep encountering the following error: main.79a79285b0ad5f8b4e8a.js:33529 Uncau ...

javascriptangulartypescriptreduxngrx

Setting up Angular Toolkit via npm installation

After successfully installing the UIKit npm package within an Angular 2 CLI project, what steps should I take to utilize it? I have also installed typings for UIKit (@types/uikit), but I am unsure of how to properly import the package into a controller i ...

cssangulartypescriptnpmuikit

Encountering difficulties when installing dependencies in a React project

Encountering an issue while trying to add a new dependency to my React project. The error message I receive is as follows: C:\Users\abhinavverma Desktop Sodexo-Fe Matchiq-fe> npm i @cypress/instrument-cra npm ERR! code ERESOLVE npm ERR! ERES ...

reactjstypescriptnpmeslintprettier

Breaking down an object using rest syntax and type annotations

The interpreter mentions that the humanProps is expected to be of type {humanProps: IHumanProps}. How can I properly set the type for the spread operation so that humanPros has the correct type IHumanProps? Here's an example: interface IName { ...

typescripttypesspread

The propagation of onClick events in elements that overlap

Having two divs absolutely positioned overlapping, each containing an onClick handler. The issue is that only the top element's onClick handler fires when clicked. React 17 is being used. Here is some sample code: <div style={{ position: "abs ...

javascripthtmlreactjstypescript

Tips for integrating Typescript Definition files with Visual Studio 2017

I have a challenge with my ASP.NET Core 2.0 application where I am attempting to incorporate TypeScript and jQuery. While TypeScript integration has been successful, I am facing issues with jQuery as it does not provide me with intellisense. Despite trying ...

typescriptvisual-studio-2017intellisense

Issue with Docker setup for managing a PNPM monorepo

As a newcomer to Docker, I am attempting to configure my fullstack API REST project. Within my PNPM workspace, I have two applications - a frontend built with Angular and a backend developed using AdonisJS. My goal is to create a Docker configuration for P ...

angulartypescriptdockeradonis.js

I'm struggling to find the right Typescript syntax for defining a thunk function that returns a value while using React Redux Toolkit

Currently, I am utilizing TypeScript within a React Redux Toolkit project. While attempting to create an Async Thunk action function that is expected to return a boolean value, I found myself struggling with determining the correct TypeScript syntax: expor ...

reactjstypescriptredux-thunk

Implementing Global Value Assignment Post Angular Service Subscription

Is there a way to globally assign a value outside of a method within my app component? This is how my service is structured: import { NumberInput } from '@angular/cdk/coercion'; import { HttpClient } from '@angular/common/http'; import ...

angulartypescript

Using a single TypeORM connection across various modules in NestJS

In the process of developing a link shortener, I have set up a CRUD REST API for authentication and creating shortened links. Now, I am looking to manage redirects for these shortened URLs without using the same path as my API endpoints (e.g. /api/v1/). Af ...

node.jstypescriptnestjstypeorm