Release 3.5.0

This commit is contained in:
Sosuke Suzuki committed 2025-02-09 20:21:04 +09:00
1 parent 4797054c3d
commit 7584432401
9 files changed
+112 -26

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.4.2** **Prettier 3.5.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.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. -->
+6
View File
@@ -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
View File
@@ -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&#124;end></code> | <code>experimentalOperatorPosition: "\<start&#124;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&#124;collapse></code> | <code>objectWrap: "\<preserve&#124;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