Disable prettier for a single file
Solution 1
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
Solution 2
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
Solution 3
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
Solution 4
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.
... (code up here is formatted by prettier)
// prettier-ignore
function noPrettierFormattingInHere(){
...
}
... (code down here is formatted by prettier)
Hamid Shoja
If you want to go fast, go alone. If you want to go far, go together JS Developer: (React JS, React Native , Node JS,...) Linkedin: https://www.linkedin.com/in/hash86/ Articles: https://dev.to/hshoja
Updated on February 06, 2022Comments
-
Hamid Shoja about 2 years
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}`);