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