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: https://github.com/facebook/create-react-app/issues/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

[matias-quezada]

@lydell That helps @muuvmuuv but sometimes we have multiple AST nodes to ignore, it's absurd to add // prettier-ignore to each line:

/* prettier-ignore-start */
route('my-designs', '/my-designs/', require('./pages/my-designs/my-designs'));
route('order', '/:project/:thank/order/', require('./pages/order/order'));
route('order-success', '/:project/order-success/', require('./pages/order-success/order-success'));
route('page-not-found', '/page-not-found/', require('./pages/page-not-found/page-not-found'));
route('password-forgot', '/password-forgot/', require('./pages/password-forgot/password-forgot'));
route('restore-password', '/restore-password/:token', require('./pages/restore-password/restore-password'));
/* prettier-ignore-end */

The only valid option for now is to ignore the whole file.

[lydell]

@matias-quezada Correct, my reply was to @muuvmuuv.

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

[sturmenta]

+1

[notiv-nt]

6 months later, any ideas ?

[lucksp]

+1 for this block ignore

[mdeeter]

+1

[edit]... I post a +1 and get confused emojis? a month after previous users post +1 comments and get upvotes... wth?

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

[renaldas-kerpe-arria]

Any update? It's pretty annoying having to disable formatting on every single line when multiple lines need to be ignored (not an actual code block), and the code gets difficult to read that way.

[skourismanolis]

this would also be very useful for people working with express.js, something like this:

router.post('/validate', async (req, res, next) => {
    //route code here
}

get's formatted like this:

router.post(
	'/validate',
	async (req, res, next) => {
   //route code here
}

However, it's better for readability to keep the first line intact, while formatting the actual route code. If I add a // prettier-ignore before the first line, prettier ignores everything (including the actual route code)

One should be able to do this in order to remedy this type of situation.

// prettier-ignore-next-line
router.post('/validate', async (req, res, next) => {
    //formatted route code here
}

[theoephraim]

Please get this on the roadmap. There are many reasons why you may want to format things differently, particularly if it makes your code more legible. Easily opting out for short sections is a no brainer IMO, and matches what we expect from eslint and other similar tools.

[fkoeppling]

So, it's been years, obviously this would be an amazing feature - why won't it get implemented? :(

[thorn0]

@MIHAUKI See that green "help wanted" label? Hover your mouse cursor over it and read.

[chaitan94]

I've found myself wanting to make use of this feature quite a few times myself. Noticed that with 100+ :+1:s, I am not alone here. There are definitely a lot of devs wanting this feature. So I took some time out and decided to give this a go myself. I have created a PR for the same: https://github.com/prettier/prettier/pull/8926

[mikael1000]

I want it to ignore multiple lines in CSS also. Don't limit it to Js-files. Right now I make-up hacky CSS-blocks to make it work with just "prettier-ignore".

This should be basic functionality.

[alfaproject]

I just stumbled upon this issue and was also surprised why it's only implemented for Markdown ):

[neilveil]

@brunolemos opened this issue on 23 Oct 2018 & today is 25 Nov 2020.

Is I am the only one who is still waiting for this feature to be implemented?

[thorn0]

@neilveil Go ahead, implement it, and everyone will love you!

[neilveil]

Okay, I will start working on this feature if there are at least 100 thumbs up on this comment. Let's see if people still need this feature except myself.

[Ne-Ne]

@neilveil definitely needed, setting up test data and trying to avoid hitting the printWidth rule with args forcing line breaks.

[thorn0]

@Ne-Ne Doesn't this trick work for you? In Markdown, it's not possible to do this, that's why this feature is more relevant for that language than for the others.

[salemhilal]

I took a first stab at how this sort of feature might be implemented here: https://github.com/prettier/prettier/pull/9818. You can play around with it here. There are a lot of cases that don't yet work, and whitespace seems to be ignored occasionally. I'm relatively new to Prettier's codebase, so any feedback would be much appreciated.