Release 3.5.0
This commit is contained in:
1 parent
4797054c3d
commit
7584432401
9 files changed
+112
-26
No files matched your search
@@ -26,7 +26,7 @@ Don't fill the form below manually! Let a program create a report for you:
|
|||||||
|
|
||||||
-->
|
-->
|
||||||
|
|
||||||
**Prettier 3.4.2**
|
**Prettier 3.5.0**
|
||||||
[Playground link](https://prettier.io/playground/#.....)
|
[Playground link](https://prettier.io/playground/#.....)
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ BEFORE SUBMITTING AN ISSUE:
|
|||||||
|
|
||||||
**Environments:**
|
**Environments:**
|
||||||
|
|
||||||
- Prettier Version: 3.4.2
|
- Prettier Version: 3.5.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. -->
|
||||||
|
|||||||
@@ -1,3 +1,9 @@
|
|||||||
|
# 3.5.0
|
||||||
|
|
||||||
|
[diff](https://github.com/prettier/prettier/compare/3.4.2...3.5.0)
|
||||||
|
|
||||||
|
🔗 [Release Notes](https://prettier.io/blog/2025/02/09/3.5.0.html)
|
||||||
|
|
||||||
# 3.4.2
|
# 3.4.2
|
||||||
|
|
||||||
[diff](https://github.com/prettier/prettier/compare/3.4.1...3.4.2)
|
[diff](https://github.com/prettier/prettier/compare/3.4.1...3.4.2)
|
||||||
|
|||||||
+1
-1
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "prettier",
|
"name": "prettier",
|
||||||
"version": "3.5.0-dev",
|
"version": "3.5.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",
|
||||||
|
|||||||
@@ -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.4.2/plugins](https://unpkg.com/browse/prettier@3.4.2/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.5.0/plugins](https://unpkg.com/browse/prettier@3.5.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.4.2/standalone.js"></script>
|
<script src="https://unpkg.com/prettier@3.5.0/standalone.js"></script>
|
||||||
<script src="https://unpkg.com/prettier@3.4.2/plugins/graphql.js"></script>
|
<script src="https://unpkg.com/prettier@3.5.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.4.2/standalone.mjs";
|
import * as prettier from "https://unpkg.com/prettier@3.5.0/standalone.mjs";
|
||||||
import prettierPluginGraphql from "https://unpkg.com/prettier@3.4.2/plugins/graphql.mjs";
|
import prettierPluginGraphql from "https://unpkg.com/prettier@3.5.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.4.2/standalone.js",
|
"https://unpkg.com/prettier@3.5.0/standalone.js",
|
||||||
"https://unpkg.com/prettier@3.4.2/plugins/graphql.js",
|
"https://unpkg.com/prettier@3.5.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.4.2/standalone.js");
|
importScripts("https://unpkg.com/prettier@3.5.0/standalone.js");
|
||||||
importScripts("https://unpkg.com/prettier@3.4.2/plugins/graphql.js");
|
importScripts("https://unpkg.com/prettier@3.5.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.4.2/standalone.mjs";
|
import * as prettier from "https://unpkg.com/prettier@3.5.0/standalone.mjs";
|
||||||
import prettierPluginBabel from "https://unpkg.com/prettier@3.4.2/plugins/babel.mjs";
|
import prettierPluginBabel from "https://unpkg.com/prettier@3.5.0/plugins/babel.mjs";
|
||||||
import prettierPluginEstree from "https://unpkg.com/prettier@3.4.2/plugins/estree.mjs";
|
import prettierPluginEstree from "https://unpkg.com/prettier@3.5.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.4.2/standalone.mjs";
|
import * as prettier from "https://unpkg.com/prettier@3.5.0/standalone.mjs";
|
||||||
import prettierPluginBabel from "https://unpkg.com/prettier@3.4.2/plugins/babel.mjs";
|
import prettierPluginBabel from "https://unpkg.com/prettier@3.5.0/plugins/babel.mjs";
|
||||||
import prettierPluginEstree from "https://unpkg.com/prettier@3.4.2/plugins/estree.mjs";
|
import prettierPluginEstree from "https://unpkg.com/prettier@3.5.0/plugins/estree.mjs";
|
||||||
import prettierPluginHtml from "https://unpkg.com/prettier@3.4.2/plugins/html.mjs";
|
import prettierPluginHtml from "https://unpkg.com/prettier@3.5.0/plugins/html.mjs";
|
||||||
|
|
||||||
console.log(
|
console.log(
|
||||||
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
|
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
|
||||||
|
|||||||
@@ -8,17 +8,37 @@ You can configure Prettier via (in order of precedence):
|
|||||||
- A `"prettier"` key in your `package.json`, or [`package.yaml`](https://github.com/pnpm/pnpm/pull/1799) file.
|
- A `"prettier"` key in your `package.json`, or [`package.yaml`](https://github.com/pnpm/pnpm/pull/1799) file.
|
||||||
- A `.prettierrc` file written in JSON or YAML.
|
- A `.prettierrc` file written in JSON or YAML.
|
||||||
- A `.prettierrc.json`, `.prettierrc.yml`, `.prettierrc.yaml`, or `.prettierrc.json5` file.
|
- A `.prettierrc.json`, `.prettierrc.yml`, `.prettierrc.yaml`, or `.prettierrc.json5` file.
|
||||||
- A `.prettierrc.js`, or `prettier.config.js` file that exports an object using `export default` or `module.exports` (depends on the [`type`](https://nodejs.org/api/packages.html#type) value in your `package.json`).
|
- A `.prettierrc.js`, `prettier.config.js`, `.prettierrc.ts`, or `prettier.config.ts` file that exports an object using `export default` or `module.exports` (depends on the [`type`](https://nodejs.org/api/packages.html#type) value in your `package.json`).
|
||||||
- A `.prettierrc.mjs`, or `prettier.config.mjs` file that exports an object using `export default`.
|
- A `.prettierrc.mjs`, `prettier.config.mjs`, `.prettierrc.mts`, or `prettier.config.mts` file that exports an object using `export default`.
|
||||||
- A `.prettierrc.cjs`, or `prettier.config.cjs` file that exports an object using `module.exports`.
|
- A `.prettierrc.cjs`, `prettier.config.cjs`, `.prettierrc.cts`, or `prettier.config.cts` file that exports an object using `module.exports`.
|
||||||
- A `.prettierrc.toml` file.
|
- A `.prettierrc.toml` file.
|
||||||
|
|
||||||
|
:::info
|
||||||
|
|
||||||
|
TypeScript configuration files support requires [additional setup](#typescript-configuration-files)
|
||||||
|
|
||||||
|
:::
|
||||||
|
|
||||||
The configuration file will be resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn’t) found.
|
The configuration file will be resolved starting from the location of the file being formatted, and searching up the file tree until a config file is (or isn’t) found.
|
||||||
|
|
||||||
Prettier intentionally doesn’t support any kind of global configuration. This is to make sure that when a project is copied to another computer, Prettier’s behavior stays the same. Otherwise, Prettier wouldn’t be able to guarantee that everybody in a team gets the same consistent results.
|
Prettier intentionally doesn’t support any kind of global configuration. This is to make sure that when a project is copied to another computer, Prettier’s behavior stays the same. Otherwise, Prettier wouldn’t be able to guarantee that everybody in a team gets the same consistent results.
|
||||||
|
|
||||||
The options you can use in the configuration file are the same as the [API options](options.md).
|
The options you can use in the configuration file are the same as the [API options](options.md).
|
||||||
|
|
||||||
|
### TypeScript Configuration Files
|
||||||
|
|
||||||
|
TypeScript support for Node.js is currently experimental, Node.js>=22.6.0 is required and `--experimental-strip-types` is required to run Node.js.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
node --experimental-strip-types node_modules/prettier/bin/prettier.cjs . --write
|
||||||
|
```
|
||||||
|
|
||||||
|
or
|
||||||
|
|
||||||
|
```sh
|
||||||
|
NODE_OPTIONS="--experimental-strip-types" prettier . --write
|
||||||
|
```
|
||||||
|
|
||||||
## Basic Configuration
|
## Basic Configuration
|
||||||
|
|
||||||
JSON:
|
JSON:
|
||||||
@@ -70,6 +90,34 @@ const config = {
|
|||||||
module.exports = config;
|
module.exports = config;
|
||||||
```
|
```
|
||||||
|
|
||||||
|
TypeScript (ES Modules):
|
||||||
|
|
||||||
|
```ts
|
||||||
|
// prettier.config.ts, .prettierrc.ts, prettier.config.mts, or .prettierrc.mts
|
||||||
|
|
||||||
|
import { type Config } from "prettier";
|
||||||
|
|
||||||
|
const config: Config = {
|
||||||
|
trailingComma: "none",
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
|
```
|
||||||
|
|
||||||
|
TypeScript (CommonJS):
|
||||||
|
|
||||||
|
```ts
|
||||||
|
// prettier.config.ts, .prettierrc.ts, prettier.config.cts, or .prettierrc.cts
|
||||||
|
|
||||||
|
import { type Config } from "prettier";
|
||||||
|
|
||||||
|
const config: Config = {
|
||||||
|
trailingComma: "none",
|
||||||
|
};
|
||||||
|
|
||||||
|
module.exports = config;
|
||||||
|
```
|
||||||
|
|
||||||
YAML:
|
YAML:
|
||||||
|
|
||||||
```yaml
|
```yaml
|
||||||
@@ -171,7 +219,7 @@ You can also switch to the `flow` parser instead of the default `babel` for .js
|
|||||||
|
|
||||||
## Configuration Schema
|
## Configuration Schema
|
||||||
|
|
||||||
If you’d like a JSON schema to validate your configuration, one is available here: https://json.schemastore.org/prettierrc.
|
If you’d like a JSON schema to validate your configuration, one is available here: [https://json.schemastore.org/prettierrc](https://json.schemastore.org/prettierrc).
|
||||||
|
|
||||||
## EditorConfig
|
## EditorConfig
|
||||||
|
|
||||||
|
|||||||
@@ -145,6 +145,8 @@ This type of ignore is only allowed to be used in top-level and aimed to disable
|
|||||||
<!-- prettier-ignore-end -->
|
<!-- prettier-ignore-end -->
|
||||||
```
|
```
|
||||||
|
|
||||||
|
**Important:** You must have a blank line before `<!-- prettier-ignore-start -->` and `<!-- prettier-ignore-end -->` for Prettier to recognize the comments.
|
||||||
|
|
||||||
## YAML
|
## YAML
|
||||||
|
|
||||||
To ignore a part of a YAML file, `# prettier-ignore` should be placed on the line immediately above the ignored node:
|
To ignore a part of a YAML file, `# prettier-ignore` should be placed on the line immediately above the ignored node:
|
||||||
|
|||||||
@@ -22,6 +22,17 @@ Valid options:
|
|||||||
| ------- | -------------------------- | ------------------------------- |
|
| ------- | -------------------------- | ------------------------------- |
|
||||||
| `false` | `--experimental-ternaries` | `experimentalTernaries: <bool>` |
|
| `false` | `--experimental-ternaries` | `experimentalTernaries: <bool>` |
|
||||||
|
|
||||||
|
## Experimental Operator Position
|
||||||
|
|
||||||
|
Valid options:
|
||||||
|
|
||||||
|
- `"start"` - When binary expressions wrap lines, print operators at the start of new lines.
|
||||||
|
- `"end"` - Default behavior; when binary expressions wrap lines, print operators at the end of previous lines.
|
||||||
|
|
||||||
|
| Default | CLI Override | API Override |
|
||||||
|
| ------- | --------------------------------------------------------------- | -------------------------------------------------------------- |
|
||||||
|
| `"end"` | <code>--experimental-operator-position \<start|end></code> | <code>experimentalOperatorPosition: "\<start|end>"</code> |
|
||||||
|
|
||||||
## Print Width
|
## Print Width
|
||||||
|
|
||||||
Specify the line length that the printer will wrap on.
|
Specify the line length that the printer will wrap on.
|
||||||
@@ -156,6 +167,23 @@ Valid options:
|
|||||||
| ------- | ---------------------- | ------------------------ |
|
| ------- | ---------------------- | ------------------------ |
|
||||||
| `true` | `--no-bracket-spacing` | `bracketSpacing: <bool>` |
|
| `true` | `--no-bracket-spacing` | `bracketSpacing: <bool>` |
|
||||||
|
|
||||||
|
## Object Wrap
|
||||||
|
|
||||||
|
_First available in v3.5.0_
|
||||||
|
|
||||||
|
Configure how Prettier wraps object literals when they could fit on one line or span multiple lines.
|
||||||
|
|
||||||
|
By default, Prettier formats objects as multi-line if there is a newline prior to the first property. Authors can use this heuristic to contextually improve readability, though it has some downsides. See [Multi-line objects](rationale.md#multi-line-objects).
|
||||||
|
|
||||||
|
Valid options:
|
||||||
|
|
||||||
|
- `"preserve"` - Keep as multi-line, if there is a newline between the opening brace and first property.
|
||||||
|
- `"collapse"` - Fit to a single line when possible.
|
||||||
|
|
||||||
|
| Default | CLI Override | API Override |
|
||||||
|
| ------------ | ---------------------------------------------------- | ---------------------------------------------------- |
|
||||||
|
| `"preserve"` | <code>--object-wrap \<preserve|collapse></code> | <code>objectWrap: "\<preserve|collapse>"</code> |
|
||||||
|
|
||||||
## Bracket Line
|
## Bracket Line
|
||||||
|
|
||||||
Put the `>` of a multi-line HTML (HTML, JSX, Vue, Angular) element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
|
Put the `>` of a multi-line HTML (HTML, JSX, Vue, Angular) element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
|
||||||
|
|||||||
@@ -29,9 +29,11 @@ It turns out that empty lines are very hard to automatically generate. The appro
|
|||||||
|
|
||||||
### Multi-line objects
|
### Multi-line objects
|
||||||
|
|
||||||
By default, Prettier’s printing algorithm prints expressions on a single line if they fit. Objects are used for a lot of different things in JavaScript, though, and sometimes it really helps readability if they stay multiline. See [object lists], [nested configs], [stylesheets] and [keyed methods], for example. We haven’t been able to find a good rule for all those cases, so Prettier instead keeps objects multiline if there’s a newline between the `{` and the first key in the original source code. A consequence of this is that long singleline objects are automatically expanded, but short multiline objects are never collapsed.
|
By default, Prettier’s printing algorithm prints expressions on a single line if they fit. Objects are used for a lot of different things in JavaScript, though, and sometimes it really helps readability if they stay multiline. See [object lists], [nested configs], [stylesheets] and [keyed methods], for example. We haven’t been able to find a good rule for all those cases, so by default Prettier keeps objects multi-line if there’s a newline between the `{` and the first key in the original source code. Consequently, long single-line objects are automatically expanded, but short multi-line objects are never collapsed.
|
||||||
|
|
||||||
**Tip:** If you have a multiline object that you’d like to join up into a single line:
|
You can disable this conditional behavior with the [`objectWrap`](options.md#object-wrap) option.
|
||||||
|
|
||||||
|
**Tip:** If you have a multi-line object that you’d like to join up into a single line:
|
||||||
|
|
||||||
```js
|
```js
|
||||||
const user = {
|
const user = {
|
||||||
@@ -55,7 +57,7 @@ const user = { name: "John Doe",
|
|||||||
const user = { name: "John Doe", age: 30 };
|
const user = { name: "John Doe", age: 30 };
|
||||||
```
|
```
|
||||||
|
|
||||||
And if you’d like to go multiline again, add in a newline after `{`:
|
And if you’d like to go multi-line again, add in a newline after `{`:
|
||||||
|
|
||||||
<!-- prettier-ignore -->
|
<!-- prettier-ignore -->
|
||||||
```js
|
```js
|
||||||
|
|||||||
Reference in new issue
Block a user