如何让 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

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

虽然这不适用于 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';

Answer 2

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

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

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

格式化后会保留。

如果您想将两个分配保留在一行而不更改整个文件的更漂亮的配置，如果您使用的是 es6 或节点，则可以使用解构分配：

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

Answer 3

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

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

当然，这对于块级const声明没有意义，但你写的不是你的实际代码，只是一个例子。 所以这是一个在某些情况下但并非在所有情况下都有效的解决方案。 总体而言，该策略是将多个东西包装在一个可以prettier-ignore的东西中。

另一种选择是将您不想格式化的所有代码（例如，因为它已生成）移动到.prettierignore排除的单独文件中。

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

Answer 4

你可以忽略整个方法

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

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

Answer 5

您可以忽略目前不支持的代码块，您的选择是仅使用// 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 6

禁用 VS 代码中的自动换行符。

打开 vs code => Code => Preferences => Settings => 在搜索字段中输入：Prettier 现在从提供的 Prettier 设置中，选择 Prettier: Print Width

r/vscode - 禁用 VS 代码中的自动换行。 截屏

而不是 80，你可以把它变成一个大数字。 例如：999999 现在您不必担心换行了。

https://www.reddit.com/r/vscode/comments/lkz3d7/to_disable_the_auto_line_break_in_the_vs_code/

Answer 7

对我有用的是使用这个

<!-- prettier-ignore -->
{% extends "main/base.html" %}
{% load humanize static %}
{% block base_content %}
<!-- prettier-ignore-end -->

这适用于 django 和 Vue CDN