如何让 Prettier 忽略一段代码？

Question

假设我们有一行代码：

const a = 'a'; const b = 'b';

我们不希望它被 Prettier 格式化。

到目前为止我尝试过的：

1）

// prettier-ignore
const a = 'a'; const b = 'b';

// prettier-ignore-start
const a = 'a'; const b = 'b';
// prettier-ignore-end

在这两种情况下，它都会转化为：

const a = 'a';
const b = 'b';

那么如何忽略一段代码呢？

Answer 1

有时可以将多个语句包装在一个块中，并// prettier-ignore在其前面：

// prettier-ignore
{
abcRouter('/api/abc', server);
xRouter  ('/api/x', server);
}

当然，这对于块级声明没有意义const，但您编写的这不是您的实际代码，而只是一个示例。因此，这是一个适用于某些情况但并非适用于所有情况的解决方案。总体而言，该策略是将多个事物包装在一个可开发的事物中prettier-ignore。

另一种选择是将您不想格式化的所有代码（例如，因为它是生成的）移动到由.prettierignore.

prettier-ignore-start并且仅在 Markdown 中prettier-ignore-end受支持。

Answer 2

您可以忽略目前不支持的代码块，您的选择是仅使用// prettier-ignore

下面的例子：

// prettier-ignore
const a = 'a';
const b = 'b';

// prettier-ignore
function xyz() {
 console.log({a, b})
}

已知问题-> https://github.com/prettier/prettier/issues/5287

文档 -> https://prettier.io/docs/en/ignore.html#javascript

Answer 3

你可以忽略整个方法

// prettier-ignore
function myFunc() {
    const a = 'a'; const b = 'b';
    return a + b;
}

实际上我只尝试过打字稿。但我认为也应该适用于 JS。

Answer 4

// prettier-ignore此处不起作用的原因是，// prettier-ignore它将从格式化中排除抽象语法树中的下一个节点（请参阅https://prettier.io/docs/en/ignore.html）。

在你的情况下，下一个节点只会是const a = 'a';. 例如，

// prettier-ignore
const a = 
  'a';

格式化后会被保留。

如果您想将两个赋值保留在一行中而不更改整个文件的 prettier 配置，则可以使用解构赋值（如果您使用的是 es6 或 node）：

const [a, b] = ["a", "b"];

Answer 5

这很糟糕，但目前不支持这一点。

虽然这不适用于OP的示例，但一种选择是将注释添加prettier-ignore到要忽略的每一行的开头/* */，使用注释样式，例如。

/* prettier-ignore */ import { SomeTypeA, SomeTypeB, SomeTypeC } from './some-long-folder-name/super-long-import';
/* prettier-ignore */ import { someFnA, someFnB, someFnC, } from './another-long-folder-name/super-long-import';

在我看来，这比其他选择更容易被眼睛看到；

让 Prettier 重新格式化导入：

import {
    SomeTypeA,
    SomeTypeB,
    SomeTypeC,
} from './some-long-folder-name/super-long-import';
import {
    someFnA,
    someFnB,
    someFnC,
} from './another-long-folder-name/super-long-import';

在每次导入上方指定注释// prettier-ignore：

// prettier-ignore
import { SomeTypeA, SomeTypeB, SomeTypeC } from './some-long-folder-name/super-long-import';
// prettier-ignore
import { someFnA, someFnB, someFnC, } from './another-long-folder-name/super-long-import';