Clean changelog_unreleased

This commit is contained in:
Sosuke Suzuki committed 2022-03-16 13:35:41 +09:00
1 parent eb671dd983
commit 58e48b79da
33 files changed
-762

No files matched your search

-31
View File
@@ -1,31 +0,0 @@
---
author: "Sosuke Suzuki (@sosukesuzuki)"
authorURL: "https://github.com/sosukesuzuki"
title: "Prettier 2.6: new singleAttributePerLine option and new JavaScript features!"
---
This release includes a new `singleAttributePerLine` option. This is an option to print only one attribute per line in Vue SFC templates, HTML, and JSX. Per our [Option Philosophy](https://prettier.io/docs/en/option-philosophy.html), we would prefer not to add such an option. However, there are many users who want this feature, and major style guides like [Airbnb’s JavaScript Style Guide](https://github.com/airbnb/javascript/blob/274c8d570155a05b016980294d4204c5711bce86/packages/eslint-config-airbnb/rules/react.js#L97-L99) and [Vue’s style guide](https://vuejs.org/style-guide/rules-strongly-recommended.html#multi-attribute-elements) recommend the single attribute per line style. A [PR](https://github.com/prettier/prettier/pull/6644) to add this feature was opened in October 2019, and both it and the [corresponding issue](https://github.com/prettier/prettier/issues/5501) have received a significant amount of support from users. For us it was a hard decision to add this option. We hope the addition of this option will benefit many users without significantly harming our principles.
We've also added support formatting for some new JavaScript syntax proposals via Babel.
<!--truncate-->
## Thanks to our sponsors!
As discussed in [a blog post from earlier this year](https://prettier.io/blog/2022/01/06/prettier-begins-paying-maintainers.html), we have begun paying our maintainers from funds received from our sponsors. We would like to thank our many sponsors who have made this possible! We’re especially grateful to the following companies and individuals, who have donated over $1,000 to us:
- [Frontend Masters](https://frontendmasters.com/)
- [Salesforce](https://www.salesforce.com/)
- [Indeed](https://indeed.com/)
- [Sentry](https://sentry.io/welcome/)
- [Airbnb](https://www.airbnb.com/)
- [LINE](https://engineering.linecorp.com/en/)
- [AMP Project](https://www.ampproject.org/)
- [InVision AG](https://www.ivx.com/)
- [Ubie](https://ubiehealth.com/)
- [Shogun Labs, Inc](https://getshogun.com/)
- [Underbelly](https://www.underbelly.is/)
- [Principal Financial Group](https://www.principal.com/about-us)
- [Suhail Doshi](https://twitter.com/suhail)
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).
-12
View File
@@ -1,12 +0,0 @@
#### Add `--no-plugin-search` option to turn off plugin autoloading (#10274 by @fisker)
To turn off plugin autoloading, use `--no-plugin-search` when using Prettier CLI or add `{ pluginSearchDirs: false }` to options in `prettier.format()` or to the config file.
<!-- prettier-ignore -->
```cli
// Prettier stable
$ prettier . --plugin-search-dir=a-dir-without-plugins
// Prettier main
$ prettier . --no-plugin-search
```
-3
View File
@@ -1,3 +0,0 @@
#### Infer parser for `.swcrc` (#12320 by @sosukesuzuki)
A [`.swcrc`](https://swc.rs/docs/configuration/swcrc) is handled using `json` parser.
-32
View File
@@ -1,32 +0,0 @@
#### Preserve blank lines in SCSS maps (#12210 by @duailibe)
This change also applies to some PostCSS features with similar syntax.
<!-- prettier-ignore -->
```css
/* Input */
$colours: (
"text": $light-100,
"background-primary": $dark-300,
"background-secondary": $dark-200,
"background-tertiary": $dark-100
);
/* Prettier stable */
$colours: (
"text": $light-100,
"background-primary": $dark-300,
"background-secondary": $dark-200,
"background-tertiary": $dark-100
);
/* Prettier main */
$colours: (
"text": $light-100,
"background-primary": $dark-300,
"background-secondary": $dark-200,
"background-tertiary": $dark-100
);
```
-27
View File
@@ -1,27 +0,0 @@
#### Fix lowercasing postcss values (#12393 by @niklasvatn)
PostCSS values can start with digits. Prettier interprets this as a number followed by a unit in the example below.
<!-- prettier-ignore -->
```css
// Input
@value 4XLarge 28/36px;
.test {
font: 4XLarge Helvetica;
}
// Prettier stable
@value 4XLarge 28/36px;
.test {
font: 4xlarge Helvetica;
}
// Prettier main
@value 4XLarge 28/36px;
.test {
font: 4XLarge Helvetica;
}
```
-19
View File
@@ -1,19 +0,0 @@
#### Fix Flow's class declaration's `static` indexer formatting (#12009 by @gkz)
<!-- prettier-ignore -->
```jsx
// Input
declare class A {
static [string]: boolean;
}
// Prettier stable
declare class A {
[string]: boolean;
}
// Prettier main
declare class A {
static [string]: boolean;
}
```
-24
View File
@@ -1,24 +0,0 @@
#### Print descriptions on graphql schema definition nodes (#11901 by @trevor-scheer)
<!-- prettier-ignore -->
```graphql
# Input
"""SchemaDefinition description is lost"""
schema {
query: Query
}
# Prettier stable
schema {
query: Query
}
# Prettier main
"""
SchemaDefinition description is lost
"""
schema {
query: Query
}
```
-21
View File
@@ -1,21 +0,0 @@
#### Correctly identify which backslashes are removed by glimmer (#12302 by @MattTheNub)
This caused Prettier to unnecessarily add backslashes every time a file was formatted.
<!-- prettier-ignore -->
```hbs
{{! Input }}
<p>\</p>
<p>\\</p>
<p>\\\</p>
{{! Prettier stable }}
<p>\\</p>
<p>\\\</p>
<p>\\\\</p>
{{! Prettier main }}
<p>\</p>
<p>\\</p>
<p>\\\</p>
```
-42
View File
@@ -1,42 +0,0 @@
#### [HIGHLIGHT]Enforce Single Attribute Per Line (#6644 by @kankje)
Added the `singleAttributePerLine` option for specifying if Prettier should enforce single attribute per line in HTML, Vue and JSX.
<!-- prettier-ignore -->
```html
<!-- Input -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- Prettier stable -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- Prettier main, with `{"singleAttributePerLine": false}` -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div data-a="1" data-b="2" data-c="3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<!-- Prettier main, with `{"singleAttributePerLine": true}` -->
<div data-a="1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<div
data-a="1"
data-b="2"
data-c="3"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
```
-25
View File
@@ -1,25 +0,0 @@
#### Recognize waitForAsync as test-statement in Angular (#11992 by @HendrikN)
<!-- prettier-ignore -->
```js
// Input
test("foo bar", waitForAsync(() => {
const foo = "bar";
expect(foo).toEqual("bar")
}));
// Prettier stable
test(
"foo bar",
waitForAsync(() => {
const foo = "bar";
expect(foo).toEqual("bar");
})
);
// Prettier main
test("foo bar", waitForAsync(() => {
const foo = "bar";
expect(foo).toEqual("bar");
}));
```
-22
View File
@@ -1,22 +0,0 @@
#### Preserve end-of-line comments after if statements without blocks (#12017 by @sosukesuzuki)
<!-- prettier-ignore -->
```jsx
// Input
if (condition1) expression1; // comment A
else if (condition2) expression2; // comment B
else expression3; // comment C
// Prettier stable
if (condition1) expression1;
// comment A
else if (condition2) expression2;
// comment B
else expression3; // comment C
// Prettier main
if (condition1) expression1; // comment A
else if (condition2) expression2; // comment B
else expression3; // comment C
```
-17
View File
@@ -1,17 +0,0 @@
#### Print comments for parenthesized TS keyword types with `babel-ts` parser (#12070 by @sosukesuzuki)
<!-- prettier-ignore -->
```ts
// Input
let foo: (
// comment
never
);
// Prettier stable
Error: Comment "comment" was not printed. Please report this error!
// Prettier main
let foo: // comment
never;
```
-16
View File
@@ -1,16 +0,0 @@
#### Print end-of-line comments for `continue`/`break` statements (#12075 by @sosukesuzuki)
<!-- prettier-ignore -->
```jsx
// Input
for (;;) continue // comment
;
// Prettier stable
Error: Comment "comment" was not printed. Please report this error!
// Prettier main
for (;;)
continue; // comment
```
-40
View File
@@ -1,40 +0,0 @@
#### Inline `await` expressions in JSX (#12088 & #12109 by @j-f1)
`await` expressions in JSX are now inlined if their argument would be inlined.
<!-- prettier-ignore -->
```jsx
// Input
{await Promise.all(
someVeryLongExpression
)}
{await (
<div>Lorem ipsum ...</div>
)}
// Prettier stable
{
await Promise.all(
someVeryLongExpression
)
}
{
await (
<div>Lorem ipsum ...</div>
)
}
// Prettier main
{await Promise.all(
someVeryLongExpression
)}
{await (
<div>Lorem ipsum ...</div>
)}
```
-3
View File
@@ -1,3 +0,0 @@
#### Add `acorn` parser (#12172 by @fisker)
A new value for the `parser` option has been added: [`acorn`](https://github.com/acornjs/acorn) - A small, fast, JavaScript-based JavaScript parser.
-40
View File
@@ -1,40 +0,0 @@
#### Keep comments after `default` cases in the same line (#12177 by @duailibe)
Keep comments right after `default` cases (in switch statements) in the same line, when possible.
<!-- prettier-ignore -->
```jsx
// Input
function read_statement() {
switch (peek_keyword()) {
case Keyword.impl: // impl<T> Growling<T> for Wolf {}
return ImplDeclaration.read();
default: // expression;
return ExpressionStatement.read();
}
}
// Prettier stable
function read_statement() {
switch (peek_keyword()) {
case Keyword.impl: // impl<T> Growling<T> for Wolf {}
return ImplDeclaration.read();
default:
// expression;
return ExpressionStatement.read();
}
}
// Prettier main
function read_statement() {
switch (peek_keyword()) {
case Keyword.impl: // impl<T> Growling<T> for Wolf {}
return ImplDeclaration.read();
default: // expression;
return ExpressionStatement.read();
}
}
```
-26
View File
@@ -1,26 +0,0 @@
#### Fix misplaced argument comment in abstract methods (#12185 by @duailibe)
<!-- prettier-ignore -->
```ts
// Input
abstract class Foo {
abstract bar(
/** comment explaining userId param */
userId
)
}
// Prettier stable
abstract class Foo {
abstract bar(userId);
/** comment explaining userId param */
}
// Prettier main
abstract class Foo {
abstract bar(
/** comment explaining userId param */
userId
);
}
```
-15
View File
@@ -1,15 +0,0 @@
#### Fix typecast of superclass in class declarations (#12222 & #12226 by @duailibe)
This was a combination of two separate bugs: moving the comments before the superclass and adding multiple parenthesis around the superclass.
<!-- prettier-ignore -->
```js
// Input
class Foo extends /** @type {Type} */ (Bar) {}
// Prettier stable
class Foo /** @type {Type} */ extends ((Bar)) {}
// Prettier main
class Foo extends /** @type {Type} */ (Bar) {}
```
-16
View File
@@ -1,16 +0,0 @@
#### Add support for Unicode Set Notation in regular expressions (#12241 by @fisker)
The Stage 3 proposal for [Unicode Set Notation](https://github.com/tc39/proposal-regexp-set-notation/) in regular expressions is now supported via [Babel 7.17.0](https://babeljs.io/blog/2022/02/02/7.17.0).
See [the release blog post of Babel v7.17.0](https://babeljs.io/blog/2022/02/02/7.17.0#regexp-set-notation-and-properties-of-strings-14125httpsgithubcombabelbabelpull14125) and [the README of this proposal](https://github.com/tc39/proposal-regexp-set-notation/) for details. Also keep in mind our [policy on non-standardized syntax](https://prettier.io/docs/en/rationale.html#disclaimer-about-non-standard-syntax) before using this proposed syntax feature with Prettier.
<!-- prettier-ignore -->
```jsx
// Examples
/[\p{Decimal_Number}--[0-9]]/v; // Non-ASCII decimal digits
"Did you see the 👩🏿‍❤️‍💋‍👩🏾 emoji?".match(/\p{RGI_Emoji}/v). // ["👩🏿‍❤️‍💋‍👩🏾"]
/[\r\n\q{\r\n|NEWLINE}]/v; // Matches \r, \n, \r\n or NEWLINE
```
-24
View File
@@ -1,24 +0,0 @@
#### Add parens to `ClassExpression` with decorators (#12260 by @fisker)
<!-- prettier-ignore -->
```js
// Input
(@f() class {});
// Prettier stable
@f()
class {};
// Prettier stable (Second format)
SyntaxError: A class name is required. (2:7)
1 | @f()
> 2 | class {};
| ^
3 |
// Prettier main
(
@f()
class {}
);
```
-54
View File
@@ -1,54 +0,0 @@
#### Improve printing of comments in type aliases in Flow & TS (#12268 by @duailibe)
For Flow, the comments will now be more aligned to how we print comments in assignments where the right-hand side is an object expression:
<!-- prettier-ignore -->
```js
// Input
type Props = // comment explaining the props
{
isPlaying: boolean
};
// Prettier stable
// comment explaining the props
type Props = {
isPlaying: boolean,
};
// Prettier main
type Props =
// comment explaining the props
{
isPlaying: boolean,
};
```
This change also fixes an issue where a similarly-placed comment in TypeScript would be moved again after a second formatting operation:
<!-- prettier-ignore -->
```ts
// Input
type Props = // comment explaining the props
{
isPlaying: boolean
};
// Prettier stable
type Props = { // comment explaining the props
isPlaying: boolean;
};
// Prettier stable (2nd format)
type Props = {
// comment explaining the props
isPlaying: boolean;
};
// Prettier main
type Props =
// comment explaining the props
{
isPlaying: boolean,
};
```
-15
View File
@@ -1,15 +0,0 @@
#### Add support for destructuring of private fields (#12276 by @sosukesuzuki)
The Stage 2 TC39 proposal for [destructuring of private fields](https://github.com/tc39/proposal-destructuring-private) is now supported via [Babel 7.17](https://babeljs.io/blog/2022/02/02/7.17.0). Please read our [policy on non-standardized syntax](https://prettier.io/docs/en/rationale.html#disclaimer-about-non-standard-syntax) before you decide to use this proposed syntax feature with Prettier.
<!-- prettier-ignore -->
```jsx
// Example
class Foo {
constructor() {
console.log(this.#x); // => 1
const { #x: x } = this;
console.log(x); // => 1
}
}
```
-12
View File
@@ -1,12 +0,0 @@
#### Support decorator auto accessors syntax (#12299 by @sosukesuzuki)
Support auto accessors syntax that is introduced in [new decorators proposal](https://github.com/tc39/proposal-decorators). Please read our [policy on non-standardized syntax](https://prettier.io/docs/en/rationale.html#disclaimer-about-non-standard-syntax) before you decide to use this proposed syntax feature with Prettier.
<!-- prettier-ignore -->
```jsx
// Example
@defineElement("my-class")
class C extends HTMLElement {
@reactive accessor clicked = false;
}
```
-23
View File
@@ -1,23 +0,0 @@
#### Fix idempotence issues caused by line comments after `=` in assignments (#12349 by @thorn0)
<!-- prettier-ignore -->
```jsx
// Input
const kochabCooieGameOnOboleUnweave = // !!!
rhubarbRhubarb(annularCooeedSplicesWalksWayWay);
// Prettier stable, first format
const kochabCooieGameOnOboleUnweave = rhubarbRhubarb( // !!!
annularCooeedSplicesWalksWayWay
);
// Prettier stable, second format
const kochabCooieGameOnOboleUnweave = rhubarbRhubarb(
// !!!
annularCooeedSplicesWalksWayWay
);
// Prettier main
const kochabCooieGameOnOboleUnweave = // !!!
rhubarbRhubarb(annularCooeedSplicesWalksWayWay);
```
-3
View File
@@ -1,3 +0,0 @@
#### Switch to `esbuild` (#12055 by @fisker)
We've switched our build process from Rollup to [esbuild](https://esbuild.github.io). esbuild is much faster and has improved our development experience. This is an internal change and should not affect users. If something isn’t working for you after upgrading, please [open an issue](https://github.com/prettier/prettier/issues/new?assignees=&labels=&template=integration.md)!
-36
View File
@@ -1,36 +0,0 @@
#### Fix comments inside map (#11920 by @fisker)
<!-- prettier-ignore -->
```scss
// Input
.ag-theme-balham {
@include ag-theme-balham(
(
foreground-color: $custom-foreground-color,
disabled-foreground-color: null, // TODO some comment
)
);
}
// Prettier stable
.ag-theme-balham {
@include ag-theme-balham(
(
foreground-color: $custom-foreground-color,
disabled-foreground-color: null,
r: null, // TODO som
)
);
}
// Prettier main
.ag-theme-balham {
@include ag-theme-balham(
(
foreground-color: $custom-foreground-color,
disabled-foreground-color: null,
// TODO some comment
)
);
}
```
-16
View File
@@ -1,16 +0,0 @@
#### Fixes printing parameters of a mixin named `selector()` (#12213 by @duailibe)
<!-- prettier-ignore -->
```css
/* Input */
@mixin selector($param: 'value') {
}
/* Prettier stable */
@mixin selector($param: 'value) {
}
/* Prettier main */
@mixin selector($param: 'value') {
}
```
-15
View File
@@ -1,15 +0,0 @@
#### Refactor printing definite assignment assertions (#12351 by @thorn0)
Definite assignment assertions are now printed even when they aren't followed by type annotations. This is an error in TypeScript, but TS is still able to parse the file.
<!-- prettier-ignore -->
```ts
// Input
let a!;
// Prettier stable
let a;
// Prettier main
let a!;
```
-45
View File
@@ -1,45 +0,0 @@
#### Print trailing comma for rest elements in tuple types (#12390 by @sosukesuzuki)
TypeScript has allowed rest elements in tuple types (`...T`) to have normal elements come after them since [TypeScript 4.2](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-2.html#leadingmiddle-rest-elements-in-tuple-types).
Prettier now prints a trailing comma for the trailing rest element (when trailing commas are enabled) for consistency and to reduce diffs if you decide to add more elements after the final element in the future.
<!-- prettier-ignore -->
```tsx
// { trailingCommma: "all" }
// Input
type Foo = [
Element,
Element,
Element,
Element,
Element,
Element,
...RestElement,
];
// Prettier stable
type Foo = [
Element,
Element,
Element,
Element,
Element,
Element,
...RestElement
];
// Prettier main
type Foo = [
Element,
Element,
Element,
Element,
Element,
Element,
...RestElement,
];
```
-3
View File
@@ -1,3 +0,0 @@
#### [HIGHLIGHT]TypeScript 4.6 support (#12400 by @dependabot)
We’ve updated the version of TypeScript that we use to parse TS code to [TypeScript 4.6](https://devblogs.microsoft.com/typescript/announcing-typescript-4-6/). However, no new syntax was added in this release of TypeScript so we have not had to make any other changes.
-21
View File
@@ -1,21 +0,0 @@
#### Fix hangs on invalid `v-for` (#12113 by @fisker)
<!-- prettier-ignore -->
```jsx
// Input
<template>
<div>
<div v-for=" a in ">aaaaa</div>
</div>
</template>
// Prettier stable
// Hangs
// Prettier main
<template>
<div>
<div v-for=" a in ">aaaaa</div>
</div>
</template>;
```
-49
View File
@@ -1,49 +0,0 @@
#### Allow `lang` attribute of `<template>` to be empty (#12394 by @HallvardMM)
Template tag should allow empty string lang="" or undefined lang
<!-- prettier-ignore -->
```vue
<!-- Input -->
<template lang="">
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>
<template lang>
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>
<!-- Prettier stable -->
SyntaxError: Unexpected closing tag "v-menu". It may happen when the tag has already been closed by another tag. For more info see https://www.w3.org/TR/html5/syntax.html#closing-elements-that-have-implied-end-tags (5:5)
[error] 3 | <v-menu offset-y>
[error] 4 | <template></template>
[error] > 5 | </v-menu>
[error] | ^^^^^^^^^
[error] 6 | </v-app-bar>
[error] 7 | </template>
<!-- Prettier main -->
<template lang="">
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>
<template lang>
<v-app-bar>
<v-menu offset-y>
<template></template>
</v-menu>
</v-app-bar>
</template>
```
-15
View File
@@ -1,15 +0,0 @@
#### Fix unexpected deletion of block-literal lines which starts with U+3000 (#12305 by @Quramy)
<!-- prettier-ignore -->
```yaml
# Input
block_with_ideographic_space: |
 line-content # This line starts with U+3000
# Prettier stable
block_with_ideographic_space: |
// Prettier main
block_with_ideographic_space: |
 line-content # This line starts with U+3000
```