This release includes a new --cache CLI option. Enabling this option will use some attributes as cache keys and format files only if they have changed. This could dramatically improve CLI performance.
We've also added support formatting for TypeScript 4.7 syntax!
If you enjoy Prettier and would like to support our work, consider sponsoring us directly via our OpenCollective or by sponsoring the projects we depend on, including typescript-eslint, remark, and Babel.
Support TypeScript 4.7 new features!
interface Box<T> {
value: T;
}
function makeBox<T>(value: T) {
return { value };
}
const makeHammerBox = makeBox<Hammer>;
const makeWrenchBox = makeBox<Wrench>;
interface Animal {
animalStuff: any;
}
interface Dog extends Animal {
dogStuff: any;
}
type Getter<out T> = () => T;
type Setter<in T> = (value: T) => void;
extends constraints for infertype FirstString<T> = T extends [infer S extends string, ...unknown[]]
? S
: never;
--cache and --cache-strategy CLI options (#12800 by @sosukesuzuki)Two new CLI options have been added for a caching system similar to ESLint's one.
Please see the doc for more details.
--cacheIf this option is enabled, the following values are used as cache keys and the file is formatted only if one of them is changed.
--cache-strategy is content) content of the file--cache-strategy is metadata) file metadata, such as timestampsprettier --write --cache src
--cache-strategyStrategy for the cache to use for detecting changed files. Can be either metadata or content. If no strategy is specified, content will be used.
prettier --write --cache --cache-strategy metadata src
// Input
export {
// a
foo1,
// b
bar1,
baz1,
} from "mod";
// Prettier 2.6
export {
// a
foo1,
// b
bar1,
baz1,
} from "mod";
// Prettier 2.7
export {
// a
foo1,
// b
bar1,
baz1,
} from "mod";
Supports test calls like Playwright test.describe.
// Input
test.step("does something really long and complicated so I have to write a very long name for the test", () => {});
test.describe("does something really long and complicated so I have to write a very long name for the test", () => {});
test.describe.only("does something really long and complicated so I have to write a very long name for the test", () => {});
test.describe.parallel("does something really long and complicated so I have to write a very long name for the test", () => {});
test.describe.parallel.only("does something really long and complicated so I have to write a very long name for the testThis is a very", () => {});
test.describe.serial("does something really long and complicated so I have to write a very long name for the test", () => {});
test.describe.serial.only("does something really long and complicated so I have to write a very long name for the test", () => {});
// Prettier 2.6
test.step(
"does something really long and complicated so I have to write a very long name for the test",
() => {}
);
test.describe(
"does something really long and complicated so I have to write a very long name for the test",
() => {}
);
test.describe.only(
"does something really long and complicated so I have to write a very long name for the test",
() => {}
);
test.describe.parallel(
"does something really long and complicated so I have to write a very long name for the test",
() => {}
);
test.describe.parallel.only(
"does something really long and complicated so I have to write a very long name for the testThis is a very",
() => {}
);
test.describe.serial(
"does something really long and complicated so I have to write a very long name for the test",
() => {}
);
test.describe.serial.only(
"does something really long and complicated so I have to write a very long name for the test",
() => {}
);
// Prettier 2.7
test.step("does something really long and complicated so I have to write a very long name for the test", () => {});
test.describe("does something really long and complicated so I have to write a very long name for the test", () => {});
test.describe
.only("does something really long and complicated so I have to write a very long name for the test", () => {});
test.describe
.parallel("does something really long and complicated so I have to write a very long name for the test", () => {});
test.describe.parallel
.only("does something really long and complicated so I have to write a very long name for the testThis is a very", () => {});
test.describe
.serial("does something really long and complicated so I have to write a very long name for the test", () => {});
test.describe.serial
.only("does something really long and complicated so I have to write a very long name for the test", () => {});
This change fixes the comment format in exports to align with the comment format in import.
Although this change does not affect the comments format in import, follows change log contains examples of comments in import for reference.
// Input
export {
foo,
bar as // comment
baz,
}
import {
foo,
bar as // comment
baz,
} from 'foo'
// Prettier 2.6
export {
foo,
bar as baz, // comment
};
import {
foo,
// comment
bar as baz,
} from "foo";
// Prettier 2.7
export {
foo,
// comment
bar as baz,
};
import {
foo,
// comment
bar as baz,
} from "foo";
as instead of : for babel-ts parser (#12706 by @HosokawaR)// Input
[x as any] = x;
// Prettier 2.6
[x: any] = x;
// Prettier 2.7
[x as any] = x;
// Input
enum A {
[i++],
}
// Prettier 2.6
enum A {
i++,
}
// Prettier 2.7
enum A {
[i++],
}
// Input
const object = ({ methodName() });
// Prettier 2.6
const object = { methodName(); };
// Prettier 2.7
SyntaxError: Unexpected token. (1:29)
> 1 | const object = ({ methodName() });
| ^^
Please read https://web.dev/speculative-prerendering/ for more information about the Speculation Rules API.
<!-- Input -->
<script type="speculationrules">
{
"prerender": [
{"source": "list", "urls": ["https://a.test/foo"]}
]
}
</script>
<!-- Prettier 2.6 -->
<script type="speculationrules">
{
"prerender": [
{"source": "list", "urls": ["https://a.test/foo"]}
]
}
</script>
<!-- Prettier 2.7 -->
<script type="speculationrules">
{
"prerender": [{ "source": "list", "urls": ["https://a.test/foo"] }]
}
</script>
<!-- input -->
<script setup lang="ts">
let x: string | number = 1
</script>
<template>
{{ (x as number).toFixed(2) }}
</template>
<!-- Prettier 2.6 -->
<script setup lang="ts">
let x: string | number = 1
</script>
<template>
{{ (x as number).toFixed(2) }}
</template>
<!-- Prettier 2.7 -->
<script setup lang="ts">
let x: string | number = 1;
</script>
<template>
{{ (x as number).toFixed(2) }}
</template>
<style lang="stylus"> blocks in Vue SFCs can be processed by the appropriate plugin if any.
<!-- Input (singleAttributePerLine: true) -->
<script lang="ts" setup>
</script>
<!-- Prettier 2.6 -->
<script
lang="ts"
setup
>
</script>
<!-- Prettier 2.7 -->
<script lang="ts" setup>
</script>
<!-- Input -->
<ng-container *ngTemplateOutlet="someTmpl; context: { app }"></ng-container>
<!-- Prettier 2.6 -->
<ng-container
*ngTemplateOutlet="someTmpl; context: { app: this.app }"
></ng-container>
<!-- Prettier 2.7 -->
<ng-container *ngTemplateOutlet="someTmpl; context: { app }"></ng-container>
# Input
extend schema { subscription: Subscription }
extend schema @directive
# Prettier 2.6
N/A - throws error
# Prettier 2.7
extend schema {
subscription: Subscription
}
extend schema @directive
# Input
""" Customer """
type Person {
name: String
}
""""""
type Person {
name: String
}
# Prettier 2.6.2
"""
Customer
"""
type Person {
name: String
}
"""
"""
type Person {
name: String
}
# Prettier 2.6.2 (second format)
"""
Customer
"""
type Person {
name: String
}
"""
"""
type Person {
name: String
}
# Prettier 2.7
"""
Customer
"""
type Person {
name: String
}
"""
"""
type Person {
name: String
}
# Prettier 2.6
$ prettier src --check
Checking formatting...
[warn] src/fileA.js
[warn] Code style issues found in the above file(s). Forgot to run Prettier?
# Prettier 2.7
$ prettier src --check
Checking formatting...
[warn] src/fileA.js
[warn] src/fileB.js
[warn] Code style issues found in 2 files. Forgot to run Prettier?
$ prettier src --check
Checking formatting...
[warn] src/fileA.js
[warn] Code style issues found in the above file. Forgot to run Prettier?
.importmap files (#12603 by @fisker)Format .importmap files as JSON files.
When --debug-benchmark or --debug-repeat is passed:
debug automatically此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。