Say we have a line of code:
const a = 'a'; const b = 'b';
and we wouldn't want it to be formatter by Prettier.
What I've tried so far:
1)
// prettier-ignore
const a = 'a'; const b = 'b';
// prettier-ignore-start
const a = 'a'; const b = 'b';
// prettier-ignore-end
In both cases it gets transformed into:
const a = 'a';
const b = 'b';
So how to ignore a block of code?
While this doesnt work for OP's example, one option is to add the prettier-ignore comment to the start of each line to be ignored, using the /* */ comment style, eg.
Prettier should process all files with relevant file extensions, but it should ignore the patterns from . gitignore . In other words, ignore the build outputs. It absolutely does not make sense, by default, to reformat build outputs.
It’s recommended to have a .prettierignore in your project! This way you can run prettier --write . to make sure that everything is formatted (without mangling files you don’t want, or choking on generated files). And – your editor will know which files not to format! (See also the --ignore-path CLI option .)
How to disable prettier in VSCode for a specific project? 1 On Windows/Linux - File > Preferences > Settings. 2 On macOS - Code > Preferences > Settings Search for Prettier:Require Config and make sure it is checked.
Ignoring Code 1 Ignoring Files: .prettierignore. To exclude files from formatting, create a .prettierignore file in the root of your project. ... 2 JavaScript. A JavaScript comment of // prettier-ignore will exclude the next node in the abstract syntax tree from formatting. 3 JSX 4 HTML 5 CSS 6 Markdown. ... 7 YAML 8 GraphQL 9 Handlebars
For example, in the code below, Prettier will remove the brackets by default: It might not pass code review with the rest of your team, but at least you've given a reason! Do you have any cases where you use prettier-ignore?
Sometimes multiple statements can be wrapped in a block with // prettier-ignore
in front of it:
// prettier-ignore
{
abcRouter('/api/abc', server);
xRouter ('/api/x', server);
}
Of course, that doesn't make sense for block-level const
declarations, but you wrote that was not your actual code and just an example. So that's a solution that works in some but not in all cases. Overall, the strategy is to wrap multiple things in one thing that can be prettier-ignore
d.
Another option is to move all the code you don't want to format (e.g., because it's generated) to a separate file excluded by .prettierignore
.
prettier-ignore-start
and prettier-ignore-end
are supported only in Markdown.
You can ignore a code block is not supported at the moment, your option is is to only use // prettier-ignore
example below:
// prettier-ignore
const a = 'a';
const b = 'b';
// prettier-ignore
function xyz() {
console.log({a, b})
}
known issue -> https://github.com/prettier/prettier/issues/5287
Docs -> https://prettier.io/docs/en/ignore.html#javascript
You can ignore the whole method
// prettier-ignore
function myFunc() {
const a = 'a'; const b = 'b';
return a + b;
}
Actually I tried only on typescript. But I think should works on JS as well.
The reason why // prettier-ignore
does not work here is that // prettier-ignore
will exclude the next node in the abstract syntax tree from formatting (see https://prettier.io/docs/en/ignore.html).
In your case the next node would only be const a = 'a';
. For instance,
// prettier-ignore
const a =
'a';
would be preserved after formatting.
If you want to keep both assignments in one line without changing the prettier configuration for your whole file, you could use destructuring assignment if you are using es6 or node:
const [a, b] = ["a", "b"];
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With