Disable prettier for a single file
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)
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
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