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}`); 

Answer 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  

Answer 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