testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' into next

Browse Source 
# Conflicts:
#	docs/browser.md
#	package.json
#	yarn.lock
This commit is contained in:
fisker Cheung committed 2022-11-23 19:44:31 +08:00
2 parents 95721da020 9c45de6842
commit 52fbecc89b
31 files changed
+443 -355
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.git-blame-ignore-revs
+2
View File
@@ -5,6 +5,8 @@
# See https://git-scm.com/docs/git-blame#Documentation/git-blame.txt---ignore-revs-fileltfilegt
# Prettier bump after release
# 2.8.0
4049e49fe2a939facd6f46be338a3be9c1c0489e
# 2.7.1
1f9baef429df2516ff8eb835fd8c020b5e854a5f
# 2.7.0
.github/ISSUE_TEMPLATE/formatting.md
+1 -1
View File
@@ -26,7 +26,7 @@ Don't fill the form below manually! Let a program create a report for you:
-->
**Prettier 2.7.1**
**Prettier 2.8.0**
[Playground link](https://prettier.io/playground/#.....)
```sh
.github/ISSUE_TEMPLATE/integration.md
+1 -1
View File
@@ -20,7 +20,7 @@ BEFORE SUBMITTING AN ISSUE:
**Environments:**
- Prettier Version: 2.7.1
- Prettier Version: 2.8.0
- Running Prettier via: <!-- CLI, Node.js API, Browser API, etc. -->
- Runtime: <!-- Node.js v14, Chrome v83, etc. -->
- Operating System: <!-- Windows, Linux, macOS, etc. -->
CHANGELOG.md
+6
View File
@@ -1,3 +1,9 @@
# 2.8.0
[diff](https://github.com/prettier/prettier/compare/2.7.1...2.8.0)
🔗 [Release Notes](https://prettier.io/blog/2022/11/23/2.8.0.html)
# 2.7.1
[diff](https://github.com/prettier/prettier/compare/2.7.0...2.7.1)
changelog_unreleased/angular/13100.md
-19
View File
@@ -1,19 +0,0 @@
#### Insert spaces in pipe (#13100 by @sosukesuzuki)
<!-- prettier-ignore -->
```html
<!-- Input -->
<tui-line-chart
[value]="chart | tuiFilter : filter : range | tuiMapper : toNumbers : range"
></tui-line-chart>
<!-- Prettier stable -->
<tui-line-chart
[value]="chart | tuiFilter: filter:range | tuiMapper: toNumbers:range"
></tui-line-chart>
<!-- Prettier main -->
<tui-line-chart
[value]="chart | tuiFilter : filter : range | tuiMapper : toNumbers : range"
></tui-line-chart>
```
changelog_unreleased/api/10183.md
-3
View File
@@ -1,3 +0,0 @@
#### "Doc Explorer" mode for the Playground (#10183 by @thorn0)
Switch the `parser` option to the special `doc-explorer` value to play with Prettier's intermediate representation and see how it's printed with different options.
changelog_unreleased/api/12362.md
-19
View File
@@ -1,19 +0,0 @@
#### Fix doc printer issue when using `ifBreak` inside `group` (#12362 by @fisker)
<!-- prettier-ignore -->
```jsx
// Input
// |80
for (const number of [123_123_123, 123_123_123, 123_123_123, 123_123_123, 12]) {
}
// Prettier stable
for (const number of [
123_123_123, 123_123_123, 123_123_123, 123_123_123, 12,
]) {
}
// Prettier main
for (const number of [123_123_123, 123_123_123, 123_123_123, 123_123_123, 12]) {
}
```
changelog_unreleased/api/13227.md
-3
View File
@@ -1,3 +0,0 @@
#### "Rethrow embed errors" checkbox on the Playground (#13227 by @thorn0)
Previously, the behavior of the Playground was confusingly inconsistent with the local behavior of Prettier in that it surfaced parsing errors in embedded languages for debug purposes. Now this behavior is controlled by a checkbox and disabled by default.
changelog_unreleased/cli/13016.md
-29
View File
@@ -1,29 +0,0 @@
#### Fix `--cache` set only if with `--write` or `--no-different` (#13016 by @Milly)
Do not save formatted cache if without `--write` option and the file is modifies by prettier.
Before fixed, always save formatted cache if with `--cache` option.
Therefore, unformatted files will never be formatted.
**2.7:**
```
> prettier --cache foo.js
# Show formatted contents of `foo.js`.
# Then the cache is created and `foo.js` is flagged as already formatted.
> prettier --cache --write foo.js
foo.js 2ms (cached)
# "... (cached)" means that the file is already formatted and do nothing this time.
```
**2.8:**
```
> prettier --cache foo.js
# Show formatted contents of `foo.js`.
> prettier --cache --write foo.js
foo.js 2ms
# `foo.js` has
```
changelog_unreleased/cli/13019.md
-9
View File
@@ -1,9 +0,0 @@
#### Add `--cache-location` option (#13019 by @sosukesuzuki)
Path to the cache file location used by `--cache` flag. If you don't explicit `--cache-location`, Prettier saves cache file at `./node_modules/.cache/prettier/.prettier-cache`.
If a file path is passed, that file is used as the cache file.
```bash
prettier --write --cache --cache-location=my_cache_file src
```
changelog_unreleased/cli/13081.md
-3
View File
@@ -1,3 +0,0 @@
#### Infer parser for `.lintstagedrc` (#13081 by @OrRosenblatt)
A `.lintstagedrc` file (without extension) is handled using `json` and `yaml` parsers.
changelog_unreleased/css/13577.md
-32
View File
@@ -1,32 +0,0 @@
#### Fix formatting of long `:is`, `:where`, and `:not` selectors (#13577 by @j-f1)
Pseudo-selectors like `:is`, `:where`, and `:not` that can take multiple selectors as arguments are now formatted like function calls are in other languages. Previously, no special significance was attached to the commas between their “arguments,” leading to confusing wrapping behavior. There are likely still improvements to be made here — please open an issue with some example code if you find something that doesn’t look as expected.
<!-- prettier-ignore -->
```css
/* Input */
:where(
label > input:valid,
label > textarea:not(:empty),
label > button[disabled]
) ~ .errors > .error { display: none; }
/* Prettier stable */
:where(label > input:valid, label > textarea:not(:empty), label
> button[disabled])
~ .errors
> .error {
display: none;
}
/* Prettier main */
:where(
label > input:valid,
label > textarea:not(:empty),
label > button[disabled]
)
~ .errors
> .error {
display: none;
}
```
changelog_unreleased/handlebars/13507.md
-33
View File
@@ -1,33 +0,0 @@
#### Correctly format custom "else if" blocks (#13507 by @jamescdavis)
A template transform can be used to create custom block keywords that behave similar to `if`. This updates printer-glimmer to correctly recognize and format the "else if" case when "if" is a custom keyword.
<!-- prettier-ignore -->
```hbs
{{! Input }}
{{#when isAtWork}}
Ship that code!
{{else when isReading}}
You can finish War and Peace eventually...
{{else}}
Go to bed!
{{/when}}
{{! Prettier stable }}
{{#when isAtWork}}
Ship that code!
{{else}}{{#when isReading}}
You can finish War and Peace eventually...
{{else}}
Go to bed!
{{/when}}{{/when}}
{{! Prettier main }}
{{#when isAtWork}}
Ship that code!
{{else when isReading}}
You can finish War and Peace eventually...
{{else}}
Go to bed!
{{/when}}
```
changelog_unreleased/javascript/13054.md
-28
View File
@@ -1,28 +0,0 @@
#### Fix docblock parsing (#13054 by @fisker)
<!-- prettier-ignore -->
```jsx
// With `--insert-pragma` flag
// Input
/* comment */
foo()
// Prettier stable
/**
* /* comment
*
* @format
*/
foo();
// Prettier main
/**
* comment
*
* @format
*/
foo();
```
changelog_unreleased/javascript/13173.md
-20
View File
@@ -1,20 +0,0 @@
#### Fix range format for function bodies (#13173 by @thorn0)
<!-- prettier-ignore -->
```jsx
// Input
let fn = (() => {
return; //
//^^^^^^^^^^ - range
});
// Prettier stable
let fn = (() => {
return; //
};);
// Prettier main
let fn = (() => {
return; //
});
```
changelog_unreleased/javascript/13274.md
-34
View File
@@ -1,34 +0,0 @@
#### Fix inconsistent formatting for multiline strings (#13274 by @GlebDolzhikov)
<!-- prettier-ignore -->
```jsx
// Input
const loremIpsumFooBazBar1 = 'Multiline string\
Multiline string\
'
const loremIpsumFooBazBar2 = 'Multiline string\
Multiline string\
Multiline string'
// Prettier stable
const loremIpsumFooBazBar1 = "Multiline string\
Multiline string\
";
const loremIpsumFooBazBar2 =
"Multiline string\
Multiline string\
Multiline string";
// Prettier main
const loremIpsumFooBazBar1 =
"Multiline string\
Multiline string\
";
const loremIpsumFooBazBar2 =
"Multiline string\
Multiline string\
Multiline string";
```
changelog_unreleased/markdown/11373.md
-15
View File
@@ -1,15 +0,0 @@
#### Preserve inline code line breaks if `--prose-wrap=preserve` (#11373 by @andersk)
<!-- prettier-ignore -->
```markdown
<!-- Input -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor
incididunt` ut labore et dolore magna aliqua.
<!-- Prettier stable -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor incididunt` ut labore et dolore magna aliqua.
<!-- Prettier main -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor
incididunt` ut labore et dolore magna aliqua.
```
changelog_unreleased/mdx/12208.md
-29
View File
@@ -1,29 +0,0 @@
#### Improve MDX range ignore support (#12208 by @nickrttn)
Adds support for using Markdown [range ignore](https://prettier.io/docs/en/ignore.html#range-ignore) directives in MDX, using JSX comments.
<!-- prettier-ignore -->
```mdx
// Input
{/* prettier-ignore-start */}
export const Hello = () => {
return (<p>
Hello</p>)
}
{/* prettier-ignore-end */}
// Prettier stable (throws an error)
TypeError: Cannot read properties of undefined (reading 'type')
// Prettier main
{/* prettier-ignore-start */}
export const Hello = () => {
return (<p>
Hello</p>)
}
{/* prettier-ignore-end */}
```
changelog_unreleased/scss/13286.md
-13
View File
@@ -1,13 +0,0 @@
#### fix: extra space between '#' and '{' (#13286 by @jspereiramoura)
<!-- prettier-ignore -->
```scss
// Input
padding: var(--spacer#{(1) + 2});
// Prettier stable
padding: var(--spacer# {(1) + 2});
// Prettier main
padding: var(--spacer#{(1) + 2});
```
changelog_unreleased/typescript/13289.md
-13
View File
@@ -1,13 +0,0 @@
#### Fix parens in inferred function return types with `extends` (#13289 by @GlebDolzhikov)
<!-- prettier-ignore -->
```ts
// Input
type Foo<T> = T extends (...a: any[]) => (infer R extends string) ? R : never;
// Prettier stable
type Foo<T> = T extends (...a: any[]) => infer R extends string ? R : never;
// Prettier main
type Foo<T> = T extends ((...a: any[]) => infer R extends string) ? R : never;
```
changelog_unreleased/typescript/13764.md
-12
View File
@@ -1,12 +0,0 @@
#### Support TypeScript 4.9 [`satisfies` operator](https://devblogs.microsoft.com/typescript/announcing-typescript-4-9/#satisfies) (#13764, #13783, #13872 by @sosukesuzuki)
<!-- prettier-ignore -->
```tsx
const palette = {
red: [255, 0, 0],
green: "#00ff00",
blue: [0, 0, 255]
} satisfies Record<Colors, string | RGB>;
```
[Auto-Accessors in Classes](https://devblogs.microsoft.com/typescript/announcing-typescript-4-9/#auto-accessors-in-classes) will be supported in an upcoming 2.8 patch release. We have de-scoped them for now to ship `satisfies` operator sooner.
docs/browser.md
+14 -14
View File
@@ -18,7 +18,7 @@ Required options:
- **[`parser`](options.md#parser) (or [`filepath`](options.md#file-path))**: One of these options has to be specified for Prettier to know which parser to use.
- **`plugins`**: Unlike the `format` function from the [Node.js-based API](api.md#prettierformatsource--options), this function doesn’t load plugins automatically. The `plugins` option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files in <https://unpkg.com/browse/prettier@2.7.1/plugins/>
- **`plugins`**: Unlike the `format` function from the [Node.js-based API](api.md#prettierformatsource--options), this function doesn’t load plugins automatically. The `plugins` option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files in <https://unpkg.com/browse/prettier@2.8.0/plugins/>
You need to load the ones that you’re going to use and pass them to `prettier.format` using the `plugins` option.
@@ -29,8 +29,8 @@ See below for examples.
### Global
```html
<script src="https://unpkg.com/prettier@2.7.1/standalone.js"></script>
<script src="https://unpkg.com/prettier@2.7.1/plugins/graphql.js"></script>
<script src="https://unpkg.com/prettier@2.8.0/standalone.js"></script>
<script src="https://unpkg.com/prettier@2.8.0/plugins/graphql.js"></script>
<script>
(async () => {
const formatted = await prettier.format("type Query { hello: String }", {
@@ -47,8 +47,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
```html
<script type="module">
import * as prettier from "https://unpkg.com/prettier@2.7.1/standalone.mjs";
import pluginGraphql from "https://unpkg.com/prettier@2.7.1/plugins/graphql.mjs";
import * as prettier from "https://unpkg.com/prettier@2.8.0/standalone.mjs";
import pluginGraphql from "https://unpkg.com/prettier@2.8.0/plugins/graphql.mjs";
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
@@ -61,8 +61,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
```js
define([
"https://unpkg.com/prettier@2.7.1/standalone.js",
"https://unpkg.com/prettier@2.7.1/plugins/graphql.js",
"https://unpkg.com/prettier@2.8.0/standalone.js",
"https://unpkg.com/prettier@2.8.0/plugins/graphql.js",
], async (prettier, ...plugins) => {
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
@@ -89,8 +89,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
### Worker
```js
importScripts("https://unpkg.com/prettier@2.7.1/standalone.js");
importScripts("https://unpkg.com/prettier@2.7.1/plugins/graphql.js");
importScripts("https://unpkg.com/prettier@2.8.0/standalone.js");
importScripts("https://unpkg.com/prettier@2.8.0/plugins/graphql.js");
(async () => {
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
@@ -105,8 +105,8 @@ If you want to format [embedded code](options.md#embedded-language-formatting),
```html
<script type="module">
import * as prettier from "https://unpkg.com/prettier@2.7.1/standalone.mjs";
import pluginBabel from "https://unpkg.com/prettier@2.7.1/plugins/babel.mjs";
import * as prettier from "https://unpkg.com/prettier@2.8.0/standalone.mjs";
import pluginBabel from "https://unpkg.com/prettier@2.8.0/plugins/babel.mjs";
console.log(
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -122,9 +122,9 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser
```html
<script type="module">
import * as prettier from "https://unpkg.com/prettier@2.7.1/standalone.mjs";
import pluginBabel from "https://unpkg.com/prettier@2.7.1/plugins/babel.mjs";
import pluginHtml from "https://unpkg.com/prettier@2.7.1/plugins/html.mjs";
import * as prettier from "https://unpkg.com/prettier@2.8.0/standalone.mjs";
import pluginBabel from "https://unpkg.com/prettier@2.8.0/plugins/babel.mjs";
import pluginHtml from "https://unpkg.com/prettier@2.8.0/plugins/html.mjs";
console.log(
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
package.json
+1 -1
View File
@@ -141,7 +141,7 @@
"magic-string": "0.26.7",
"npm-run-all": "4.1.5",
"path-browserify": "1.0.1",
"prettier": "2.7.1",
"prettier": "2.8.0",
"pretty-bytes": "6.0.0",
"rollup-plugin-license": "3.0.1",
"semver": "7.3.8",
website/blog/2022-11-23-2.8.0.md
+364
View File
@@ -0,0 +1,364 @@
---
author: "Sosuke Suzuki (@sosukesuzuki)"
authorURL: "https://github.com/sosukesuzuki"
title: "Prettier 2.8: improve --cache CLI option and TypeScript 4.9 satisfies operator!"
---
This release includes improvements to the `--cache` option added in 2.7. A new `--cache-location` option has been added, and a bug that saved the cache even when `--write` wasn't specified has been fixed.
We're also adding support for TypeScript 4.9 `satisfies` operator!
If you enjoy Prettier and would like to support our work, consider sponsoring us directly via [our OpenCollective](https://opencollective.com/prettier) or by sponsoring the projects we depend on, including [typescript-eslint](https://opencollective.com/typescript-eslint), [remark](https://opencollective.com/unified), and [Babel](https://opencollective.com/babel).
The Prettier team plans to release 3.0 within the next few months. If you are a plugin developer, get ready for the migration. Visit [the migration guide](https://github.com/prettier/prettier/wiki/How-to-migrate-my-plugin-to-support-Prettier-v3%3F) and issue [#13606](https://github.com/prettier/prettier/issues/13616) for more information.
<!--truncate-->
## Highlights
### TypeScript
#### Support TypeScript 4.9 [`satisfies` operator](https://devblogs.microsoft.com/typescript/announcing-typescript-4-9/#satisfies) ([#13764](https://github.com/prettier/prettier/pull/13764), [#13783](https://github.com/prettier/prettier/pull/13783), [#13872](https://github.com/prettier/prettier/pull/13872) by [@sosukesuzuki](https://github.com/sosukesuzuki))
<!-- prettier-ignore -->
```tsx
const palette = {
red: [255, 0, 0],
green: "#00ff00",
blue: [0, 0, 255]
} satisfies Record<Colors, string | RGB>;
```
[Auto-Accessors in Classes](https://devblogs.microsoft.com/typescript/announcing-typescript-4-9/#auto-accessors-in-classes) will be supported in an upcoming 2.8 patch release. We have de-scoped them for now to ship `satisfies` operator sooner.
### CLI
#### Do not save the cache if the `--write` option wasn't specified ([#13016](https://github.com/prettier/prettier/pull/13016) by [@Milly](https://github.com/Milly))
<!-- prettier-ignore -->
```bash
# Prettier 2.7
$ prettier --cache foo.js
# This shows formatted contents of `foo.js`.
# Then cache is created and `foo.js` is flagged as already formatted.
$ prettier --cache --write foo.js
foo.js 2ms (cached)
# "... (cached)" means the file is already formatted, so nothing is done this time.
# Prettier 2.8
$ prettier --cache foo.js
# Show formatted contents of `foo.js`.
$ prettier --cache --write foo.js
foo.js 2ms
# `foo.js` is formatted now.
```
#### Add `--cache-location` option ([#13019](https://github.com/prettier/prettier/pull/13019) by [@sosukesuzuki](https://github.com/sosukesuzuki))
By default, Prettier CLI saves the cache file for the `--cache` option at `./node_modules/.cache/prettier/.prettier-cache`. This can be overridden now:
```bash
prettier --write --cache --cache-location=my_cache_file src
```
## Other Changes
### JavaScript
#### Fix docblock parsing ([#13054](https://github.com/prettier/prettier/pull/13054) by [@fisker](https://github.com/fisker))
<!-- prettier-ignore -->
```jsx
// With `--insert-pragma` flag
// Input
/* comment */
foo()
// Prettier 2.7
/**
* /* comment
*
* @format
*/
foo();
// Prettier 2.8
/**
* comment
*
* @format
*/
foo();
```
#### Fix range format for function bodies ([#13173](https://github.com/prettier/prettier/pull/13173) by [@thorn0](https://github.com/thorn0))
<!-- prettier-ignore -->
```jsx
// Input
let fn = (() => {
return; //
//^^^^^^^^^^ - range
});
// Prettier 2.7
let fn = (() => {
return; //
};);
// Prettier 2.8
let fn = (() => {
return; //
});
```
#### Fix inconsistent formatting for multiline strings ([#13274](https://github.com/prettier/prettier/pull/13274) by [@GlebDolzhikov](https://github.com/GlebDolzhikov))
<!-- prettier-ignore -->
```jsx
// Input
const loremIpsumFooBazBar1 = 'Multiline string\
Multiline string\
'
const loremIpsumFooBazBar2 = 'Multiline string\
Multiline string\
Multiline string'
// Prettier 2.7
const loremIpsumFooBazBar1 = "Multiline string\
Multiline string\
";
const loremIpsumFooBazBar2 =
"Multiline string\
Multiline string\
Multiline string";
// Prettier 2.8
const loremIpsumFooBazBar1 =
"Multiline string\
Multiline string\
";
const loremIpsumFooBazBar2 =
"Multiline string\
Multiline string\
Multiline string";
```
### TypeScript
#### Fix parens in inferred function return types with `extends` ([#13289](https://github.com/prettier/prettier/pull/13289) by [@GlebDolzhikov](https://github.com/GlebDolzhikov))
<!-- prettier-ignore -->
```ts
// Input
type Foo<T> = T extends (...a: any[]) => (infer R extends string) ? R : never;
// Prettier 2.7
type Foo<T> = T extends (...a: any[]) => infer R extends string ? R : never;
// Prettier 2.8
type Foo<T> = T extends ((...a: any[]) => infer R extends string) ? R : never;
```
### CSS
#### Fix formatting of long `:is`, `:where`, and `:not` selectors ([#13577](https://github.com/prettier/prettier/pull/13577) by [@j-f1](https://github.com/j-f1))
Pseudo-selectors like `:is`, `:where`, and `:not` that can take multiple selectors as arguments are now formatted like function calls are in other languages. Previously, no special significance was attached to the commas between their “arguments,” leading to confusing wrapping behavior. There are likely still improvements to be made here — please open an issue with some example code if you find something that doesn’t look as expected.
<!-- prettier-ignore -->
```css
/* Input */
:where(
label > input:valid,
label > textarea:not(:empty),
label > button[disabled]
) ~ .errors > .error { display: none; }
/* Prettier 2.7 */
:where(label > input:valid, label > textarea:not(:empty), label
> button[disabled])
~ .errors
> .error {
display: none;
}
/* Prettier 2.8 */
:where(
label > input:valid,
label > textarea:not(:empty),
label > button[disabled]
)
~ .errors
> .error {
display: none;
}
```
### SCSS
#### Fix: extra space between '#' and '{' ([#13286](https://github.com/prettier/prettier/pull/13286) by [@jspereiramoura](https://github.com/jspereiramoura))
<!-- prettier-ignore -->
```scss
// Input
padding: var(--spacer#{(1) + 2});
// Prettier 2.7
padding: var(--spacer# {(1) + 2});
// Prettier 2.8
padding: var(--spacer#{(1) + 2});
```
### Angular
#### Insert spaces in pipe ([#13100](https://github.com/prettier/prettier/pull/13100) by [@sosukesuzuki](https://github.com/sosukesuzuki))
<!-- prettier-ignore -->
```html
<!-- Input -->
<tui-line-chart
[value]="chart | tuiFilter : filter : range | tuiMapper : toNumbers : range"
></tui-line-chart>
<!-- Prettier 2.7 -->
<tui-line-chart
[value]="chart | tuiFilter: filter:range | tuiMapper: toNumbers:range"
></tui-line-chart>
<!-- Prettier 2.8 -->
<tui-line-chart
[value]="chart | tuiFilter : filter : range | tuiMapper : toNumbers : range"
></tui-line-chart>
```
### Ember / Handlebars
#### Correctly format custom "else if" blocks ([#13507](https://github.com/prettier/prettier/pull/13507) by [@jamescdavis](https://github.com/jamescdavis))
A template transform can be used to create custom block keywords that behave similar to `if`. This updates printer-glimmer to correctly recognize and format the "else if" case when "if" is a custom keyword.
<!-- prettier-ignore -->
```hbs
{{! Input }}
{{#when isAtWork}}
Ship that code!
{{else when isReading}}
You can finish War and Peace eventually...
{{else}}
Go to bed!
{{/when}}
{{! Prettier 2.7 }}
{{#when isAtWork}}
Ship that code!
{{else}}{{#when isReading}}
You can finish War and Peace eventually...
{{else}}
Go to bed!
{{/when}}{{/when}}
{{! Prettier 2.8 }}
{{#when isAtWork}}
Ship that code!
{{else when isReading}}
You can finish War and Peace eventually...
{{else}}
Go to bed!
{{/when}}
```
### Markdown
#### Preserve inline code line breaks if `--prose-wrap=preserve` ([#11373](https://github.com/prettier/prettier/pull/11373) by [@andersk](https://github.com/andersk))
<!-- prettier-ignore -->
```markdown
<!-- Input -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor
incididunt` ut labore et dolore magna aliqua.
<!-- Prettier 2.7 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor incididunt` ut labore et dolore magna aliqua.
<!-- Prettier 2.8 -->
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod `tempor
incididunt` ut labore et dolore magna aliqua.
```
### MDX
#### Improve MDX range ignore support ([#12208](https://github.com/prettier/prettier/pull/12208) by [@nickrttn](https://github.com/nickrttn))
Adds support for using Markdown [range ignore](https://prettier.io/docs/en/ignore.html#range-ignore) directives in MDX, using JSX comments.
<!-- prettier-ignore -->
```mdx
// Input
{/* prettier-ignore-start */}
export const Hello = () => {
return (<p>
Hello</p>)
}
{/* prettier-ignore-end */}
// Prettier 2.7 (throws an error)
TypeError: Cannot read properties of undefined (reading 'type')
// Prettier 2.8
{/* prettier-ignore-start */}
export const Hello = () => {
return (<p>
Hello</p>)
}
{/* prettier-ignore-end */}
```
### API
#### "Doc Explorer" mode for the Playground ([#10183](https://github.com/prettier/prettier/pull/10183) by [@thorn0](https://github.com/thorn0))
Switch the `parser` option to the special `doc-explorer` value to play with Prettier's intermediate representation and see how it's printed with different options.
#### Fix doc printer issue when using `ifBreak` inside `group` ([#12362](https://github.com/prettier/prettier/pull/12362) by [@fisker](https://github.com/fisker))
<!-- prettier-ignore -->
```jsx
// Input
// |80
for (const number of [123_123_123, 123_123_123, 123_123_123, 123_123_123, 12]) {
}
// Prettier 2.7
for (const number of [
123_123_123, 123_123_123, 123_123_123, 123_123_123, 12,
]) {
}
// Prettier 2.8
for (const number of [123_123_123, 123_123_123, 123_123_123, 123_123_123, 12]) {
}
```
#### "Rethrow embed errors" checkbox on the Playground ([#13227](https://github.com/prettier/prettier/pull/13227) by [@thorn0](https://github.com/thorn0))
Previously, the behavior of the Playground was confusingly inconsistent with the local behavior of Prettier in that it surfaced parsing errors in embedded languages for debug purposes. Now this behavior is controlled by a checkbox and disabled by default.
### CLI
#### Infer parser for `.lintstagedrc` ([#13081](https://github.com/prettier/prettier/pull/13081) by [@OrRosenblatt](https://github.com/OrRosenblatt))
A `.lintstagedrc` file (without extension) is handled using `json` and `yaml` parsers.
website/pages/en/index.js
+2 -2
View File
@@ -321,7 +321,7 @@ const UsersSection = ({ language }) => {
<div style={{ marginLeft: ".7em", width: "260px" }}>
<p>
More than{" "}
<strong data-placeholder="dependent-github">4.3 million</strong>{" "}
<strong data-placeholder="dependent-github">5 million</strong>{" "}
dependent repositories on GitHub
</p>
<Button href="https://github.com/prettier/prettier/network/dependents">
@@ -337,7 +337,7 @@ const UsersSection = ({ language }) => {
<div style={{ marginLeft: ".7em", width: "260px" }}>
<p>
More than{" "}
<strong data-placeholder="dependent-npm">11.3k</strong>{" "}
<strong data-placeholder="dependent-npm">12.7k</strong>{" "}
dependent packages on npm
</p>
<Button href="https://www.npmjs.com/browse/depended/prettier">
website/versioned_docs/version-stable/browser.md
+15 -15
View File
@@ -21,8 +21,8 @@ Required options:
- **`plugins`**: Unlike the `format` function from the [Node.js-based API](api.md#prettierformatsource--options), this function doesn’t load plugins automatically. The `plugins` option is required because all the parsers included in the Prettier package come as plugins (for reasons of file size). These plugins are files named
- `parser-*.js` in <https://unpkg.com/browse/prettier@2.7.1/> and
- `parser-*.mjs` in <https://unpkg.com/browse/prettier@2.7.1/esm/>
- `parser-*.js` in <https://unpkg.com/browse/prettier@2.8.0/> and
- `parser-*.mjs` in <https://unpkg.com/browse/prettier@2.8.0/esm/>
You need to load the ones that you’re going to use and pass them to `prettier.format` using the `plugins` option.
@@ -33,8 +33,8 @@ See below for examples.
### Global
```html
<script src="https://unpkg.com/prettier@2.7.1/standalone.js"></script>
<script src="https://unpkg.com/prettier@2.7.1/parser-graphql.js"></script>
<script src="https://unpkg.com/prettier@2.8.0/standalone.js"></script>
<script src="https://unpkg.com/prettier@2.8.0/parser-graphql.js"></script>
<script>
prettier.format("type Query { hello: String }", {
parser: "graphql",
@@ -49,8 +49,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
```html
<script type="module">
import prettier from "https://unpkg.com/prettier@2.7.1/esm/standalone.mjs";
import parserGraphql from "https://unpkg.com/prettier@2.7.1/esm/parser-graphql.mjs";
import prettier from "https://unpkg.com/prettier@2.8.0/esm/standalone.mjs";
import parserGraphql from "https://unpkg.com/prettier@2.8.0/esm/parser-graphql.mjs";
prettier.format("type Query { hello: String }", {
parser: "graphql",
@@ -63,8 +63,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
```js
define([
"https://unpkg.com/prettier@2.7.1/standalone.js",
"https://unpkg.com/prettier@2.7.1/parser-graphql.js",
"https://unpkg.com/prettier@2.8.0/standalone.js",
"https://unpkg.com/prettier@2.8.0/parser-graphql.js",
], (prettier, ...plugins) => {
prettier.format("type Query { hello: String }", {
parser: "graphql",
@@ -89,8 +89,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
### Worker
```js
importScripts("https://unpkg.com/prettier@2.7.1/standalone.js");
importScripts("https://unpkg.com/prettier@2.7.1/parser-graphql.js");
importScripts("https://unpkg.com/prettier@2.8.0/standalone.js");
importScripts("https://unpkg.com/prettier@2.8.0/parser-graphql.js");
prettier.format("type Query { hello: String }", {
parser: "graphql",
plugins: prettierPlugins,
@@ -103,8 +103,8 @@ If you want to format [embedded code](options.md#embedded-language-formatting),
```html
<script type="module">
import prettier from "https://unpkg.com/prettier@2.7.1/esm/standalone.mjs";
import parserBabel from "https://unpkg.com/prettier@2.7.1/esm/parser-babel.mjs";
import prettier from "https://unpkg.com/prettier@2.8.0/esm/standalone.mjs";
import parserBabel from "https://unpkg.com/prettier@2.8.0/esm/parser-babel.mjs";
console.log(
prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -120,9 +120,9 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser
```html
<script type="module">
import prettier from "https://unpkg.com/prettier@2.7.1/esm/standalone.mjs";
import parserBabel from "https://unpkg.com/prettier@2.7.1/esm/parser-babel.mjs";
import parserHtml from "https://unpkg.com/prettier@2.7.1/esm/parser-html.mjs";
import prettier from "https://unpkg.com/prettier@2.8.0/esm/standalone.mjs";
import parserBabel from "https://unpkg.com/prettier@2.8.0/esm/parser-babel.mjs";
import parserHtml from "https://unpkg.com/prettier@2.8.0/esm/parser-html.mjs";
console.log(
prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
website/versioned_docs/version-stable/cli.md
+10
View File
@@ -226,6 +226,16 @@ Also, since the cache file is stored in `./node_modules/.cache/prettier/.prettie
> Plugins version and implementation are not used as cache keys. We recommend that you delete the cache when updating plugins.
## `--cache-location`
Path to the cache file location used by `--cache` flag. If you don't explicit `--cache-location`, Prettier saves cache file at `./node_modules/.cache/prettier/.prettier-cache`.
If a file path is passed, that file is used as the cache file.
```bash
prettier --write --cache --cache-location=my_cache_file src
```
## `--cache-strategy`
Strategy for the cache to use for detecting changed files. Can be either `metadata` or `content`.
website/versioned_docs/version-stable/install.md
+2 -4
View File
@@ -104,7 +104,7 @@ For example, you can do the following to have Prettier run before each commit:
```bash
npm install --save-dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged"
```
@@ -113,7 +113,7 @@ For example, you can do the following to have Prettier run before each commit:
```bash
yarn add --dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged"
```
@@ -121,8 +121,6 @@ For example, you can do the following to have Prettier run before each commit:
<!--END_DOCUSAURUS_CODE_TABS-->
> Note: npm **set-script** command requires at least **npm v7.x**. See https://docs.npmjs.com/cli/v7/commands/npm-set-script.
2. Add the following to your `package.json`:
```json
website/versioned_docs/version-stable/integrating-with-linters.md
+1 -1
View File
@@ -30,7 +30,7 @@ The downsides of those plugins are:
- They are slower than running Prettier directly.
- They’re yet one layer of indirection where things may break.
Finally, we have tools that run `prettier` and then immediately for example `eslint --fix` on files.
Finally, we have tools that run `prettier` and then immediately lint files by running, for example, `eslint --fix` on them.
- [prettier-eslint](https://github.com/prettier/prettier-eslint)
- [prettier-stylelint](https://github.com/hugomrdias/prettier-stylelint)
website/versioned_docs/version-stable/plugins.md
+22 -2
View File
@@ -59,6 +59,7 @@ To turn off plugin autoloading, use `--no-plugin-search` when using Prettier CLI
## Community Plugins
- [`prettier-plugin-apex`](https://github.com/dangmai/prettier-plugin-apex) by [**@dangmai**](https://github.com/dangmai)
- [`prettier-plugin-astro`](https://github.com/withastro/prettier-plugin-astro) by [**@withastro contributors**](https://github.com/withastro/prettier-plugin-astro/graphs/contributors)
- [`prettier-plugin-elm`](https://github.com/gicentre/prettier-plugin-elm) by [**@giCentre**](https://github.com/gicentre)
- [`prettier-plugin-erb`](https://github.com/adamzapasnik/prettier-plugin-erb) by [**@adamzapasnik**](https://github.com/adamzapasnik)
- [`prettier-plugin-glsl`](https://github.com/NaridaL/glsl-language-toolkit/tree/main/packages/prettier-plugin-glsl) by [**@NaridaL**](https://github.com/NaridaL)
@@ -66,9 +67,12 @@ To turn off plugin autoloading, use `--no-plugin-search` when using Prettier CLI
- [`prettier-plugin-java`](https://github.com/jhipster/prettier-java) by [**@JHipster**](https://github.com/jhipster)
- [`prettier-plugin-jsonata`](https://github.com/Stedi/prettier-plugin-jsonata) by [**@Stedi**](https://github.com/Stedi)
- [`prettier-plugin-kotlin`](https://github.com/Angry-Potato/prettier-plugin-kotlin) by [**@Angry-Potato**](https://github.com/Angry-Potato)
- [`prettier-plugin-motoko`](https://github.com/dfinity/prettier-plugin-motoko) by [**@dfinity**](https://github.com/dfinity)
- [`prettier-plugin-nginx`](https://github.com/joedeandev/prettier-plugin-nginx) by [**@joedeandev**](https://github.com/joedeandev)
- [`prettier-plugin-prisma`](https://github.com/umidbekk/prettier-plugin-prisma) by [**@umidbekk**](https://github.com/umidbekk)
- [`prettier-plugin-properties`](https://github.com/eemeli/prettier-plugin-properties) by [**@eemeli**](https://github.com/eemeli)
- [`prettier-plugin-rust`](https://github.com/jinxdash/prettier-plugin-rust) by [**@jinxdash**](https://github.com/jinxdash)
- [`prettier-plugin-sh`](https://github.com/rx-ts/prettier/tree/master/packages/sh) by [**@JounQin**](https://github.com/JounQin)
- [`prettier-plugin-sh`](https://github.com/un-ts/prettier/tree/master/packages/sh) by [**@JounQin**](https://github.com/JounQin)
- [`prettier-plugin-sql`](https://github.com/un-ts/prettier/tree/master/packages/sql) by [**@JounQin**](https://github.com/JounQin)
- [`prettier-plugin-solidity`](https://github.com/prettier-solidity/prettier-plugin-solidity) by [**@mattiaerre**](https://github.com/mattiaerre)
- [`prettier-plugin-svelte`](https://github.com/UnwrittenFun/prettier-plugin-svelte) by [**@UnwrittenFun**](https://github.com/UnwrittenFun)
- [`prettier-plugin-toml`](https://github.com/bd82/toml-tools/tree/master/packages/prettier-plugin-toml) by [**@bd82**](https://github.com/bd82)
@@ -161,6 +165,7 @@ export const printers = {
canAttachComment,
isBlockComment,
printComment,
getCommentChildNodes,
handleComments: {
ownLine,
endOfLine,
@@ -295,6 +300,21 @@ Comments are often not part of a language's AST and present a challenge for pret
By default, if the AST has a top-level `comments` property, Prettier assumes that `comments` stores an array of comment nodes. Prettier will then use the provided `parsers[<plugin>].locStart`/`locEnd` functions to search for the AST node that each comment "belongs" to. Comments are then attached to these nodes **mutating the AST in the process**, and the `comments` property is deleted from the AST root. The `*Comment` functions are used to adjust Prettier's algorithm. Once the comments are attached to the AST, Prettier will automatically call the `printComment(path, options): Doc` function and insert the returned doc into the (hopefully) correct place.
#### (optional) `getCommentChildNodes`
By default, Prettier searches all object properties (except for a few predefined ones) of each node recursively. This function can be provided to override that behavior. It has the signature:
```ts
function getCommentChildNodes(
// The node whose children should be returned.
node: AST,
// Current options
options: object
): AST[] | undefined;
```
Return `[]` if the node has no children or `undefined` to fall back on the default behavior.
#### (optional) `printComment`
Called whenever a comment node needs to be printed. It has the signature:
website/versioned_docs/version-stable/technical-details.md
+2
View File
@@ -10,4 +10,6 @@ The basic idea is that the printer takes an AST and returns an intermediate repr
This means that most of the logic of printing an AST involves generating an abstract representation of the output involving certain commands. For example, `["(", line, arg, line, ")"]` would represent a concatenation of opening parens, an argument, and closing parens. But if that doesn’t fit on one line, the printer can break where `line` is specified.
The [Playground](https://prettier.io/playground) has a special mode for exploring how Prettier’s intermediate representation is printed. To get there, open the sidebar (the "Show options" button) and set the `parser` option to the special value `doc-explorer`.
More (rough) details can be found in [commands.md](https://github.com/prettier/prettier/blob/main/commands.md).