Support prettier-ignore-start/end for other languages (not only Markdown)

[brunolemos]

It seems this feature was added only for markdown (#4202 cc @ikatyang), but it's actually useful for other languages as well. It is not working on typescript files on my tests.

Related: facebook/create-react-app#5543

Environments:

• Prettier Version: 1.14.3
• Running Prettier via: CLI
• Runtime: Node.js v8.11.4
• Operating System: macOS

Steps to reproduce:

Create a index.d.ts file with the following content:

// prettier-ignore
type A1 = string;

// prettier-ignore
type A2 = string

/* prettier-ignore-start */
type B1 = string;
type B2 = string
/* prettier-ignore-end */

type C1 = string;
type C2 = string

Expected behavior:

// prettier-ignore
type A1 = string;

// prettier-ignore
type A2 = string

/* prettier-ignore-start */
type B1 = string;
type B2 = string
/* prettier-ignore-end */

-type C1 = string;
+type C1 = string
type C2 = string

Actual behavior:

// prettier-ignore
type A1 = string;

// prettier-ignore
type A2 = string

/* prettier-ignore-start */
-type B1 = string;
+type B1 = string
type B2 = string
/* prettier-ignore-end */

-type C1 = string;
+type C1 = string
type C2 = string

[jedwards1211]

I have scripts that autogenerate chunks of class property type declarations for Sequelize classes like the following, really need this feature to make things more convenient:

  /* prettier-ignore-start */
  static Users: Association.BelongsToMany<OrganizationAttributes, OrganizationInitAttributes, Organization, UserAttributes, UserInitAttributes, User, OrganizationMemberAttributes, OrganizationMember> = (null: any);
  getUsers: BelongsToManyGetMany<User>;
  setUsers: BelongsToManySetMany<User, number, OrganizationMemberThroughInitAttributes>;
  addUsers: BelongsToManyAddMany<User, number, OrganizationMemberThroughInitAttributes>;
  addUser: BelongsToManyAddOne<User, number, OrganizationMemberThroughInitAttributes>;
  createUser: BelongsToManyCreateOne<UserInitAttributes, User, OrganizationMemberThroughInitAttributes>;
  removeUser: BelongsToManyRemoveOne<User, number>;
  removeUsers: BelongsToManyRemoveMany<User, number>;
  hasUser: BelongsToManyHasOne<User, number>;
  hasUsers: BelongsToManyHasMany<User, number>;
  countUsers: BelongsToManyCount;
  /* prettier-ignore-end */

[muuvmuuv]

Would be very useful for prettier --fix when you have a structure you don't want to be fixed or linted.

 /* prettier-ignore-start */
      topLeft: "╔", topMid: "╦", top: "═", topRight: "╗",
      midLeft: "╠", midMid: "╬", mid: "═", midRight: "╣",
      botLeft: "╚", botMid: "╩", bot: "═", botRight: "╝"
  /* prettier-ignore-end */

/* prettier-ignore-[end|start] */ would be very good

I would also add

• /* prettier-ignore-next-line */: to ignore the line after
• // prettier-ignore-line: to ignore the line the commend is in

[lydell]

@muuvmuuv There’s already // prettier-ignore – check it out! https://prettier.io/docs/en/ignore.html#javascript

[adelriosantiago]

The // prettier-ignore-start and // prettier-ignore-end are not working in JS, right @lydell?

[lydell]

@adelriosantiago That's correct, that's what this issue is about.

[basickarl]

I would like a // prettier-disable-line. I currently need an eslint comment: // eslint-disable-line @typescript-eslint/no-unused-vars but prettier keeps on shifting this to the next line.

[lydell]

@basickarl It's recommended to use // eslint-disable-next-line rather than // eslint-disable-line because of that issue.

[basickarl]

@lydell I see! Thanks, I'll use this instead.

[christiaanwesterbeek]

In javascript prettier-ignore ignores the next block, so what I did was just make the next few lines a block.

Before:

// prettier-ignore
abcRouter('/api/abc', server);
xRouter  ('/api/x', server);

After

// prettier-ignore
{
abcRouter('/api/abc', server);
xRouter  ('/api/x', server);
}

Please mind some block scoped statements like const and let within the block you're creating.

[jaredmeakin]

I'm interested in this as well. When trying to use descriptive names with React hooks this can quickly muddy up variable declarations I have at the top of a component. Being able to ignore a block would allow these variable names to remain description, but also keep them single-line which helps keep the code readable.

[bfaulk96]

I'm running into a really difficult situation with Prettier in Typescript –

type MyType = typeof someFunc<unknown>;

while this is valid Typescript, it throws
SyntaxError: ';' expected. when running prettier, and none of the prettier-ignore comments seem to work to ignore it.

[error] > 6 | type MyType = typeof someFunc<unknown>;
[error]     |                              ^

[alexander-akait]

New verison of typescript in main (with fixed your problem), but not release yet, please wait a new release

[alexander-akait]

Prettier can't ignore fragement in your code, we parser a whole file, so if something is not supported by parser, you will get an error, ignoring is not help here

[christiaanwesterbeek]

I'm running into a really difficult situation with Prettier in Typescript –

@bfaulk96 what does that have to do with this issue (5287)?

[christiaanwesterbeek]

You're right. I overlooked that. I'll probably delete my comments since they don't contribute anything useful...

[wesleyboar]

Prettier is a tool for enforcing consistency. The support for -start/end is inconsistent.

[gustavopch]

@wesleyboar That implies // prettier-ignore shouldn't exist, but it does.

[wesleyboar]

I was exasperated by Prettier in general. I shouldn't have let that fester into a comment here. Sorry.

[k-utsumi]

Not a good solution, but
Running Prettier with eslint-plugin-prettier in ESLint will solve that.

These are generally not recommended, but can be useful in certain circumstances.
—— Notes | Integrating with Linters · Prettier

This allows ESLint comments to be used.

/* eslint-disable prettier/prettier */
...
/* eslint-enable prettier/prettier */

Vue template

<!-- eslint-disable prettier/prettier -->
...
<!-- eslint-enable prettier/prettier -->

In VS Code,

Need to disallow the use of the Prettier plugin because of unintended formatting.
Must be formatted with ESLint plugin only.

[SergeySc]

Not a good solution, but running Prettier with eslint-plugin-prettier in ESLint will solve that.

These are generally not recommended, but can be useful in certain circumstances.
—— Notes | Integrating with Linters · Prettier

This allows ESLint comments to be used.

// eslint-disable prettier/prettier
...
// eslint-enable prettier/prettier

In VS Code,

Thank you for that @k-utsumi

A little update you have to use block comments instead of // to make it work.

/* eslint-disable prettier/prettier */
...
/* eslint-enable prettier/prettier */

[jeffersoneagley]

What about cases where Prettier is wrong and it breaks things? I have a few React components in TS that are generic, and prettier insists on deleting the generic syntax. The only option available to me now is to turn off formatting for the entire component rather than just telling prettier it's wrong about one comma.

Ex:

export const MyWhatever = <TItem>({ 
  someProp 
}: IMyWhateverProps<TItem>)  => {
  // stuff that needs to know what TItem is
}

[ReetiMauryaCrest]

Does someone has any updates on this issue? I am currently using Django templates and prettier is really bad at formatting those, so I constantly use in my code to stop it from formatting my code, but I am not able to do that in certain cases like this:

<input
        id="activation-toggle"
        type="checkbox"
        name="is_active"
        {%if form.is_active.value%}checked{%endif%} />

As the template tags are inside the html tag itself, I cannot use the as it creates error, and prettier automatically formats this such that {%if is on first line and the rest of the block comes on second line, creating a Django parser error. I am at a dead end at this point, if anyone has any solution then please share.

[Kaveh-nasrollahi]

you can put your code between two comment of /*prettier-ignore*/ and this bock will ignore.

/*prettier-ignore*/
   your code
/*prettier-ignore*/

[ZaLiTHkA]

you can put your code between two comment of /*prettier-ignore*/ and this bock will ignore.

/*prettier-ignore*/
   your code
/*prettier-ignore*/

that is not how it currently works, which is precisely why this issue exists. this comment is not only incorrect, but dangerously misleading (think of an AI scraping this comment now, which may just tell people "yes it does support that, just use....").

[AndreiSoroka]

What is the problem with implementation? This issue is already 2 years old

[lolmaus]

@AndreiSoroka Nobody has bothered to implement it. 🤷‍♂️

Note that nobody has an obligation to. Sad but true.

[richard-gs]

Bump

[salemhilal]

As someone who tried to implement a fix a very while ago, this problem is not as easy as you'd think, and may not make sense with Prettier's implementation. Here's my (probably poor, probably dated) understanding of it:

Prettier walks down the AST and formats things as it goes. This is important, since a parent node (like a function declaration) can impact its children (the indentation of a variable declared inside the function).

For it to stop and start formatting at arbitrary points, it would have to break that abstraction. What would it mean to stop formatting before a function is declared, but then to start formatting again midway through the body?

In most cases, I believe people probably want to keep the formatting of a specific constant (like a string or a weird object) which, thankfully, prettier already supports. If that's not the case, it seems like a lot of work to reconcile Prettier's implementation with this feature request.

[AndreiSoroka]

P.s. I think your understanding is not poor or dated. I tried too, but it suddenly started eating up all my time. Need to be involved in the project a bit more than just contribution from some guy from second house

[benface]

In most cases, I believe people probably want to keep the formatting of a specific constant (like a string or a weird object) which, thankfully, prettier already supports.

Oh, how?

[salemhilal]

In most cases, I believe people probably want to keep the formatting of a specific constant (like a string or a weird object) which, thankfully, prettier already supports.

Oh, how?

I'm referring to things like this comment specifically

[fudom]

I would like to disable particular things like print-width only. For example:

// Print width demo: -------------------------------------|
this.doSomething(AnotherOne.BlahBlah,AnotherTwo.Blah);
 this.doSomething(AnotherOne.BlahBlah1, AnotherTwo.Blah1);
this.doSomething(AnotherOne.BlahBlah10, AnotherTwo.Blah10);
this.doSomething(AnotherOne.BlahBlah2, AnotherTwo.Blah2);

Currently formatted to:

// Print width demo: -----------------------------------|
this.doSomething(AnotherOne.BlahBlah, AnotherTwo.Blah);
this.doSomething(AnotherOne.BlahBlah1, AnotherTwo.Blah1);
this.doSomething(
  AnotherOne.BlahBlah10, 
  AnotherTwo.Blah10
  );
this.doSomething(AnotherOne.BlahBlah2, AnotherTwo.Blah2);

But expected / wanted:

// prettier-ignore-start print-width
this.doSomething(AnotherOne.BlahBlah, AnotherTwo.Blah);
this.doSomething(AnotherOne.BlahBlah1, AnotherTwo.Blah1);
this.doSomething(AnotherOne.BlahBlah10, AnotherTwo.Blah10);
this.doSomething(AnotherOne.BlahBlah2, AnotherTwo.Blah2);
// prettier-ignore-end

Playground

I want Prettier enabled here to format/fix the other things. In this case I only want to disable the print-width. Either disable or override value by e.g. print-width=240. Multiple options could be separated by comma. It's similar to e.g. ESLint.

See #16662