Disable prettier for a single file

Question

I need to disable prettier for a single file (API URLs file) in my project in Vs-code. actually, I need each API and its URL to be in one line, but prettier breaks them in two lines.

before

export const GET_SEARCH_TEACHERS = params => myexampleFunction_app_base(`teachers/search/${params.search}`);

after

export const GET_SEARCH_TEACHERS = params =>
myexampleFunction_app_base(`teachers/search/${params.search}`);

You might want to consult the documentation for questions like this. https://prettier.io/docs/en/ignore.html https://github.com/prettier/prettier/issues/3634 — evolutionxbox, Jan 23 '20 at 10:47
based documentation you've mentioned there is a package 'Formatting Toggle' for vs code for do this , But I prefer not to install the new package. — Hamid Shoja, Jan 23 '20 at 11:16
The github link mentions that ignoring a single file in VSCode is not trivial, so someone made an extension for it. If you don't want to install it, you'll likely need to implement your own. — evolutionxbox, Jan 23 '20 at 11:39
Or you could use a "prettier ignore" comment which will ignore those lines from being formatted — evolutionxbox, Jan 23 '20 at 11:46
Can you give an example with prettier ignore or share a link that describe that with example — Hamid Shoja, Jan 23 '20 at 11:56
I already have (please check the links in the comment above) — evolutionxbox, Jan 23 '20 at 11:57

score 80 · Accepted Answer · edited Apr 26 '21 at 14:55

80

If you want a certain file in a repo to never be formatted by prettier, you can add it to a .prettierignore file: Disable Prettier for one file

From the docs:

To exclude files from formatting, create a .prettierignore file in the root of your project. .prettierignore uses gitignore syntax.

Example:
# Ignore artifacts: 
build 
coverage

# Ignore all HTML files:
*.html 

edited Apr 26 '21 at 14:55

ruffin

16,507
9
88
138

answered Jan 23 '20 at 13:16

Zunaib Imtiaz

2,849
11
20

2

and if you want to disable the whole thing just put ** in the prettierignore file – Kat Lim Ruiz Dec 28 '21 at 18:50
How can I disable single file without touching .prettierignore? – Qwerty Feb 18 '23 at 00:30
1

by adding this on top of your file - /* eslint-disable prettier/prettier */ – Zunaib Imtiaz Feb 18 '23 at 09:27

Hamid Shoja · Answer 2 · 2021-12-10T20:10:41.773

Thanks to evolutionxbox, so far couple of solutions were found.

Ignoring Files or Folders

To exclude files from formatting, add entries to a .prettierignore file in the project root or set the --ignore-path CLI option. .prettierignore uses gitignore syntax.

/app/src/scripts/example.js
/app/src/folder/

Ignore based on extension

To exclude files based on extesntion you can add entries to a .prettierignore file as well

*.html.erb

Ignore lines

JavaScript

A JavaScript comment of // prettier-ignore will exclude the next node in the abstract syntax tree from formatting.

    matrix(
      1, 0, 0,
      0, 1, 0,
      0, 0, 1
    )

    // prettier-ignore
    matrix(
      1, 0, 0,
      0, 1, 0,
      0, 0, 1
    )

will be transformed to:

    matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);

    // prettier-ignore
    matrix(
      1, 0, 0,
      0, 1, 0,
      0, 0, 1
    )

JSX

    <div>
      {/* prettier-ignore */}
      <span     ugly  format=''   />
    </div>

more: https://prettier.io/docs/en/ignore.html

Using an extension

We can use an extension to toggle formatting like prettier on the specific page when you need it.

Formatting Toggle https://marketplace.visualstudio.com/items?itemName=tombonnike.vscode-status-bar-format-toggle

SherylHohman · Answer 3 · 2022-02-24T17:38:43.827

Another option is to use the prettier block-like toggle, to disable formatting for a "block" within a file.
For example, adding // prettier-ignore before the start of a function definition, will disable prettier formatting for that function.
Similarly, if you put the line above an if statement, only the if block is ignored.

Basically a block is denoted by a pair of { } matching braces.

... (code up here is formatted by prettier)

// prettier-ignore
function noPrettierFormattingInHere(){
  ...
}

... (code down here is formatted by prettier)

score 5 · Answer 4 · answered Sep 21 '21 at 08:46

create .prettierignore file in the root of your repo and add the name of the folders that you want to ignore and add full path of the file that you want to ignore and save it.

use the .gitignore format to update your file you can read about it in the prettier website too https://prettier.io/docs/en/ignore.html#ignoring-files

score 1 · Answer 5 · answered Dec 22 '22 at 23:54

1

. prettierignore for React project

build/
node_modules/
internals/generators/
internals/scripts/
package-lock.json
yarn.lock
package.json
coverage

answered Dec 22 '22 at 23:54

Ivan K.

748
7
11

score 0 · Answer 6 · answered Jun 30 '23 at 07:16

0

To disable Prettier for a specific file just add the following code

// prettier-ignore

Example:

const { gql } = require("@apollo/client");

// prettier-ignore

export const INSERT_RECHARGE_REGISTER = gql`

`

answered Jun 30 '23 at 07:16

Trinh Hieu

379
3
6

This only disables prettier for the next statement or block. – Qwerty Jul 28 '23 at 00:06