Skip to content

Commit

Permalink
Release 3.5.0
Browse files Browse the repository at this point in the history
  • Loading branch information
sosukesuzuki committed Feb 9, 2025
1 parent 4797054 commit 7584432
Show file tree
Hide file tree
Showing 9 changed files with 112 additions and 26 deletions.
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/formatting.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/#.....)

```sh
Expand Down
2 changes: 1 addition & 1 deletion .github/ISSUE_TEMPLATE/integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ BEFORE SUBMITTING AN ISSUE:

**Environments:**

- Prettier Version: 3.4.2
- Prettier Version: 3.5.0
- Running Prettier via: <!-- CLI, Node.js API, Browser API, etc. -->
- Runtime: <!-- Node.js v14, Chrome v83, etc. -->
- Operating System: <!-- Windows, Linux, macOS, etc. -->
Expand Down
6 changes: 6 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -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

[diff](https://github.com/prettier/prettier/compare/3.4.1...3.4.2)
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "prettier",
"version": "3.5.0-dev",
"version": "3.5.0",
"description": "Prettier is an opinionated code formatter",
"bin": "./bin/prettier.cjs",
"repository": "prettier/prettier",
Expand Down
32 changes: 16 additions & 16 deletions website/versioned_docs/version-stable/browser.md
Original file line number Diff line number Diff line change
Expand Up @@ -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@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.

Expand All @@ -29,8 +29,8 @@ See below for examples.
### Global

```html
<script src="https://unpkg.com/prettier@3.4.2/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/standalone.js"></script>
<script src="https://unpkg.com/prettier@3.5.0/plugins/graphql.js"></script>
<script>
(async () => {
const formatted = await prettier.format("type Query { hello: String }", {
Expand All @@ -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@3.4.2/standalone.mjs";
import prettierPluginGraphql from "https://unpkg.com/prettier@3.4.2/plugins/graphql.mjs";
import * as prettier from "https://unpkg.com/prettier@3.5.0/standalone.mjs";
import prettierPluginGraphql from "https://unpkg.com/prettier@3.5.0/plugins/graphql.mjs";
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
Expand All @@ -61,8 +61,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack

```js
define([
"https://unpkg.com/prettier@3.4.2/standalone.js",
"https://unpkg.com/prettier@3.4.2/plugins/graphql.js",
"https://unpkg.com/prettier@3.5.0/standalone.js",
"https://unpkg.com/prettier@3.5.0/plugins/graphql.js",
], async (prettier, ...plugins) => {
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
Expand Down Expand Up @@ -90,8 +90,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
### Worker

```js
importScripts("https://unpkg.com/prettier@3.4.2/standalone.js");
importScripts("https://unpkg.com/prettier@3.4.2/plugins/graphql.js");
importScripts("https://unpkg.com/prettier@3.5.0/standalone.js");
importScripts("https://unpkg.com/prettier@3.5.0/plugins/graphql.js");

(async () => {
const formatted = await prettier.format("type Query { hello: String }", {
Expand All @@ -107,9 +107,9 @@ If you want to format [embedded code](options.md#embedded-language-formatting),

```html
<script type="module">
import * as prettier from "https://unpkg.com/prettier@3.4.2/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.4.2/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.4.2/plugins/estree.mjs";
import * as prettier from "https://unpkg.com/prettier@3.5.0/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.5.0/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.5.0/plugins/estree.mjs";
console.log(
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
Expand All @@ -125,10 +125,10 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser

```html
<script type="module">
import * as prettier from "https://unpkg.com/prettier@3.4.2/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.4.2/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.4.2/plugins/estree.mjs";
import prettierPluginHtml from "https://unpkg.com/prettier@3.4.2/plugins/html.mjs";
import * as prettier from "https://unpkg.com/prettier@3.5.0/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.5.0/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.5.0/plugins/estree.mjs";
import prettierPluginHtml from "https://unpkg.com/prettier@3.5.0/plugins/html.mjs";
console.log(
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
Expand Down
56 changes: 52 additions & 4 deletions website/versioned_docs/version-stable/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 `.prettierrc` file written in JSON or YAML.
- 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.mjs`, or `prettier.config.mjs` 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.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`, `prettier.config.mjs`, `.prettierrc.mts`, or `prettier.config.mts` file that exports an object using `export default`.
- A `.prettierrc.cjs`, `prettier.config.cjs`, `.prettierrc.cts`, or `prettier.config.cts` file that exports an object using `module.exports`.
- 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.

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).

### 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

JSON:
Expand Down Expand Up @@ -70,6 +90,34 @@ const 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
Expand Down Expand Up @@ -171,7 +219,7 @@ You can also switch to the `flow` parser instead of the default `babel` for .js

## 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

Expand Down
2 changes: 2 additions & 0 deletions website/versioned_docs/version-stable/ignore.md
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,8 @@ This type of ignore is only allowed to be used in top-level and aimed to disable
<!-- 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

To ignore a part of a YAML file, `# prettier-ignore` should be placed on the line immediately above the ignored node:
Expand Down
28 changes: 28 additions & 0 deletions website/versioned_docs/version-stable/options.md
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,17 @@ Valid options:
| ------- | -------------------------- | ------------------------------- |
| `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

Specify the line length that the printer will wrap on.
Expand Down Expand Up @@ -156,6 +167,23 @@ Valid options:
| ------- | ---------------------- | ------------------------ |
| `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

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).
Expand Down
8 changes: 5 additions & 3 deletions website/versioned_docs/version-stable/rationale.md
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,11 @@ It turns out that empty lines are very hard to automatically generate. The appro

### 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
const user = {
Expand All @@ -55,7 +57,7 @@ const user = { name: "John Doe",
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 -->
```js
Expand Down

0 comments on commit 7584432

Please sign in to comment.