Stop VS Code from adding 'as' or alias in destructured assignment when renaming in JavaScript or TypeScript - St

admin管理员组

文章数量:1323157

When I rename a variable in JavaScript or TypeScript, VS Code sometimes adds aliases in destructured assignments:

const { renamedProp: prop } = arg; // After rename

or it adds as in imports:

import { Foo as renamedFoo } from "./file"; // After rename

Why does VS Code do this and how can I disable this behavior? For example, if I rename prop in interface Foo for the following code:

export interface Foo {
    prop: string;
}

function bar(arg: Foo) {
    const { prop } = arg;
    return prop;
}

VS Code changes the code to:

export interface Foo {
    renamedProp: string;
}

function bar(arg: Foo) {
    const { renamedProp: prop } = arg;
    return prop;
}

I want it to be:

export interface Foo {
    renamedProp: string;
}

function bar(arg: Foo) {
    const { renamedProp } = arg;
    return renamedProp;
}

When I rename a variable in JavaScript or TypeScript, VS Code sometimes adds aliases in destructured assignments:

const { renamedProp: prop } = arg; // After rename

or it adds as in imports:

import { Foo as renamedFoo } from "./file"; // After rename

Why does VS Code do this and how can I disable this behavior? For example, if I rename prop in interface Foo for the following code:

export interface Foo {
    prop: string;
}

function bar(arg: Foo) {
    const { prop } = arg;
    return prop;
}

VS Code changes the code to:

export interface Foo {
    renamedProp: string;
}

function bar(arg: Foo) {
    const { renamedProp: prop } = arg;
    return prop;
}

I want it to be:

export interface Foo {
    renamedProp: string;
}

function bar(arg: Foo) {
    const { renamedProp } = arg;
    return renamedProp;
}

• javascript
• typescript
• visual-studio-code

Share Follow asked Mar 19, 2019 at 4:59 Matt BiernerMatt Bierner 65.7k2424 gold badges197197 silver badges230230 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 12

By default, VS Code attempts to make renames safe. This means preserving the existing interfaces of types. In cases like the following example,

export interface Foo {
    prop: string; 
}

function bar(arg: Foo) {
    const { prop } = arg; 
    return { prop };
}

If we rename prop without using aliases, the implicitly returned type of bar would change. And maybe this type was used to satisfy another interface that expects a property called prop. In this case, introducing an alias on rename preserves the existing type interfaces whichs ensures that the code continues to pile and work as expected

To disabled this behavior, just set:

"javascript.preferences.useAliasesForRenames": false,
"typescript.preferences.useAliasesForRenames": false,

These settings are only supported when using TypeScript 3.4+ in your workspace (this is the default in VS Code 1.33+)

本文标签：