Disable formatting a region of code using directives

TypeScript Version: 2.4.0 / nightly (2.5.0-dev.201xxxxx)

Feature Request
Add a way to disable formatting of a region of code. An example of this is js beatuify's preserve directive:

// Use preserve when the content is not javascript, but you don't want it reformatted.
/* beautify preserve:start */
{
    browserName: 'internet explorer',
    platform:    'Windows 7',
    version:     '8'
}
/* beautify preserve:end */

Hi there,
It will be great to have ability to prevent specific pieces of code from being formatted.
In my case JS code can contains 3-rd party snippets that are minified pieces of JS (Google analytics, conversion scripts etc.). I'd prefer to not format them on paste/update by specifying directives or something.

Hi,

oh it would be great to have the ability to prevent specific pieces of code from being formatted.

Louie

I would want to use this for multiline strings, which need very careful whitespace inclusions.

What about doing a similar stuff than PhpStorm ? :

<div>
<!-- @formatter:off -->
<div
    class="unformated-div"
><div>
<!-- @formatter:on -->
</div>

There are formatters in the marketplace that support this, but I don't like many of them for various other issues. How's the support for the native formatter going?

I wonder, what is the "More Feedback" that is expected? Can we have the flag removed?

// prettier-ignore
matrix(
1, 0, 0,
0, 1, 0,
0, 0, 1
)
//https://prettier.io/docs/en/ignore.html

No news about this?. Is a nice feature that sometimes is required because the formatter is not the best in some situations, but looks like the idea is abandoned.

Some more feedback here. Possible directive structure for the feature:

Disables formatting until the closure end. If placed within the file's top level, then until the end of the file. If placed at the beginning of the file, that implies disabling formatter for the whole file.

// format-disable

Clears any formatting disables active until this point.

// format-enable

Just for the next line. Additional lines of multi-line statements will be formatted.

// format-disable-next-line
let ugly = {very:'ugly' } // <-  this won't be formatted
let uglier =   { [ 'moreUgly']:'nope'}  // <-  this will be formatted

Just for the current line (left from the comment). Additional lines of multi-line statements will be formatted.

let ugliest = ugly??uglier  // format-disable-line  <-  disables for this line
    ? 'haha' : 'nope'  // <-  this will be formatted

For the whole statement, includes multiple lines.

// format-disable-next-statement
const x = // format-disable-statement
  isA ? a()
      : isB ? b()
            : throw 'Nope'

Disables until closure end

// format-disable-next-closure
{
  // format-disable-closure   // <-  basically just an alias to format-disable. For clarity.

}
// formatting is enabled here

Closing notes:

Not sure how tied this is to TypeScript itself and the // @ts-ignore etc comments, but // ts-format-disable or even // @ts-format-disable and all the variants mentioned above don't look too bad neither.

The problem I see here that the whole idea seems not to be interesting enough to be considering / work on.
I can not understand why, for us it is "must have" or no automatic formatter at all.

Would very much like to have this feature available as well.

feat: add ability to Disable formatting a region of code using ts dir…

Qwerty (Vítězslav Ackermann Ferko) (@ackvf)

I made a vscode EXTENSION with format ignore directivies in vscode plugin (patches native ts formatter), it currently works like so:

const a = {
    //@ts-format-ignore-region
    a:   1,
    a1:  2,
    //@ts-format-ignore-endregion
    b:  3,
    //@ts-format-ignore-line
    c:  4,
}

Only b: 3, will be formatted, obviously //@ts-format-ignore-region can be used on top of files to ignore them.

And I wonder whether 3 directives suggested by Qwerty (Vítězslav Ackermann Ferko) (@ackvf) are enough?

Hi all, I implemented format ignore directivies in vscode plugin

Great news, finally!

I've already tried it and it works perfectly. Thank you.

However I have one request - could it work also with space before the comment line? Like // @ts-format-ignore-region? Because we use the comments this way and our linter is unhappy without the space.

Also - is it possible to make it as standalone extension? There are plenty of features and it is more complicated to recommend this the all-in-one type of extension to the team.

Thanks!

Sorry hotfix was there, but forgot to release it instantly.. Now its definitely here!

