Release 3.2.0

This commit is contained in:
Sosuke Suzuki committed 2024-01-13 01:13:35 +09:00
1 parent c9fc23e0e7
commit 29f299f73e
8 files changed
+57 -37

No files matched your search

+1 -1
View File
@@ -26,7 +26,7 @@ Don't fill the form below manually! Let a program create a report for you:
--> -->
**Prettier 3.1.1** **Prettier 3.2.0**
[Playground link](https://prettier.io/playground/#.....) [Playground link](https://prettier.io/playground/#.....)
```sh ```sh
+1 -1
View File
@@ -20,7 +20,7 @@ BEFORE SUBMITTING AN ISSUE:
**Environments:** **Environments:**
- Prettier Version: 3.1.1 - Prettier Version: 3.2.0
- Running Prettier via: <!-- CLI, Node.js API, Browser API, etc. --> - Running Prettier via: <!-- CLI, Node.js API, Browser API, etc. -->
- Runtime: <!-- Node.js v14, Chrome v83, etc. --> - Runtime: <!-- Node.js v14, Chrome v83, etc. -->
- Operating System: <!-- Windows, Linux, macOS, etc. --> - Operating System: <!-- Windows, Linux, macOS, etc. -->
+6
View File
@@ -1,3 +1,9 @@
# 3.2.0
[diff](https://github.com/prettier/prettier/compare/3.1.1...3.2.0)
🔗 [Release Notes](https://prettier.io/blog/2024/01/13/3.2.0.html)
# 3.1.1 # 3.1.1
[diff](https://github.com/prettier/prettier/compare/3.1.0...3.1.1) [diff](https://github.com/prettier/prettier/compare/3.1.0...3.1.1)
+16 -16
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. - **[`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@3.1.1/plugins/>. Note that `estree` plugin should be loaded when printing JavaScript, TypeScript, Flow, or JSON. - **`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@3.2.0/plugins/>. Note that `estree` plugin should be loaded when printing JavaScript, TypeScript, Flow, or JSON.
You need to load the ones that you’re going to use and pass them to `prettier.format` using the `plugins` option. 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 ### Global
```html ```html
<script src="https://unpkg.com/prettier@3.1.1/standalone.js"></script> <script src="https://unpkg.com/prettier@3.2.0/standalone.js"></script>
<script src="https://unpkg.com/prettier@3.1.1/plugins/graphql.js"></script> <script src="https://unpkg.com/prettier@3.2.0/plugins/graphql.js"></script>
<script> <script>
(async () => { (async () => {
const formatted = await prettier.format("type Query { hello: String }", { 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 ```html
<script type="module"> <script type="module">
import * as prettier from "https://unpkg.com/prettier@3.1.1/standalone.mjs"; import * as prettier from "https://unpkg.com/prettier@3.2.0/standalone.mjs";
import prettierPluginGraphql from "https://unpkg.com/prettier@3.1.1/plugins/graphql.mjs"; import prettierPluginGraphql from "https://unpkg.com/prettier@3.2.0/plugins/graphql.mjs";
const formatted = await prettier.format("type Query { hello: String }", { const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql", parser: "graphql",
@@ -61,8 +61,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
```js ```js
define([ define([
"https://unpkg.com/prettier@3.1.1/standalone.js", "https://unpkg.com/prettier@3.2.0/standalone.js",
"https://unpkg.com/prettier@3.1.1/plugins/graphql.js", "https://unpkg.com/prettier@3.2.0/plugins/graphql.js",
], async (prettier, ...plugins) => { ], async (prettier, ...plugins) => {
const formatted = await prettier.format("type Query { hello: String }", { const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql", parser: "graphql",
@@ -90,8 +90,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
### Worker ### Worker
```js ```js
importScripts("https://unpkg.com/prettier@3.1.1/standalone.js"); importScripts("https://unpkg.com/prettier@3.2.0/standalone.js");
importScripts("https://unpkg.com/prettier@3.1.1/plugins/graphql.js"); importScripts("https://unpkg.com/prettier@3.2.0/plugins/graphql.js");
(async () => { (async () => {
const formatted = await prettier.format("type Query { hello: String }", { const formatted = await prettier.format("type Query { hello: String }", {
@@ -107,9 +107,9 @@ If you want to format [embedded code](options.md#embedded-language-formatting),
```html ```html
<script type="module"> <script type="module">
import * as prettier from "https://unpkg.com/prettier@3.1.1/standalone.mjs"; import * as prettier from "https://unpkg.com/prettier@3.2.0/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.1.1/plugins/babel.mjs"; import prettierPluginBabel from "https://unpkg.com/prettier@3.2.0/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.1.1/plugins/estree.mjs"; import prettierPluginEstree from "https://unpkg.com/prettier@3.2.0/plugins/estree.mjs";
console.log( console.log(
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", { await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -125,10 +125,10 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser
```html ```html
<script type="module"> <script type="module">
import * as prettier from "https://unpkg.com/prettier@3.1.1/standalone.mjs"; import * as prettier from "https://unpkg.com/prettier@3.2.0/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.1.1/plugins/babel.mjs"; import prettierPluginBabel from "https://unpkg.com/prettier@3.2.0/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.1.1/plugins/estree.mjs"; import prettierPluginEstree from "https://unpkg.com/prettier@3.2.0/plugins/estree.mjs";
import prettierPluginHtml from "https://unpkg.com/prettier@3.1.1/plugins/html.mjs"; import prettierPluginHtml from "https://unpkg.com/prettier@3.2.0/plugins/html.mjs";
console.log( console.log(
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", { await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
+1 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "prettier", "name": "prettier",
"version": "3.2.0-dev", "version": "3.2.0",
"description": "Prettier is an opinionated code formatter", "description": "Prettier is an opinionated code formatter",
"bin": "./bin/prettier.cjs", "bin": "./bin/prettier.cjs",
"repository": "prettier/prettier", "repository": "prettier/prettier",
@@ -19,7 +19,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. - **[`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@3.1.1/plugins/>. Note that `estree` plugin should be loaded when printing JavaScript, TypeScript, Flow, or JSON. - **`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@3.2.0/plugins/>. Note that `estree` plugin should be loaded when printing JavaScript, TypeScript, Flow, or JSON.
You need to load the ones that you’re going to use and pass them to `prettier.format` using the `plugins` option. You need to load the ones that you’re going to use and pass them to `prettier.format` using the `plugins` option.
@@ -30,8 +30,8 @@ See below for examples.
### Global ### Global
```html ```html
<script src="https://unpkg.com/prettier@3.1.1/standalone.js"></script> <script src="https://unpkg.com/prettier@3.2.0/standalone.js"></script>
<script src="https://unpkg.com/prettier@3.1.1/plugins/graphql.js"></script> <script src="https://unpkg.com/prettier@3.2.0/plugins/graphql.js"></script>
<script> <script>
(async () => { (async () => {
const formatted = await prettier.format("type Query { hello: String }", { const formatted = await prettier.format("type Query { hello: String }", {
@@ -48,8 +48,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
```html ```html
<script type="module"> <script type="module">
import * as prettier from "https://unpkg.com/prettier@3.1.1/standalone.mjs"; import * as prettier from "https://unpkg.com/prettier@3.2.0/standalone.mjs";
import prettierPluginGraphql from "https://unpkg.com/prettier@3.1.1/plugins/graphql.mjs"; import prettierPluginGraphql from "https://unpkg.com/prettier@3.2.0/plugins/graphql.mjs";
const formatted = await prettier.format("type Query { hello: String }", { const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql", parser: "graphql",
@@ -62,8 +62,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
```js ```js
define([ define([
"https://unpkg.com/prettier@3.1.1/standalone.js", "https://unpkg.com/prettier@3.2.0/standalone.js",
"https://unpkg.com/prettier@3.1.1/plugins/graphql.js", "https://unpkg.com/prettier@3.2.0/plugins/graphql.js",
], async (prettier, ...plugins) => { ], async (prettier, ...plugins) => {
const formatted = await prettier.format("type Query { hello: String }", { const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql", parser: "graphql",
@@ -91,8 +91,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
### Worker ### Worker
```js ```js
importScripts("https://unpkg.com/prettier@3.1.1/standalone.js"); importScripts("https://unpkg.com/prettier@3.2.0/standalone.js");
importScripts("https://unpkg.com/prettier@3.1.1/plugins/graphql.js"); importScripts("https://unpkg.com/prettier@3.2.0/plugins/graphql.js");
(async () => { (async () => {
const formatted = await prettier.format("type Query { hello: String }", { const formatted = await prettier.format("type Query { hello: String }", {
@@ -108,9 +108,9 @@ If you want to format [embedded code](options.md#embedded-language-formatting),
```html ```html
<script type="module"> <script type="module">
import * as prettier from "https://unpkg.com/prettier@3.1.1/standalone.mjs"; import * as prettier from "https://unpkg.com/prettier@3.2.0/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.1.1/plugins/babel.mjs"; import prettierPluginBabel from "https://unpkg.com/prettier@3.2.0/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.1.1/plugins/estree.mjs"; import prettierPluginEstree from "https://unpkg.com/prettier@3.2.0/plugins/estree.mjs";
console.log( console.log(
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", { await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -126,10 +126,10 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser
```html ```html
<script type="module"> <script type="module">
import * as prettier from "https://unpkg.com/prettier@3.1.1/standalone.mjs"; import * as prettier from "https://unpkg.com/prettier@3.2.0/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.1.1/plugins/babel.mjs"; import prettierPluginBabel from "https://unpkg.com/prettier@3.2.0/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.1.1/plugins/estree.mjs"; import prettierPluginEstree from "https://unpkg.com/prettier@3.2.0/plugins/estree.mjs";
import prettierPluginHtml from "https://unpkg.com/prettier@3.1.1/plugins/html.mjs"; import prettierPluginHtml from "https://unpkg.com/prettier@3.2.0/plugins/html.mjs";
console.log( console.log(
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", { await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -116,8 +116,6 @@ Note that Prettier never unquotes numeric property names in Angular expressions,
[quote-props-flow]: https://flow.org/try/#0PQKgBAAgZgNg9gdzCYAoVBjOA7AzgFzAA8wBeMAb1TDAAYAuMARlQF8g [quote-props-flow]: https://flow.org/try/#0PQKgBAAgZgNg9gdzCYAoVBjOA7AzgFzAA8wBeMAb1TDAAYAuMARlQF8g
[quote-props-vue]: https://github.com/prettier/prettier/issues/10127 [quote-props-vue]: https://github.com/prettier/prettier/issues/10127
If this option is set to `preserve`, `singleQuote` to `false` (default value), and `parser` to `json5`, double quotes are always used for strings. This effectively allows using the `json5` parser for “JSON with comments and trailing commas”.
## JSX Quotes ## JSX Quotes
Use single quotes instead of double quotes in JSX. Use single quotes instead of double quotes in JSX.
@@ -283,6 +281,7 @@ Valid options:
- `"less"` (via [postcss-less](https://github.com/shellscape/postcss-less)) _First available in v1.7.1_ - `"less"` (via [postcss-less](https://github.com/shellscape/postcss-less)) _First available in v1.7.1_
- `"json"` (via [@babel/parser parseExpression](https://babeljs.io/docs/en/next/babel-parser.html#babelparserparseexpressioncode-options)) _First available in v1.5.0_ - `"json"` (via [@babel/parser parseExpression](https://babeljs.io/docs/en/next/babel-parser.html#babelparserparseexpressioncode-options)) _First available in v1.5.0_
- `"json5"` (same parser as `"json"`, but outputs as [json5](https://json5.org/)) _First available in v1.13.0_ - `"json5"` (same parser as `"json"`, but outputs as [json5](https://json5.org/)) _First available in v1.13.0_
- `"jsonc"` (same parser as `"json"`, but outputs as "JSON with Comments") _First available in v3.2.0_
- `"json-stringify"` (same parser as `"json"`, but outputs like `JSON.stringify`) _First available in v1.13.0_ - `"json-stringify"` (same parser as `"json"`, but outputs like `JSON.stringify`) _First available in v1.13.0_
- `"graphql"` (via [graphql/language](https://github.com/graphql/graphql-js/tree/master/src/language)) _First available in v1.5.0_ - `"graphql"` (via [graphql/language](https://github.com/graphql/graphql-js/tree/master/src/language)) _First available in v1.5.0_
- `"markdown"` (via [remark-parse](https://github.com/wooorm/remark/tree/main/packages/remark-parse)) _First available in v1.8.0_ - `"markdown"` (via [remark-parse](https://github.com/wooorm/remark/tree/main/packages/remark-parse)) _First available in v1.8.0_
@@ -144,6 +144,21 @@ One final thing: TC39 has [not yet decided if decorators come before or after `e
export @decorator class Foo {} export @decorator class Foo {}
``` ```
### Template literals
Template literals can contain interpolations. Deciding whether it's appropriate to insert a linebreak within an interpolation unfortunately depends on the semantic content of the template - for example, introducing a linebreak in the middle of a natural-language sentence is usually undesirable. Since Prettier doesn't have enough information to make this decision itself, it uses a heuristic similar to that used for objects: it will only split an interpolation expression across multiple lines if there was already a linebreak within that interpolation.
This means that a literal like the following will not be broken onto multiple lines, even if it exceeds the print width:
<!-- prettier-ignore -->
```js
`this is a long message which contains an interpolation: ${format(data)} <- like this`;
```
If you want Prettier to split up an interpolation, you'll need to ensure there's a linebreak somewhere within the `${...}`. Otherwise it will keep everything on a single line, no matter how long it is.
The team would prefer not to depend on the original formatting in this way, but it's the best heuristic we have at the moment.
### Semicolons ### Semicolons
This is about using the [noSemi](options.md#semicolons) option. This is about using the [noSemi](options.md#semicolons) option.