73

Say we have a line of code:

const a = 'a'; const b = 'b';

and we wouldn't want it to be formatter by Prettier.

What I've tried so far:

1)

// prettier-ignore
const a = 'a'; const b = 'b';
// prettier-ignore-start
const a = 'a'; const b = 'b';
// prettier-ignore-end

In both cases it gets transformed into:

const a = 'a';
const b = 'b';

So how to ignore a block of code?

2

7 Answers 7

63

Sometimes multiple statements can be wrapped in a block with // prettier-ignore in front of it:

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

Of course, that doesn't make sense for block-level const declarations, but you wrote that was not your actual code and just an example. So that's a solution that works in some but not in all cases. Overall, the strategy is to wrap multiple things in one thing that can be prettier-ignored.

Another option is to move all the code you don't want to format (e.g., because it's generated) to a separate file excluded by .prettierignore.

prettier-ignore-start and prettier-ignore-end are supported only in Markdown.

2
  • Weird they've only made prettier-ignore-start and prettier-ignore-end available for markdown.
    – aderchox
    Jun 20 at 12:39
  • 1
    @aderchox It's not easy at all to implement it for other languages as Prettier works with AST nodes, not with lines.
    – thorn0
    Jun 22 at 16:00
18

You can ignore a code block is not supported at the moment, your option is is to only use // prettier-ignore

example below:

// prettier-ignore
const a = 'a';
const b = 'b';

// prettier-ignore
function xyz() {
 console.log({a, b})
}

known issue -> https://github.com/prettier/prettier/issues/5287

Docs -> https://prettier.io/docs/en/ignore.html#javascript

16

You can ignore the whole method

// prettier-ignore
function myFunc() {
    const a = 'a'; const b = 'b';
    return a + b;
}

Actually I tried only on typescript. But I think should works on JS as well.

1
  • 2
    This works on blocks. I've tried on functions and switch blocks. Dec 9, 2021 at 4:34
7

The reason why // prettier-ignore does not work here is that // prettier-ignore will exclude the next node in the abstract syntax tree from formatting (see https://prettier.io/docs/en/ignore.html).

In your case the next node would only be const a = 'a';. For instance,

// prettier-ignore
const a = 
  'a';

would be preserved after formatting.

If you want to keep both assignments in one line without changing the prettier configuration for your whole file, you could use destructuring assignment if you are using es6 or node:

const [a, b] = ["a", "b"];
2
  • 1
    Or const a = 'a', b = 'b';
    – adiga
    Feb 18, 2021 at 12:13
  • Well, actually this was just a minimal example, I'm really curious how to really ignore multiple things.
    – Onkeltem
    Feb 19, 2021 at 13:20
7

It sucks, but this isnt currently supported.

While this doesnt work for OP's example, one option is to add the prettier-ignore comment to the start of each line to be ignored, using the /* */ comment style, eg.

/* prettier-ignore */ import { SomeTypeA, SomeTypeB, SomeTypeC } from './some-long-folder-name/super-long-import';
/* prettier-ignore */ import { someFnA, someFnB, someFnC, } from './another-long-folder-name/super-long-import';

In my opinion, this is easier on the eyes than the alternatives;

Letting prettier reformat the imports:

import {
    SomeTypeA,
    SomeTypeB,
    SomeTypeC,
} from './some-long-folder-name/super-long-import';
import {
    someFnA,
    someFnB,
    someFnC,
} from './another-long-folder-name/super-long-import';

Specifying the // prettier-ignore comment above each import:

// prettier-ignore
import { SomeTypeA, SomeTypeB, SomeTypeC } from './some-long-folder-name/super-long-import';
// prettier-ignore
import { someFnA, someFnB, someFnC, } from './another-long-folder-name/super-long-import';
1

To disable the auto line break in the VS code.

Open vs code => Code => Preferences => Settings => In the search field type: Prettier Now from the provided Prettier settings, choose the Prettier: Print Width

r/vscode - To disable the auto line break in the VS code. Screenshot

And Instead of 80, you can make it a big number. Eg: 999999 Now you don't have to worry about the line break.

https://www.reddit.com/r/vscode/comments/lkz3d7/to_disable_the_auto_line_break_in_the_vs_code/

0

According to its documentation, ESLint utilizes the configuration file .eslintrc.json. It is used to apply specific settings to ESLint.

If you wish to disable ESLint, you can delete this file (.eslintrc.json) under your project root directory.

You can find the documentation of ESLint at this link.

You can find the documentation of ESLint built-in rules at this link

This is a sample content of .eslintrc.json:

module.exports = {
  root: true,
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'node', 'prettier'],
  parserOptions: {
    tsconfigRootDir: __dirname,
    project: ['./tsconfig.json'],
  },
  extends: [
    'eslint:recommended',
    'plugin:node/recommended',
    'plugin:@typescript-eslint/eslint-recommended',
    'plugin:@typescript-eslint/recommended',
    'plugin:@typescript-eslint/recommended-requiring-type-checking',
    'plugin:prettier/recommended',
  ],
  rules: {
    'prettier/prettier': 'warn',
    'node/no-missing-import': 'off',
    'node/no-empty-function': 'off',
    'node/no-unsupported-features/es-syntax': 'off',
    'node/no-missing-require': 'off',
    'node/shebang': 'off',
    '@typescript-eslint/no-use-before-define': 'off',
    quotes: ['warn', 'single', { avoidEscape: true }],
    'node/no-unpublished-import': 'off',
    '@typescript-eslint/no-unsafe-assignment': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/ban-ts-comment': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
  },
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.