Wow, I say that's customer service I like :) Thank you, tested and works perfectly. Regarding this issue, as for me, I consider this a "greater half" of the work done. I very much like that the command comments are consistent with original comments, this IMHO should be implemented there in the native formatter in the first place, but whatever... Now we have it anyway, finally!

The standalone extension will be definitely very welcome, but in the meantime I use the whole bundle and I see no problems so far, so good job and again, thank you.

Agree & thanks! From: tomhanax ***@***.***> Reply-To: microsoft/TypeScript ***@***.***> Date: Sunday, February 5, 2023 at 10:25 PM To: microsoft/TypeScript ***@***.***> Cc: Josh Kramer ***@***.***>, Comment ***@***.***> Subject: Re: [microsoft/TypeScript] Disable formatting a region of code using directives (#18261) Sorry hotfix was there, but forgot to release it instantly.. Now its definitely here! Wow, I say that's customer service I like :) Thank you, tested and works perfectly. Regarding this issue, as for me, I consider this a "greater half" of the work done. I very much like that the command comments are consistent with original comments, this IMHO should be implemented there in the native formatter in the first place, but whatever... Now we have it anyway, finally! The standalone extension will be definitely very welcome, but in the meantime I use the whole bundle and I see no problems so far, so good job and again, thank you. — Reply to this email directly, view it on GitHub<#18261 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/ACCIEBPZIL7HKE3XPTZ353TWWCKM7ANCNFSM4DZWFP4A>. You are receiving this because you commented.Message ID: ***@***.***>

Vitaly (@zardoy)

Vitaly (@zardoy) thank you, that's amazing.

I have one question, it only works if I disable Typescript plugin. Is that the right way? Or I have to configure it somehow to work with Typescript plugin enabled?

Aleksandr Bezhan (@alexbezhan)

Aleksandr Bezhan (@alexbezhan)

I have one question, it only works if I disable Typescript plugin

What TypeScript plugin are you talking about?? If you disable aforementioned extension it obviously won't work. Or do you mean something else?

Aleksandr Bezhan (@alexbezhan)

Aleksandr Bezhan (@alexbezhan)

I have one question, it only works if I disable Typescript plugin

What TypeScript plugin are you talking about?? If you disable aforementioned extension it obviously won't work. Or do you mean something else?

I mean this one https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-next

Aleksandr Bezhan (@alexbezhan)

Aleksandr Bezhan (@alexbezhan) Good question! You see, there is following in TS 5.0 changelog:

The exported API is no longer defined as a "configurable" object, so operations which attempt to modify the package at runtime will throw.

And it even currently breaks plugin in so many places 🤣

But I changed format features implementation, so should be good now here.

with clangFormat for C/C++ you can use

// clang-format off
...
// clang-format on

I'd love to have some status on this issue, as it's been sitting here for almost 8 years now with a lot of people clearly expressing interest in the feature...

Navigation Menu

Repository navigation

Disable formatting a region of code using directives #18261

Some more feedback here. Possible directive structure for the feature:

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Disable formatting a region of code using directives #18261

Description

Activity

anmiles commented on Oct 31, 2018

lfg6000 commented on Feb 4, 2019

stevenvergenz commented on May 30, 2019

PapsOu commented on Jul 25, 2019

ackvf commented on Jan 27, 2020

watana2 commented on Jan 17, 2022

Danixu commented on May 22, 2022

ackvf commented on May 31, 2022

Some more feedback here. Possible directive structure for the feature:

tomhanax commented on May 31, 2022

ktgilliam commented on Oct 25, 2022

ivanjd commented on Nov 17, 2022

4 remaining items

zardoy commented on Feb 2, 2023

tomhanax commented on Feb 2, 2023

zardoy commented on Feb 5, 2023

tomhanax commented on Feb 6, 2023

grapevinegizmos commented on Feb 6, 2023

alexbezhan commented on Feb 6, 2023

zardoy commented on Feb 7, 2023

alexbezhan commented on Feb 7, 2023

zardoy commented on Feb 15, 2023

soapy-spacetime commented on Feb 16, 2023

george-thomas-hill commented on Jul 2, 2024

Abdullah-AlAttar commented on Jul 1, 2025

i-am-shodan commented on Jul 4, 2025

ChristianLW commented on Jul 17, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions