Refactor and rename with VSCode and TypeScript without having to manually open the files being affected

When working with a TypeScript application in Visual Studio Code, is there a way to rename a variable or function without the affected files automatically opening in the Editor area?

I prefer my refactorings to be applied immediately and the affected files saved without opening automatically.

I am aware of the "files.autoSave" setting and have used "afterDelay" to refactor without files automatically opening. However, I do not want to use this setting due to issues with linting and the annoying behavior of files auto-saving.

Is there a way to perform an immediate refactoring without having files open automatically?

Answer №1

It would be ideal for my refactorings to be automatically implemented, with the affected files saved promptly without automatically opening them.

Unfortunately, this functionality is not available by default.

Reason for the default setting

Sometimes a seemingly small refactoring can end up impacting multiple files.

Customizing the behavior

If desired, you have the option to create your own plugin with customized behavior.

Answer №2

Perhaps the updated Rename preview feature introduced in VSCode 1.42 (Q1 2020) could serve as a viable option instead of directly opening the files.

Rename preview

VS Code now offers a preview of Rename changes.
During a renaming process, you can choose to accept a new name using kb(acceptRenameInputWithPreview), triggering the display of the Refactor Preview panel.
This panel showcases pending changes in a diff editor, enabling you to selectively approve or disregard specific modifications.
After the rename is executed (or cancelled), the diff editor and preview panel close, returning you to the current editor.

https://i.sstatic.net/nYsMP.gif

Answer №3

Exciting news for VSCode users: the upcoming 1.67 version in April 2022 is set to introduce a new feature called Save automatically when refactoring #47573.

This feature will work similarly to the existing "Save automatically when Search & Replace" feature. After refactoring code (either by pressing the F2 key or using the context menu), VS Code will automatically save the file(s).

For those eager to try it out, check out PR 146320 which is available today in the latest VSCode insider release.

files.refactoring.autoSave

This setting controls whether files involved in a refactoring process are saved automatically.

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

Utilize TypeScript to narrow down function parameters within a callback by evaluating other parameters

I'm currently working with traditional node callbacks. For example: myFunction('foo', (err: Error|null, data?: Buffer) =>{ if (err) { // typeof err is Error // typeof data is Buffer|undefined } else { // typeof err is nul ...

Implementing debounce in Subject within rxjs/Angular2

I am currently building an events service, and here is the code snippet I am using: import { Injectable } from '@angular/core'; import { Observable } from 'rxjs/Observable'; import { Subject } from 'rxjs/Subject'; export int ...

Creating numerous bar graphs for each specific date

I have a dataset containing dates and corresponding information for each element. Despite trying various approaches, I am unable to create a barchart. Every solution I've attempted has been unsuccessful thus far. The dataset is structured as follows ...

Circular dependency has been detected when using the ESLint with TypeORM

Having two entity typeorm with a bi-directional one-to-one relationship: Departament: @Entity('Departament') export default class Departament { @PrimaryGeneratedColumn() id: string; @Column() departament_name: string; @OneToOne(type ...

Issue with the close button on ngb-alert not functioning properly

As I develop my website, I have incorporated an ngb-alert component to display an alert message to users upon login. While the alert itself is functioning properly, I have encountered an issue with the close button being misaligned, and I am struggling to ...

Creating bonds between components in React

As a newcomer to React JS, I am exploring how to implement event listeners in VanJS. For organizing my layout, I have decided to create separate components for elements like a panel and a button. Now, I am faced with the challenge of triggering a state c ...

Angular JSON converter - Transform XML data to JSON format

Struggling to convert XML API response to JSON using xml2js library, facing issues with getting 'undefined' in the console. Here is my API service: export class WordgameService { public apiUrl = "http://www.wordgamedictionary.com/api/v1/reference ...

Leveraging React Native to position a view absolutely in the center of the screen without obstructing any other components

How can I center an image inside a view in the middle of the screen using position: "absolute"? The issue is that the view takes up 100% of the width and height of the screen, causing all components underneath it (such as input fields and buttons ...

Steering clear of Unfulfilled Promises in TypeScript. The Discrepancy between Void and .catch:

When it comes to handling promises in TypeScript, I'm used to the then/catch style like this: .findById(id) .then((result: something | undefined) => result ?? dosomething(result)) .catch((error: any) => console.log(error)) However, I have also ...

Definition in TypeScript: specify a type or interface containing a field with an unidentified name

Looking to define an interface for a team object: export interface Team{ memberUid?: { mail: string name: string photoURL: string } startDate: Timestamp endDate: Timestamp agenda: Array<{ date: Date | Timestamp title: strin ...

Tips for managing the output of an asynchronous function in TypeScript

The casesService function deals with handling an HTTP request and response to return a single object. However, due to its asynchronous nature, it currently returns an empty object (this.caseBook). My goal is for it to only return the object once it has b ...

What is the functionality of angular-cli@webpack?

After working with angular-cli using systemJS, I have become comfortable with the build process, test cases, and component interaction. Recently, I made the switch from angular-cli to angular-cli@webpack. However, I am now facing confusion on a few point ...

What is a more effective approach for managing form data with React's useState hook?

Seeking a more efficient solution to eliminate redundancy in my code. Currently, I am utilizing useState() for managing user data, which results in repetition due to numerous fields. Below is a snippet of my current code: const [lname, setLast] = useState& ...

NGRX reducer avoids generating errors due to incorrect assignments

My experience with ngrx is relatively new. In my typical TypeScript work, I usually encounter an incorrect assignment error like the one below due to a missing property in the interface declaration: interface IExample { count: number; } let initialState ...

Trouble with embedding video in the background using Next.js and Tailwind CSS

This is the code snippet for app/page.tsx: export default function Home() { return ( <> <main className='min-h-screen'> <video muted loop autoPlay className="fixed -top ...

Activate the download upon clicking in Angular 2

One situation is the following where an icon has a click event <md-list-item *ngFor="let history of exportHistory"> <md-icon (click)="onDownloadClick(history)" md-list-avatar>file_download</md-icon> <a md-line> ...

Similar to Java method references, TypeScript also provides a way to reference functions

Although I am familiar with Java, TypeScript is fairly new to me. In Java, lambda expressions (->) or method references (::) are commonly used to satisfy functional interfaces. It seems like lambda expressions function similarly in both languages (plea ...

What is the best way to maintain the order of variadic types for conditionally inferred conditional types?

Here is the type definition that I am working with: type Inner<Type> = Type extends Wrapper<infer U>[] ? U[] : never; Additionally, I have a function with the following signature: function myFunc<From extends Wrapper[], To>( values: ...

What is the process for incorporating a compiled JavaScript library into a TypeScript project?

In my Typescript project (ProjectA), I am utilizing several node packages. Additionally, I have a babel project (ProjectB) with a build configuration that supports output for multiple module definition standards such as amd, common.js, and esm. My questio ...

What steps should I take to fix the Typescript error showing up in my Next.js route?

import type { NextApiRequest, NextApiResponse } from "next"; import db from "../../app/libs/dbConn"; interface DataProps { auth: [ { name?: string; email?: string; passwordHash?: string; } ]; status: n ...