score:45
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
score:4
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: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.
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:29
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
Source: stackoverflow.com
Related Query
- Disable prettier for a single file
- Single quote in tsx file with prettier
- How to disable css modules for one file in webpack
- How can I disable CORS for a single route in Express without rewriting all of my routes?
- how to make disable file system routing for specific page in nextjs
- PropType validations for multiple react components in a single file
- A single file for react superagent?
- Is it better to have a file for every article or reuse a single file for each article?
- How do I run react and express with a single server.js file listening to a single port for production?
- Get a single path value for svg file having multiple paths
- Typescript react - Could not find a declaration file for module ''react-materialize'. 'path/to/module-name.js' implicitly has an any type
- How React JS index.js file contacting index.html for id references?
- How to disable source maps for React JS Application
- Prettier doesn't format .tsx file
- How to disable box-shadow globally for all MUI components?
- Could not find a declaration file for module 'react-redux'.
- Generate single physical javascript file using create-react-app
- Could not find declaration file for enzyme-adapter-react-16?
- jest updateSnapshot for specific test file
- Disable chrome react DevTools for production
- Info.plist file for react native ios app using expo SDK
- combine react build output into single js file
- Cannot find type definition file for 'node' in Typescript/React app
- How to run Jest tests with coverage for one file
- Testing with Jest failed with Error: Error watching file for changes: EMFILE
- React configuration file for post deployment settings
- Material UI v4 makeStyles exported from a single file doesn't retain the styles on refresh
- How do I configure my .htaccess file for React App in Subdirectory?
- System limit for number of file watchers reached
- Specify type for file upload event in react typescript
More Query from same tag
- Saving array of objects in state and passing it to return to display it on web page in react
- How to rotate the image captured using the getscreenshot method in react-webcam?
- TypeError: Cannot read properties of undefined (reading 'string') with react joi-browser package
- How to iterate over HTML content in ReactJS
- Unable to set state of TextField to undefined using React hook
- React table pre select rows
- Mocking document.querySelector in Jest
- React Router not working with multiple fragments
- how can i loop through the array inside of an object. and render it in the react component
- Im getting my coordinates but the state of 'data' isnt updating
- Why am I getting this error "TypeError: Cannot read property 'value' of undefined"
- React state not updating props (using next.js)
- How to reach moment timestamp lines in a function
- how to fix cors error in react and spring web application?
- justify center antd form
- How to apply react-native-linear-gradient for the entire app background with React Native
- How to lock a row in a react material-table (with remote data) on edit?
- react-native-permissions returning RNPermissions null in react-native expo project
- Using if statement to determine if a Firebase User can access certain React Router paths
- Getting html tag into data from API post method
- how search from array of object? and sort data by ascending and descending by click on column name?
- Javascript - Get occurence of json array with ESLINT 6
- I want to display a different screen when viewed from my phone
- Parsing error: Unexpected token, expected "," react
- How to get the current url path using hook router in react?
- How to update React state once per iteration of a loop
- Import module from node_modules (create-react-app)
- What is nextprops in UNSAFE_componentWillReceiveProps and convert it into React Hook Functional component?
- React Hooks useEffect saves the last state and won't update it with the new one. It runs twice with two different states
- SCORM Hosting Cross-Origin