testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Release 3.9.0

Browse Source
This commit is contained in:
fisker committed 2026-06-27 18:23:17 +08:00
1 parent 165423ceb3
commit 8171cf4c11
17 files changed
+181 -147
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.github/ISSUE_TEMPLATE/formatting.md
+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.8.5**
**Prettier 3.9.0**
[Playground link](https://prettier.io/playground/#.....)
```sh
.github/ISSUE_TEMPLATE/integration.md
+1 -1
View File
@@ -20,7 +20,7 @@ BEFORE SUBMITTING AN ISSUE:
**Environments:**
- Prettier Version: 3.8.5
- Prettier Version: 3.9.0
- Running Prettier via: <!-- CLI, Node.js API, Browser API, etc. -->
- Runtime: <!-- Node.js v14, Chrome v83, etc. -->
- Operating System: <!-- Windows, Linux, macOS, etc. -->
CHANGELOG.md
+6
View File
@@ -1,3 +1,9 @@
# 3.9.0
[diff](https://github.com/prettier/prettier/compare/3.8.5...3.9.0)
🔗 [Release Notes](https://prettier.io/blog/2026/06/27/3.9.0)
# 3.8.5
[diff](https://github.com/prettier/prettier/compare/3.8.4...3.8.5)
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "prettier",
"version": "3.9.0-dev",
"version": "3.9.0",
"description": "Prettier is an opinionated code formatter",
"bin": "./bin/prettier.cjs",
"repository": "prettier/prettier",
website/versioned_docs/version-stable/browser.md
+20 -20
View File
@@ -21,7 +21,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.8.5/plugins](https://unpkg.com/browse/prettier@3.8.5/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.9.0/plugins](https://unpkg.com/browse/prettier@3.9.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.
@@ -32,8 +32,8 @@ See below for examples.
### Global
```html
<script src="https://unpkg.com/prettier@3.8.5/standalone.js"></script>
<script src="https://unpkg.com/prettier@3.8.5/plugins/graphql.js"></script>
<script src="https://unpkg.com/prettier@3.9.0/standalone.js"></script>
<script src="https://unpkg.com/prettier@3.9.0/plugins/graphql.js"></script>
<script>
(async () => {
const formatted = await prettier.format("type Query { hello: String }", {
@@ -50,8 +50,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.8.5/standalone.mjs";
import * as prettierPluginGraphql from "https://unpkg.com/prettier@3.8.5/plugins/graphql.mjs";
import * as prettier from "https://unpkg.com/prettier@3.9.0/standalone.mjs";
import * as prettierPluginGraphql from "https://unpkg.com/prettier@3.9.0/plugins/graphql.mjs";
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
@@ -64,8 +64,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
```js
define([
"https://unpkg.com/prettier@3.8.5/standalone.js",
"https://unpkg.com/prettier@3.8.5/plugins/graphql.js",
"https://unpkg.com/prettier@3.9.0/standalone.js",
"https://unpkg.com/prettier@3.9.0/plugins/graphql.js",
], async (prettier, ...plugins) => {
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
@@ -78,12 +78,12 @@ define([
```js
const prettier = require("prettier/standalone");
const plugins = [require("prettier/plugins/graphql")];
const prettierPluginGraphql = require("prettier/plugins/graphql");
(async () => {
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
plugins,
plugins: [prettierPluginGraphql],
});
})();
```
@@ -96,8 +96,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
<TabItem value="module" label="Module worker">
```js
import * as prettier from "https://unpkg.com/prettier@3.8.5/standalone.mjs";
import * as prettierPluginGraphql from "https://unpkg.com/prettier@3.8.51/plugins/graphql.mjs";
import * as prettier from "https://unpkg.com/prettier@3.9.0/standalone.mjs";
import * as prettierPluginGraphql from "https://unpkg.com/prettier@3.9.01/plugins/graphql.mjs";
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
@@ -110,8 +110,8 @@ const formatted = await prettier.format("type Query { hello: String }", {
```js
importScripts(
"https://unpkg.com/prettier@3.8.5/standalone.js",
"https://unpkg.com/prettier@3.8.5/plugins/graphql.js",
"https://unpkg.com/prettier@3.9.0/standalone.js",
"https://unpkg.com/prettier@3.9.0/plugins/graphql.js",
);
(async () => {
@@ -131,9 +131,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.8.5/standalone.mjs";
import * as prettierPluginBabel from "https://unpkg.com/prettier@3.8.5/plugins/babel.mjs";
import * as prettierPluginEstree from "https://unpkg.com/prettier@3.8.5/plugins/estree.mjs";
import * as prettier from "https://unpkg.com/prettier@3.9.0/standalone.mjs";
import * as prettierPluginBabel from "https://unpkg.com/prettier@3.9.0/plugins/babel.mjs";
import * as prettierPluginEstree from "https://unpkg.com/prettier@3.9.0/plugins/estree.mjs";
console.log(
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -149,10 +149,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.8.5/standalone.mjs";
import * as prettierPluginBabel from "https://unpkg.com/prettier@3.8.5/plugins/babel.mjs";
import * as prettierPluginEstree from "https://unpkg.com/prettier@3.8.5/plugins/estree.mjs";
import * as prettierPluginHtml from "https://unpkg.com/prettier@3.8.5/plugins/html.mjs";
import * as prettier from "https://unpkg.com/prettier@3.9.0/standalone.mjs";
import * as prettierPluginBabel from "https://unpkg.com/prettier@3.9.0/plugins/babel.mjs";
import * as prettierPluginEstree from "https://unpkg.com/prettier@3.9.0/plugins/estree.mjs";
import * as prettierPluginHtml from "https://unpkg.com/prettier@3.9.0/plugins/html.mjs";
console.log(
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
website/versioned_docs/version-stable/ci.md
+2 -2
View File
@@ -9,7 +9,7 @@ To apply autofix for Prettier from GitHub Actions, do the following:
1. Install the [`autofix.ci`](https://github.com/apps/autofix-ci) GitHub App.
1. Make sure you have a **pinned** version of Prettier installed in your repository.
1. Create `.github/workflows/prettier.yml` with following content:
1. Create `.github/workflows/prettier.yml` with the following content:
```yaml title=".github/workflows/prettier.yml"
name: autofix.ci
@@ -31,4 +31,4 @@ To apply autofix for Prettier from GitHub Actions, do the following:
commit-message: "Apply Prettier format"
```
For more information see [autofix.ci](https://autofix.ci/) website.
For more information, see [autofix.ci](https://autofix.ci/) website.
website/versioned_docs/version-stable/cli.md
+4 -3
View File
@@ -11,7 +11,7 @@ prettier [options] [file/dir/glob ...]
:::note
To run your locally installed version of Prettier, prefix the command with `npx`, `yarn exec`, `pnpm exec`, or `bunx`, i.e. `npx prettier --help`, `yarn exec prettier --help`, `pnpm exec prettier --help`, or `bunx prettier --help`.
To run your locally installed version of Prettier, prefix the command with `npx`, `yarn exec`, `pnpm exec`, `bunx`, or `deno x`, i.e. `npx prettier --help`, `yarn exec prettier --help`, `pnpm exec prettier --help`, `bunx prettier --help`, or `deno x prettier --help`.
:::
@@ -126,8 +126,9 @@ If you don’t have a configuration file, or want to ignore it if it does exist,
## `--ignore-path`
Path to a file containing patterns that describe files to ignore. By default, Prettier looks for `./.gitignore` and `./.prettierignore`.\
Multiple values are accepted.
Path to a file containing patterns that describe files to ignore. By default, Prettier looks for `./.gitignore` and `./.prettierignore`.
Multiple values are accepted by providing multiple `--ignore-path` options: `prettier --ignore-path=foo-ignore --ignore-path=bar-ignore`. Specifying an `--ignore-path` overrides the default rather than adding to it, so to add a new ignore file while keeping `./.gitignore` and `./.prettierignore` as well, specify `prettier --ignore-path=.gitignore --ignore-path=.prettierignore --ignore-path=foo-ignore`.
## `--list-different`
website/versioned_docs/version-stable/configuration.md
+13 -23
View File
@@ -43,7 +43,7 @@ NODE_OPTIONS="--experimental-strip-types" prettier . --write
JSON:
```json
```json title=".prettierrc.json or .prettierrc"
{
"trailingComma": "es5",
"tabWidth": 4,
@@ -54,9 +54,7 @@ JSON:
JS (ES Modules):
```js
// prettier.config.js, .prettierrc.js, prettier.config.mjs, or .prettierrc.mjs
```js title="prettier.config.mjs, .prettierrc.mjs, prettier.config.js, or .prettierrc.js"
/**
* @see https://prettier.io/docs/configuration
* @type {import("prettier").Config}
@@ -73,9 +71,7 @@ export default config;
JS (CommonJS):
```js
// prettier.config.js, .prettierrc.js, prettier.config.cjs, or .prettierrc.cjs
```js title="prettier.config.cjs, .prettierrc.cjs, prettier.config.js, or .prettierrc.js"
/**
* @see https://prettier.io/docs/configuration
* @type {import("prettier").Config}
@@ -92,9 +88,7 @@ module.exports = config;
TypeScript (ES Modules):
```ts
// prettier.config.ts, .prettierrc.ts, prettier.config.mts, or .prettierrc.mts
```ts title="prettier.config.mts, .prettierrc.mts, prettier.config.ts, or .prettierrc.ts"
import { type Config } from "prettier";
const config: Config = {
@@ -106,9 +100,7 @@ export default config;
TypeScript (CommonJS):
```ts
// prettier.config.ts, .prettierrc.ts, prettier.config.cts, or .prettierrc.cts
```ts title="prettier.config.cts, .prettierrc.cts, prettier.config.ts, or .prettierrc.ts"
import { type Config } from "prettier";
const config: Config = {
@@ -120,8 +112,7 @@ module.exports = config;
YAML:
```yaml
# .prettierrc or .prettierrc.yaml
```yaml title=".prettierrc, .prettierrc.yml, or .prettierrc.yaml"
trailingComma: "es5"
tabWidth: 4
semi: false
@@ -130,8 +121,7 @@ singleQuote: true
TOML:
```toml
# .prettierrc.toml
```toml title=".prettierrc.toml"
trailingComma = "es5"
tabWidth = 4
semi = false
@@ -144,7 +134,7 @@ Overrides let you have different configuration for certain file extensions, fold
JSON:
```json
```json title=".prettierrc"
{
"semi": false,
"overrides": [
@@ -166,7 +156,7 @@ JSON:
YAML:
```yaml
```yaml title=".prettierrc"
semi: false
overrides:
- files: "*.test.js"
@@ -187,7 +177,7 @@ By default, Prettier automatically infers which parser to use based on the input
For example, to get Prettier to format its own `.prettierrc` file, you can do:
```json
```json title=".prettierrc"
{
"overrides": [
{
@@ -200,7 +190,7 @@ For example, to get Prettier to format its own `.prettierrc` file, you can do:
You can also switch to the `flow` parser instead of the default `babel` for .js files:
```json
```json title=".prettierrc"
{
"overrides": [
{
@@ -231,7 +221,7 @@ Unlike the EditorConfig spec, the search for `.editorconfig` file will stop on t
Here’s an annotated description of how different properties map to Prettier’s behavior:
```ini
```ini title=".editorconfig"
# Stop the editor from looking for .editorconfig files in the parent directories
# root = true
@@ -252,7 +242,7 @@ max_line_length = 80
Here’s a copy+paste-ready `.editorconfig` file if you use the default options:
```ini
```ini title=".editorconfig"
[*]
charset = utf-8
insert_final_newline = true
website/versioned_docs/version-stable/ignore.md
+6 -6
View File
@@ -58,15 +58,15 @@ For example:
matrix(
1, 0, 0,
0, 1, 0,
0, 0, 1
)
0, 0, 1,
);
// prettier-ignore
matrix(
1, 0, 0,
0, 1, 0,
0, 0, 1
)
0, 0, 1,
);
```
will be transformed to:
@@ -78,8 +78,8 @@ matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);
matrix(
1, 0, 0,
0, 1, 0,
0, 0, 1
)
0, 0, 1,
);
```
## JSX
website/versioned_docs/version-stable/index.md
+4 -1
View File
@@ -13,11 +13,13 @@ Prettier is an opinionated code formatter with support for:
- [TypeScript](https://www.typescriptlang.org/)
- CSS, [Less](https://lesscss.org/), and [SCSS](https://sass-lang.com)
- [HTML](https://en.wikipedia.org/wiki/HTML)
- [Ember/Handlebars](https://handlebarsjs.com/)
- [Ember/Handlebars](https://emberjs.com/)
- [JSON](https://json.org/)
- [GraphQL](https://graphql.org/)
- [Markdown](https://commonmark.org/), including [GFM](https://github.github.com/gfm/) and [MDX v1](https://mdxjs.com/)
- [YAML](https://yaml.org/)
- [Lightning Web Components (LWC)](https://developer.salesforce.com/developer-centers/lightning-web-components)
- [MJML](https://mjml.io/)
It removes all original styling[\*](#footnotes) and ensures that all outputted code conforms to a consistent style. (See this [blog post](https://jlongster.com/A-Prettier-Formatter))
@@ -25,6 +27,7 @@ Prettier takes your code and reprints it from scratch by taking the line length
For example, take the following code:
<!-- prettier-ignore -->
```js
foo(arg1, arg2, arg3, arg4);
```
website/versioned_docs/version-stable/install.md
+33 -4
View File
@@ -12,28 +12,35 @@ First, install Prettier locally:
<TabItem value="npm">
```bash
npm install --save-dev --save-exact prettier
npm install --save-dev --save-exact prettier@3.9.0
```
</TabItem>
<TabItem value="yarn">
```bash
yarn add --dev --exact prettier
yarn add --dev --exact prettier@3.9.0
```
</TabItem>
<TabItem value="pnpm">
```bash
pnpm add --save-dev --save-exact prettier
pnpm add --save-dev --save-exact prettier@3.9.0
```
</TabItem>
<TabItem value="bun">
```bash
bun add --dev --exact prettier
bun add --dev --exact prettier@3.9.0
```
</TabItem>
<TabItem value="deno">
```bash
deno install --dev --save-exact prettier@3.9.0
```
</TabItem>
@@ -136,6 +143,19 @@ If you forget to install Prettier first, `bunx` will temporarily download the la
:::
</TabItem>
<TabItem value="deno">
```bash
deno x prettier . --write
```
:::info
What is `deno x` doing at the start? It runs the locally installed Prettier. We’ll leave off the `deno x` part for brevity throughout the rest of this file!
:::
</TabItem>
</Tabs>
@@ -219,6 +239,15 @@ bunx husky init
bun --eval "fs.writeFileSync('.husky/pre-commit','bunx lint-staged\n')"
```
</TabItem>
<TabItem value="deno">
```bash
deno install --dev husky lint-staged
deno x husky init
deno eval "Deno.writeTextFileSync('.husky/pre-commit','deno x lint-staged\n')"
```
</TabItem>
</Tabs>
website/versioned_docs/version-stable/option-philosophy.md
+1 -1
View File
@@ -27,7 +27,7 @@ So why are there any options at all?
Options that are easier to motivate include:
- `--trailing-comma es5` lets you use trailing commas in most environments without having to transpile (trailing function commas were added in ES2017).
- `--trailing-comma=es5` lets you use trailing commas in most environments without having to transpile (trailing function commas were added in ES2017).
- `--prose-wrap` is important to support all quirky Markdown renderers in the wild.
- `--html-whitespace-sensitivity` is needed due to the unfortunate whitespace rules of HTML.
- `--end-of-line` makes it easier for teams to keep CRLFs out of their git repositories.
website/versioned_docs/version-stable/options.md
+1 -1
View File
@@ -317,7 +317,7 @@ Valid options:
- `"json"` (via [@babel/parser parseExpression](https://babeljs.io/docs/babel-parser#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_
- `"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"` (parse like `JSON.parse()` except it's less strict, whitespace resembles `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_
- `"markdown"` (via [remark-parse](https://github.com/wooorm/remark/tree/main/packages/remark-parse)) _First available in v1.8.0_
- `"mdx"` (via [remark-parse](https://github.com/wooorm/remark/tree/main/packages/remark-parse) and [@mdx-js/mdx](https://github.com/mdx-js/mdx/tree/master/packages/mdx)) _First available in v1.15.0_
website/versioned_docs/version-stable/plugins.md
+27 -19
View File
@@ -24,18 +24,28 @@ You can load plugins with:
- The [API](api.md), via the `plugins` options:
```js
import * as prettierPluginFoo from "prettier-plugin-foo";
await prettier.format("code", {
parser: "foo",
plugins: ["prettier-plugin-foo"],
plugins: [prettierPluginFoo],
});
```
- The [Configuration File](configuration.md):
```json
{
"plugins": ["prettier-plugin-foo"]
}
```js title="prettier.config.mjs"
import * as prettierPluginFoo from "prettier-plugin-foo";
/**
* @see https://prettier.io/docs/configuration
* @type {import("prettier").Config}
*/
const config = {
plugins: [prettierPluginFoo],
};
export default config;
```
Strings provided to `plugins` are ultimately passed to [`import()` expression](https://nodejs.org/api/esm.html#import-expressions), so you can provide a module/package name, a path, or anything else `import()` takes.
@@ -525,15 +535,14 @@ The `--debug-print-comments` CLI flag can help with debugging comment attachment
Example:
```js
export default {
// ... plugin implementation
options: {
openingBraceNewLine: {
type: "boolean",
category: "Global",
default: true,
description: "Move open brace for code blocks onto new line.",
},
// ... plugin implementation
export const options = {
openingBraceNewLine: {
type: "boolean",
category: "Global",
default: true,
description: "Move open brace for code blocks onto new line.",
},
};
```
@@ -543,11 +552,10 @@ export default {
If your plugin requires different default values for some of Prettier’s core options, you can specify them in `defaultOptions`:
```js
export default {
// ... plugin implementation
defaultOptions: {
tabWidth: 4,
},
// ... plugin implementation
export const defaultOptions = {
tabWidth: 4,
};
```
website/versioned_docs/version-stable/precommit.md
+25 -7
View File
@@ -33,7 +33,7 @@ Install it along with [simple-git-hooks](https://github.com/toplenboren/simple-g
```bash
npm install --save-dev simple-git-hooks pretty-quick
echo '{\n "pre-commit": "npx pretty-quick --staged"\n}\n' > .simple-git-hooks.json
node --eval "fs.writeFileSync('.simple-git-hooks.json',JSON.stringify({'pre-commit':'npx pretty-quick --staged'},undefined,2)+'\n')"
npx simple-git-hooks
```
@@ -42,7 +42,7 @@ npx simple-git-hooks
```bash
yarn add --dev simple-git-hooks pretty-quick
echo '{\n "pre-commit": "yarn pretty-quick --staged"\n}\n' > .simple-git-hooks.json
node --eval "fs.writeFileSync('.simple-git-hooks.json',JSON.stringify({'pre-commit':'yarn pretty-quick --staged'},undefined,2)+'\n')"
yarn simple-git-hooks
```
@@ -51,7 +51,7 @@ yarn simple-git-hooks
```bash
pnpm add --save-dev simple-git-hooks pretty-quick
echo '{\n "pre-commit": "pnpm pretty-quick --staged"\n}\n' > .simple-git-hooks.json
node --eval "fs.writeFileSync('.simple-git-hooks.json',JSON.stringify({'pre-commit':'pnpm pretty-quick --staged'},undefined,2)+'\n')"
pnpm simple-git-hooks
```
@@ -60,10 +60,19 @@ pnpm simple-git-hooks
```bash
bun add --dev simple-git-hooks pretty-quick
echo '{\n "pre-commit": "bun pretty-quick --staged"\n}\n' > .simple-git-hooks.json
node --eval "fs.writeFileSync('.simple-git-hooks.json',JSON.stringify({'pre-commit':'bun pretty-quick --staged'},undefined,2)+'\n')"
bun simple-git-hooks
```
</TabItem>
<TabItem value="deno">
```bash
deno install --dev simple-git-hooks pretty-quick
deno eval "Deno.writeTextFileSync('.simple-git-hooks.json',JSON.stringify({'pre-commit':'deno x pretty-quick --staged'},undefined,2)+'\n')"
deno x simple-git-hooks
```
</TabItem>
</Tabs>
@@ -82,7 +91,7 @@ dotnet husky add pre-commit
after installation you can add prettier task to the `task-runner.json`.
```json
```json title="task-runner.json"
{
"command": "npx",
"args": ["prettier", "--ignore-unknown", "--write", "${staged}"],
@@ -139,6 +148,15 @@ bun add --dev git-format-staged
bun --eval "fs.writeFileSync('.husky/pre-commit', 'git-format-staged -f \'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"\' .\n')"
```
</TabItem>
<TabItem value="deno">
```bash
deno x husky init
deno install --dev git-format-staged
deno eval "Deno.writeTextFileSync('.husky/pre-commit', 'git-format-staged -f \'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"\' .\n')"
```
</TabItem>
</Tabs>
@@ -150,7 +168,7 @@ To read about how git-format-staged works see [Automatic Code Formatting for Par
Alternately you can save this script as `.git/hooks/pre-commit` and give it execute permission:
```sh
```sh title=".git/hooks/pre-commit"
#!/bin/sh
FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')
[ -z "$FILES" ] && exit 0
@@ -168,7 +186,7 @@ If git is reporting that your prettified files are still modified after committi
Add something like the following to `.git/hooks/post-commit`:
```sh
```sh title=".git/hooks/post-commit"
#!/bin/sh
git update-index -g
```
website/versioned_docs/version-stable/rationale.md
+1 -1
View File
@@ -207,7 +207,7 @@ console.log('Running a background task')
})()
```
If you feed this into Prettier, it will not alter the behavior of this code, instead, it will reformat it in a way that shows how this code will actually behave when ran.
If you feed this into Prettier, it will not alter the behavior of this code; instead, it will reformat it in a way that shows how this code will actually behave when run.
```js
console.log("Running a background task")(async () => {
website/versioned_docs/version-stable/sharing-configurations.md
+35 -56
View File
@@ -12,7 +12,7 @@ This page explains how to create, publish and consume a shareable config.
## Creating a Shareable Config
Sharable configs are just [npm packages](https://docs.npmjs.com/about-packages-and-modules#about-packages) that export a single [prettier config file](./configuration.md).
Shareable configs are just [npm packages](https://docs.npmjs.com/about-packages-and-modules#about-packages) that export a single [prettier config file](./configuration.md).
Before we start, make sure you have:
@@ -31,7 +31,7 @@ prettier-config/
Example `package.json`:
```json
```json title="package.json"
{
"name": "@username/prettier-config",
"version": "1.0.0",
@@ -44,13 +44,20 @@ Example `package.json`:
},
"peerDependencies": {
"prettier": ">=3.0.0"
},
"devDependencies": {
"prettier": "3.9.0"
}
}
```
`index.js` is where you put the shared configuration. This file just exports a [regular prettier configuration](./configuration.md) with the same syntax and same options:
```js
```js title="index.js"
/**
* @see https://prettier.io/docs/configuration
* @type {import("prettier").Config}
*/
const config = {
trailingComma: "es5",
tabWidth: 4,
@@ -102,12 +109,19 @@ pnpm add --save-dev @username/prettier-config
bun add --dev @username/prettier-config
```
</TabItem>
<TabItem value="deno">
```bash
deno install --dev @username/prettier-config
```
</TabItem>
</Tabs>
Then, you can reference it in your `package.json`:
```json
```json title="package.json"
{
"name": "my-cool-library",
"version": "1.0.0",
@@ -117,15 +131,15 @@ Then, you can reference it in your `package.json`:
If you don’t want to use `package.json`, you can use any of the supported extensions to export a string, e.g. `.prettierrc`:
```json
```json title=".prettierrc"
"@company/prettier-config"
```
### Extending a Sharable Config
### Extending a Shareable Config
To _extend_ the configuration to overwrite some properties from the shared configuration, import the file in a `.prettierrc.mjs` file and export the modifications, e.g:
To _extend_ the configuration to overwrite some properties from the shared configuration, import the file in a `prettier.config.mjs` file and export the modifications, e.g:
```js
```js title="prettier.config.mjs"
import usernamePrettierConfig from "@username/prettier-config";
/**
@@ -142,64 +156,26 @@ export default config;
## Other examples
### Using Type Annotation in the Shared Config
You can get type safety and autocomplete support in your shared configuration by using a `jsdoc` type annotation:
```js
/**
* @type {import("prettier").Config}
*/
const config = {
trailingComma: "es5",
tabWidth: 4,
semi: false,
singleQuote: true,
};
export default config;
```
In order to make this work, you have to [install `prettier`](./install.md) for the project.
After that, your `package.json` file should look like this:
```diff
{
"name": "@username/prettier-config",
"version": "1.0.0",
"description": "My personal Prettier config",
"type": "module",
"exports": "./index.js",
"license": "MIT",
"publishConfig": {
"access": "public"
},
"peerDependencies": {
"prettier": ">=3.0.0"
},
+ "devDependencies": {
+ "prettier": "^3.3.3"
+ }
}
```
### Include Plugins in Shareable Configurations
In case you want to use [plugins](./plugins.md) in your shared configuration, you need to declare those plugins in the config file's `plugin` array and as `dependencies` in `package.json`:
```js
// index.js
```js title="index.js"
import * as prettierPluginOxc from "@prettier/plugin-oxc";
/**
* @see https://prettier.io/docs/configuration
* @type {import("prettier").Config}
*/
const config = {
singleQuote: true,
plugins: ["prettier-plugin-xml"],
plugins: [prettierPluginOxc],
};
export default config;
```
```diff
// package.json
```diff title="package.json"
{
"name": "@username/prettier-config",
"version": "1.0.0",
@@ -211,10 +187,13 @@ export default config;
"access": "public"
},
+ "dependencies": {
+ "prettier-plugin-xml": "3.4.1"
+ "@prettier/plugin-oxc": "0.1.2"
+ },
"peerDependencies": {
"prettier": ">=3.0.0"
},
"devDependencies": {
"prettier": "3.9.0"
}
}
```