Disable formatting a region of code using directives

[mjbvz]

From: microsoft/vscode#33772

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 */

[anmiles]

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.

[lfg6000]

Hi,

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

Louie

[stevenvergenz]

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

[PapsOu]

What about doing a similar stuff than PhpStorm ? :

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

[ackvf]

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?

[watana2]

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

[Danixu]

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.

[ackvf]

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.

[tomhanax]

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.

[ktgilliam]

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

[grapevinegizmos]

Just endorsing the desirability of this feature.
It would be useful when you are trying to make something like an array definition and present it
in the source as something that looks like a table. I find it much easier to scan and change this way,
especially if there are many rows. But when you format the code, it often gets completely scrambled.

myInitArray = [        
  ["St Louis",     250939,  "University of St. Louis", "231 Main Street"]
  ["Mineapolis",   731392,  "Pace College",            "21 Yorkville Avenue"]
  ["Davis",        928845,  "UC",                      "10192 22nd Street"]
]

[alexbezhan]

Just endorsing the desirability of this feature. It would be useful when you are trying to make something like an array definition and present it in the source as something that looks like a table. I find it much easier to scan and change this way, especially if there are many rows. But when you format the code, it often gets completely scrambled.

myInitArray = [        
  ["St Louis",     250939,  "University of St. Louis", "231 Main Street"]
  ["Mineapolis",   731392,  "Pace College",            "21 Yorkville Avenue"]
  ["Davis",        928845,  "UC",                      "10192 22nd Street"]
]

I very need this too, for same reasons. I have a complex set of arrays, with specific structure. I need to keep it nicely formatted as a table, just to understand what is going on there.

[jmichaels]

Adding my vote. Personally, I find it useful to be able to line things up in code for these reasons:

• Intuitively representing the structure of tabular data in code, especially when creating many similar records for mock/test data, lookup values, etc...
• Makes it easier to notice errors (while scanning the code, i.e. in a code review) which wouldn't be caught by the type checker
• Can help document the code by making intentional repetition clear (and variation from that repetition more noticeable as well)

I don't do it often (and it can definitely be overdone), but it's saved me and my team from mistakes in the past.

I like the way that the Black formatter for Python handles it:

# fmt: off
create_test_user(name="Admin User",  role="admin",      theme="dark")
create_test_user(name="Normal User", role="registered", theme="light")
create_test_user(name="Guest User",  role=None,         theme=None)
# fmt: on

[lordphil3]

Hi! It would be awesome to have this feature! Thanks for your amazing work!

[zardoy]

Hi all, I implemented 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 @ackvf are enough?

[tomhanax]

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!

[tomhanax]

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.

[grapevinegizmos]

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: ***@***.***>

[alexbezhan]

@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?

[zardoy]

@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?

[alexbezhan]

@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

[zardoy]

@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.

[soapy-spacetime]

with clangFormat for C/C++ you can use

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