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

Migrate from Docusaurus 1 to Docusaurus 3 (#17043)

Browse Source 
Co-authored-by: fisker Cheung <lionkay@gmail.com>
This commit is contained in:
Lehoczky Zoltánandfisker Cheung authored and GitHub committed 2025-01-30 10:16:21 +08:00
1 parent 3e2f487049
commit 6a612520bc
119 files changed
+9687 -7789
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.github/workflows/lint.yml
-3
View File
@@ -49,9 +49,6 @@ jobs:
- name: Lint Changelog
run: yarn lint:changelog
- name: Lint blog post
run: yarn lint:blog
- name: Lint docs code block
run: yarn prettier "{docs,website/versioned_docs/version-stable}/**/*.md" --check
env:
.gitignore
+1
View File
@@ -18,6 +18,7 @@
/website/i18n
/website/static/playground.js
/website/static/lib
/website/.docusaurus
.DS_Store
/coverage
.idea
cspell.json
+7 -5
View File
@@ -338,11 +338,11 @@
"ve{2,}r{2,}y",
"ve+r+y+long\\w*",
"\\(https?://.*?\\)",
"author: \".*?\"",
"authorURL: \".*?\"",
"\"author\": \".*?\"",
"authors: \".*?\"",
"\"authors\": \".*?\"",
"(long|after){3,}",
"\\\\u\\{[0-9a-fA-F]{4,6}\\}"
"\\\\u\\{[0-9a-fA-F]{4,6}\\}",
"appId: \".*?\""
],
"files": [
"*",
@@ -364,9 +364,11 @@
"website/data/users.yml",
"website/build/**",
"website/playground/codeSamples.mjs",
"website/pages/googlefe164a33bda4034b.html",
"website/static/googlefe164a33bda4034b.html",
"website/static/lib/**",
"website/static/playground.js",
"website/src/css/custom.css",
"website/blog/authors.yml",
"scripts/build/typescript-unused-specifiers.js"
]
}
docs/api.md
+5 -1
View File
@@ -177,6 +177,10 @@ await format("lodash ( )", {
// -> "_();\n"
```
> Note: Overall, doing codemods this way isn’t recommended. Prettier uses the location data of AST nodes for many things like preserving blank lines and attaching comments. When the AST is modified after the parsing, the location data often gets out of sync, which may lead to unpredictable results. Consider using [jscodeshift](https://github.com/facebook/jscodeshift) if you need codemods.
:::note
Overall, doing codemods this way isn’t recommended. Prettier uses the location data of AST nodes for many things like preserving blank lines and attaching comments. When the AST is modified after the parsing, the location data often gets out of sync, which may lead to unpredictable results. Consider using [jscodeshift](https://github.com/facebook/jscodeshift) if you need codemods.
:::
As part of the removed Custom parser API, it was previously possible to pass a path to a module exporting a `parse` function via the `--parser` option. Use the `--plugin` CLI option or the `plugins` API option instead to [load plugins](plugins.md#using-plugins).
docs/browser.md
+1 -1
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.
- **`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@%PRETTIER_VERSION%/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@%PRETTIER_VERSION%/plugins](https://unpkg.com/browse/prettier@%PRETTIER_VERSION%/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.
docs/cli.md
+20 -4
View File
@@ -9,7 +9,11 @@ Use the `prettier` command to run Prettier from the command line.
prettier [options] [file/dir/glob ...]
```
> To run your locally installed version of Prettier, prefix the command with `npx` or `yarn` (if you use Yarn), i.e. `npx prettier --help`, or `yarn prettier --help`.
:::note
To run your locally installed version of Prettier, prefix the command with `npx` or `yarn` (if you use Yarn), i.e. `npx prettier --help`, or `yarn prettier --help`.
:::
To format a file in-place, use `--write`. (Note: This overwrites your files!)
@@ -29,9 +33,17 @@ A more complicated example:
prettier docs package.json "{app,__{tests,mocks}__}/**/*.js" --write --single-quote --trailing-comma all
```
> Don’t forget the **quotes** around the globs! The quotes make sure that Prettier CLI expands the globs rather than your shell, which is important for cross-platform usage.
:::warning
> It’s better to use a [configuration file](configuration.md) for formatting options like `--single-quote` and `--trailing-comma` instead of passing them as CLI flags. This way the Prettier CLI, [editor integrations](editors.md), and other tooling can all know what options you use.
Don’t forget the **quotes** around the globs! The quotes make sure that Prettier CLI expands the globs rather than your shell, which is important for cross-platform usage.
:::
:::note
It’s better to use a [configuration file](configuration.md) for formatting options like `--single-quote` and `--trailing-comma` instead of passing them as CLI flags. This way the Prettier CLI, [editor integrations](editors.md), and other tooling can all know what options you use.
:::
## File patterns
@@ -222,7 +234,11 @@ Running Prettier without `--cache` will delete the cache.
Also, since the cache file is stored in `./node_modules/.cache/prettier/.prettier-cache`, so you can use `rm ./node_modules/.cache/prettier/.prettier-cache` to remove it manually.
> Plugins version and implementation are not used as cache keys. We recommend that you delete the cache when updating plugins.
:::warning
Plugins version and implementation are not used as cache keys. We recommend that you delete the cache when updating plugins.
:::
## `--cache-location`
docs/configuration.md
+6 -2
View File
@@ -13,7 +13,11 @@ You can configure Prettier via (in order of precedence):
- A `.prettierrc.cjs`, `prettier.config.cjs`, `.prettierrc.cts`, or `prettier.config.cts` file that exports an object using `module.exports`.
- A `.prettierrc.toml` file.
> TypeScript configuration files support requires [additional setup](#typescript-configuration-files)
:::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.
@@ -215,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
docs/for-enterprise.md
+5 -5
View File
@@ -7,10 +7,10 @@ title: For Enterprise
Tidelift is working with the maintainers of Prettier and thousands of other open source projects to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use.
<a class="button" href="https://tidelift.com/subscription/pkg/npm-prettier?utm_source=npm-prettier&utm_medium=referral&utm_campaign=enterprise">Learn more</a>
<a class="button" href="https://tidelift.com/subscription/request-a-demo?utm_source=npm-prettier&utm_medium=referral&utm_campaign=enterprise">Request a demo</a>
<a class="button button--primary" href="https://tidelift.com/subscription/pkg/npm-prettier?utm_source=npm-prettier&utm_medium=referral&utm_campaign=enterprise">Learn more</a>
<a class="button button--primary" href="https://tidelift.com/subscription/request-a-demo?utm_source=npm-prettier&utm_medium=referral&utm_campaign=enterprise">Request a demo</a>
<br>
<br />
### Enterprise-ready open source software—managed for you
@@ -44,5 +44,5 @@ Tidelift works with GitHub, GitLab, BitBucket, and more. We support every cloud
The end result? All of the capabilities you expect from commercial-grade software, for the full breadth of open source you use. That means less time grappling with esoteric open source trivia, and more time building your own applications—and your business.
<a class="button" href="https://tidelift.com/subscription/pkg/npm-prettier?utm_source=npm-prettier&utm_medium=referral&utm_campaign=enterprise">Learn more</a>
<a class="button" href="https://tidelift.com/subscription/request-a-demo?utm_source=npm-prettier&utm_medium=referral&utm_campaign=enterprise">Request a demo</a>
<a class="button button--primary" href="https://tidelift.com/subscription/pkg/npm-prettier?utm_source=npm-prettier&utm_medium=referral&utm_campaign=enterprise">Learn more</a>
<a class="button button--primary" href="https://tidelift.com/subscription/request-a-demo?utm_source=npm-prettier&utm_medium=referral&utm_campaign=enterprise">Request a demo</a>
docs/index.md
+2 -2
View File
@@ -51,9 +51,9 @@ Prettier enforces a consistent code **style** (i.e. code formatting that won’t
If you want to learn more, these two conference talks are great introductions:
[![A Prettier Printer by James Long on React Conf 2017](/docs/assets/youtube-cover/a-prettier-printer-by-james-long-on-react-conf-2017.png)](https://www.youtube.com/watch?v=hkfBvpEfWdA)
[![A Prettier Printer by James Long on React Conf 2017](/images/youtube-cover/a-prettier-printer-by-james-long-on-react-conf-2017.png)](https://www.youtube.com/watch?v=hkfBvpEfWdA)
[![JavaScript Code Formatting by Christopher Chedeau on React London 2017](/docs/assets/youtube-cover/javascript-code-formatting-by-christopher-chedeau-on-react-london-2017.png)](https://www.youtube.com/watch?v=0Q4kUNx85_4)
[![JavaScript Code Formatting by Christopher Chedeau on React London 2017](/images/youtube-cover/javascript-code-formatting-by-christopher-chedeau-on-react-london-2017.png)](https://www.youtube.com/watch?v=0Q4kUNx85_4)
#### Footnotes
docs/install.md
+102 -51
View File
@@ -3,34 +3,41 @@ id: install
title: Install
---
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
First, install Prettier locally:
<!--DOCUSAURUS_CODE_TABS-->
<!--npm-->
<Tabs groupId="package-manager">
<TabItem value="npm">
```bash
npm install --save-dev --save-exact prettier
```
<!--yarn-->
</TabItem>
<TabItem value="yarn">
```bash
yarn add --dev --exact prettier
```
<!--pnpm-->
</TabItem>
<TabItem value="pnpm">
```bash
pnpm add --save-dev --save-exact prettier
```
<!--bun-->
</TabItem>
<TabItem value="bun">
```bash
bun add --dev --exact prettier
```
<!--END_DOCUSAURUS_CODE_TABS-->
</TabItem>
</Tabs>
Then, create an empty config file to let editors and other tools know you are using Prettier:
@@ -51,48 +58,76 @@ Next, create a [.prettierignore](ignore.md) file to let the Prettier CLI and edi
node --eval "fs.writeFileSync('.prettierignore','# Ignore artifacts:\nbuild\ncoverage\n')"
```
> Tip! Prettier will follow rules specified in .gitignore if it exists in the same directory from which it is run. You can also base your .prettierignore on .eslintignore (if you have one).
:::tip
> Another tip! If your project isn’t ready to format, say, HTML files yet, add `*.html`.
Prettier will follow rules specified in .gitignore if it exists in the same directory from which it is run. You can also base your .prettierignore on .eslintignore (if you have one).
:::
:::tip[Another tip]
If your project isn’t ready to format, say, HTML files yet, add `*.html`.
:::
Now, format all files with Prettier:
<!--DOCUSAURUS_CODE_TABS-->
<!--npm-->
<Tabs groupId="package-manager">
<TabItem value="npm">
```bash
npx prettier . --write
```
> What is that `npx` thing? `npx` ships with `npm` and lets you run locally installed tools. We’ll leave off the `npx` part for brevity throughout the rest of this file!
>
> Note: If you forget to install Prettier first, `npx` will temporarily download the latest version. That’s not a good idea when using Prettier, because we change how code is formatted in each release! It’s important to have a locked down version of Prettier in your `package.json`. And it’s faster, too.
:::info
<!--yarn-->
What is that `npx` thing? `npx` ships with `npm` and lets you run locally installed tools. We’ll leave off the `npx` part for brevity throughout the rest of this file!
Note: If you forget to install Prettier first, `npx` will temporarily download the latest version. That’s not a good idea when using Prettier, because we change how code is formatted in each release! It’s important to have a locked down version of Prettier in your `package.json`. And it’s faster, too.
:::
</TabItem>
<TabItem value="yarn">
```bash
yarn prettier . --write
```
> What is `yarn` doing at the start? `yarn prettier` runs the locally installed version of Prettier. We’ll leave off the `yarn` part for brevity throughout the rest of this file!
:::info
<!--pnpm-->
What is `yarn` doing at the start? `yarn prettier` runs the locally installed version of Prettier. We’ll leave off the `yarn` part for brevity throughout the rest of this file!
:::
</TabItem>
<TabItem value="pnpm">
```bash
pnpm exec prettier . --write
```
> What is `pnpm` doing at the start? `pnpm prettier` runs the locally installed version of Prettier. We’ll leave off the `pnpm` part for brevity throughout the rest of this file!
:::info
<!--bun-->
What is `pnpm` doing at the start? `pnpm prettier` runs the locally installed version of Prettier. We’ll leave off the `pnpm` part for brevity throughout the rest of this file!
:::
</TabItem>
<TabItem value="bun">
```bash
bun prettier . --write
```
> What is `bun` doing at the start? `bun prettier` runs the locally installed version of Prettier. We’ll leave off the `bun` part for brevity throughout the rest of this file!
:::info
<!--END_DOCUSAURUS_CODE_TABS-->
What is `bun` doing at the start? `bun prettier` runs the locally installed version of Prettier. We’ll leave off the `bun` part for brevity throughout the rest of this file!
:::
</TabItem>
</Tabs>
`prettier --write .` is great for formatting everything, but for a big project it might take a little while. You may run `prettier --write app/` to format a certain directory, or `prettier --write app/components/Button.js` to format a certain file. Or use a _glob_ like `prettier --write "app/**/*.test.js"` to format all tests in a directory (see [fast-glob](https://github.com/mrmlnc/fast-glob#pattern-syntax) for supported glob syntax).
@@ -110,9 +145,13 @@ Formatting from the command line is a good way to get started, but you get the m
See [Editor Integration](editors.md) for how to set up your editor. If your editor does not support Prettier, you can instead [run Prettier with a file watcher](watching-files.md).
> **Note:** Don’t skip the regular local install! Editor plugins will pick up your local version of Prettier, making sure you use the correct version in every project. (You wouldn’t want your editor accidentally causing lots of changes because it’s using a newer version of Prettier than your project!)
>
> And being able to run Prettier from the command line is still a good fallback, and needed for CI setups.
:::note
Don’t skip the regular local install! Editor plugins will pick up your local version of Prettier, making sure you use the correct version in every project. (You wouldn’t want your editor accidentally causing lots of changes because it’s using a newer version of Prettier than your project!)
And being able to run Prettier from the command line is still a good fallback, and needed for CI setups.
:::
## ESLint (and other linters)
@@ -128,42 +167,50 @@ For example, you can do the following to have Prettier run before each commit:
1. Install [husky](https://github.com/typicode/husky) and [lint-staged](https://github.com/okonet/lint-staged):
<!--DOCUSAURUS_CODE_TABS-->
<!--npm-->
<Tabs groupId="package-manager">
<TabItem value="npm">
```bash
npm install --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"
```
```bash
npm install --save-dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"
```
<!--yarn-->
</TabItem>
<TabItem value="yarn">
```bash
yarn add --dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','yarn lint-staged\n')"
```
```bash
yarn add --dev husky lint-staged
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','yarn lint-staged\n')"
```
> If you use Yarn 2, see https://typicode.github.io/husky/#/?id=yarn-2
:::note
<!--pnpm-->
If you use Yarn 2, see https://typicode.github.io/husky/#/?id=yarn-2
```bash
pnpm add --save-dev husky lint-staged
pnpm exec husky init
node --eval "fs.writeFileSync('.husky/pre-commit','pnpm exec lint-staged\n')"
```
:::
<!--bun-->
</TabItem>
<TabItem value="pnpm">
```bash
bun add --dev husky lint-staged
bunx husky init
bun --eval "fs.writeFileSync('.husky/pre-commit','bunx lint-staged\n')"
```
```bash
pnpm add --save-dev husky lint-staged
pnpm exec husky init
node --eval "fs.writeFileSync('.husky/pre-commit','pnpm exec lint-staged\n')"
```
<!--END_DOCUSAURUS_CODE_TABS-->
</TabItem>
<TabItem value="bun">
```bash
bun add --dev husky lint-staged
bunx husky init
bun --eval "fs.writeFileSync('.husky/pre-commit','bunx lint-staged\n')"
```
</TabItem>
</Tabs>
2. Add the following to your `package.json`:
@@ -175,7 +222,11 @@ For example, you can do the following to have Prettier run before each commit:
}
```
> Note: If you use ESLint, make sure lint-staged runs it before Prettier, not after.
:::note
If you use ESLint, make sure lint-staged runs it before Prettier, not after.
:::
See [Pre-commit Hook](precommit.md) for more information.
docs/option-philosophy.md
+7 -3
View File
@@ -3,9 +3,13 @@ id: option-philosophy
title: Option Philosophy
---
> Prettier has a few options because of history. **But we won’t add more of them.**
>
> Read on to learn more.
:::info
Prettier has a few options because of history. **But we won’t add more of them.**
Read on to learn more.
:::
Prettier is not a kitchen-sink code formatter that attempts to print your code in any way you wish. It is _opinionated._ Quoting the [Why Prettier?](why-prettier.md) page:
docs/options.md
+46 -38
View File
@@ -29,23 +29,27 @@ 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> |
| 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.
> **For readability we recommend against using more than 80 characters:**
>
> In code styleguides, maximum line length rules are often set to 100 or 120. However, when humans write code, they don’t strive to reach the maximum number of columns on every line. Developers often use whitespace to break up long lines for readability. In practice, the average line length often ends up well below the maximum.
>
> Prettier’s printWidth option does not work the same way. It is not the hard upper allowed line length limit. It is a way to say to Prettier roughly how long you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified printWidth.
>
> Remember, computers are dumb. You need to explicitly tell them what to do, while humans can make their own (implicit) judgements, for example on when to break a line.
>
> In other words, don’t try to use printWidth as if it was ESLint’s [max-len](https://eslint.org/docs/rules/max-len) – they’re not the same. max-len just says what the maximum allowed line length is, but not what the generally preferred length is – which is what printWidth specifies.
:::warning
**For readability we recommend against using more than 80 characters:**
In code styleguides, maximum line length rules are often set to 100 or 120. However, when humans write code, they don’t strive to reach the maximum number of columns on every line. Developers often use whitespace to break up long lines for readability. In practice, the average line length often ends well below the maximum.
Prettier’s printWidth option does not work the same way. It is not the hard upper allowed line length limit. It is a way to say to Prettier roughly how ng you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified printWidth.
Remember, computers are dumb. You need to explicitly tell them what to do, while humans can make their own (implicit) judgements, for example on when break a line.
In other words, don’t try to use printWidth as if it was ESLint’s [max-len](https://eslint.org/docs/rules/max-len) – they’re not the same. max-len just says what the maximum allowed line length is, but not what the generally preferred length is – which is what printWidth specifies.
:::
| Default | CLI Override | API Override |
| ------- | --------------------- | ------------------- |
@@ -115,9 +119,9 @@ Valid options:
- `"consistent"` - If at least one property in an object requires quotes, quote all properties.
- `"preserve"` - Respect the input use of quotes in object properties.
| Default | CLI Override | API Override |
| ------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------- |
| `"as-needed"` | <code>--quote-props <as-needed&#124;consistent&#124;preserve></code> | <code>quoteProps: "<as-needed&#124;consistent&#124;preserve>"</code> |
| Default | CLI Override | API Override |
| ------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------- |
| `"as-needed"` | <code>--quote-props \<as-needed&#124;consistent&#124;preserve></code> | <code>quoteProps: "\<as-needed&#124;consistent&#124;preserve>"</code> |
Note that Prettier never unquotes numeric property names in Angular expressions, TypeScript, and Flow because the distinction between string and numeric keys is significant in these languages. See: [Angular][quote-props-angular], [TypeScript][quote-props-typescript], [Flow][quote-props-flow]. Also Prettier doesn’t unquote numeric properties for Vue (see the [issue][quote-props-vue] about that).
@@ -146,9 +150,9 @@ Valid options:
- `"es5"` - Trailing commas where valid in ES5 (objects, arrays, etc.). Trailing commas in type parameters in TypeScript and Flow.
- `"none"` - No trailing commas.
| Default | CLI Override | API Override |
| ------- | ------------------------------------------------------ | ------------------------------------------------------ |
| `"all"` | <code>--trailing-comma <all&#124;es5&#124;none></code> | <code>trailingComma: "<all&#124;es5&#124;none>"</code> |
| Default | CLI Override | API Override |
| ------- | ------------------------------------------------------- | ------------------------------------------------------- |
| `"all"` | <code>--trailing-comma \<all&#124;es5&#124;none></code> | <code>trailingComma: "\<all&#124;es5&#124;none>"</code> |
## Bracket Spacing
@@ -176,9 +180,9 @@ 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> |
| Default | CLI Override | API Override |
| ------------ | ---------------------------------------------------- | ---------------------------------------------------- |
| `"preserve"` | <code>--object-wrap \<preserve&#124;collapse></code> | <code>objectWrap: "\<preserve&#124;collapse>"</code> |
## Bracket Line
@@ -217,7 +221,11 @@ Valid options:
## [Deprecated] JSX Brackets
_This option has been deprecated in v2.4.0, use --bracket-same-line instead_
:::danger
This option has been deprecated in v2.4.0, use --bracket-same-line instead\_
:::
Put the `>` of a multi-line JSX element at the end of the last line instead of being alone on the next line (does not apply to self closing elements).
@@ -263,9 +271,9 @@ Valid options:
- `"always"` - Always include parens. Example: `(x) => x`
- `"avoid"` - Omit parens when possible. Example: `x => x`
| Default | CLI Override | API Override |
| ---------- | ----------------------------------------------- | ----------------------------------------------- |
| `"always"` | <code>--arrow-parens <always&#124;avoid></code> | <code>arrowParens: "<always&#124;avoid>"</code> |
| Default | CLI Override | API Override |
| ---------- | ------------------------------------------------ | ------------------------------------------------ |
| `"always"` | <code>--arrow-parens \<always&#124;avoid></code> | <code>arrowParens: "\<always&#124;avoid>"</code> |
At first glance, avoiding parentheses may look like a better choice because of less visual noise.
However, when Prettier removes parentheses, it becomes harder to add type annotations, extra arguments or default values as well as making other changes.
@@ -325,7 +333,7 @@ Valid options:
Note: the default value was `"babylon"` until v1.13.0.
Note: the Custom parser API has been removed in v3.0.0. Use [plugins](plugins.md) instead ([how to migrate](api.md#custom-parser-api)).
Note: the Custom parser API has been removed in v3.0.0. Use [plugins](plugins.md) instead ([how to migrate](api.md#custom-parser-api-removed)).
<a name="filepath"></a>
@@ -397,9 +405,9 @@ Valid options:
- `"never"` - Un-wrap each block of prose into one line.
- `"preserve"` - Do nothing, leave prose as-is. _First available in v1.9.0_
| Default | CLI Override | API Override |
| ------------ | ----------------------------------------------------------- | ----------------------------------------------------------- |
| `"preserve"` | <code>--prose-wrap <always&#124;never&#124;preserve></code> | <code>proseWrap: "<always&#124;never&#124;preserve>"</code> |
| Default | CLI Override | API Override |
| ------------ | ------------------------------------------------------------ | ------------------------------------------------------------ |
| `"preserve"` | <code>--prose-wrap \<always&#124;never&#124;preserve></code> | <code>proseWrap: "\<always&#124;never&#124;preserve>"</code> |
## HTML Whitespace Sensitivity
@@ -415,9 +423,9 @@ Valid options:
- `"strict"` - Whitespace (or the lack of it) around all tags is considered significant.
- `"ignore"` - Whitespace (or the lack of it) around all tags is considered insignificant.
| Default | CLI Override | API Override |
| ------- | ------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
| `"css"` | <code>--html-whitespace-sensitivity <css&#124;strict&#124;ignore></code> | <code>htmlWhitespaceSensitivity: "<css&#124;strict&#124;ignore>"</code> |
| Default | CLI Override | API Override |
| ------- | ------------------------------------------------------------------------- | ------------------------------------------------------------------------ |
| `"css"` | <code>--html-whitespace-sensitivity \<css&#124;strict&#124;ignore></code> | <code>htmlWhitespaceSensitivity: "\<css&#124;strict&#124;ignore>"</code> |
## Vue files script and style tags indentation
@@ -466,9 +474,9 @@ Valid options:
- `"auto"` - Maintain existing line endings
(mixed values within one file are normalised by looking at what’s used after the first line)
| Default | CLI Override | API Override |
| ------- | ----------------------------------------------------------- | ---------------------------------------------------------- |
| `"lf"` | <code>--end-of-line <lf&#124;crlf&#124;cr&#124;auto></code> | <code>endOfLine: "<lf&#124;crlf&#124;cr&#124;auto>"</code> |
| Default | CLI Override | API Override |
| ------- | ------------------------------------------------------------ | ----------------------------------------------------------- |
| `"lf"` | <code>--end-of-line \<lf&#124;crlf&#124;cr&#124;auto></code> | <code>endOfLine: "\<lf&#124;crlf&#124;cr&#124;auto>"</code> |
Setting `end_of_line` in an [`.editorconfig` file](https://editorconfig.org/) will configure Prettier’s end of line usage, unless overridden.
@@ -487,9 +495,9 @@ Valid options:
- `"auto"` – Format embedded code if Prettier can automatically identify it.
- `"off"` - Never automatically format embedded code.
| Default | CLI Override | API Override |
| -------- | ----------------------------------------------------------- | ---------------------------------------------------------- |
| `"auto"` | <code>--embedded-language-formatting=<off&#124;auto></code> | <code>embeddedLanguageFormatting: "<off&#124;auto>"</code> |
| Default | CLI Override | API Override |
| -------- | ------------------------------------------------------------ | ----------------------------------------------------------- |
| `"auto"` | <code>--embedded-language-formatting=\<off&#124;auto></code> | <code>embeddedLanguageFormatting: "\<off&#124;auto>"</code> |
## Single Attribute Per Line
docs/plugins.md
+5 -1
View File
@@ -15,7 +15,11 @@ You can load plugins with:
prettier --write main.foo --plugin=prettier-plugin-foo
```
> Tip: You can set `--plugin` options multiple times.
:::tip
You can set `--plugin` options multiple times.
:::
- The [API](api.md), via the `plugins` options:
docs/precommit.md
+13 -6
View File
@@ -3,6 +3,9 @@ id: precommit
title: Pre-commit Hook
---
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
You can use Prettier with a pre-commit tool. This can re-format your files that are marked as “staged” via `git add` before you commit.
## Option 1. [lint-staged](https://github.com/okonet/lint-staged)
@@ -53,8 +56,8 @@ Git-format-staged is used to run any formatter that can accept file content via
Git-format-staged requires Python v3 or v2.7. Python is usually pre-installed on Linux and macOS, but not on Windows. Use git-format-staged with [husky](https://github.com/typicode/husky):
<!--DOCUSAURUS_CODE_TABS-->
<!--npm-->
<Tabs groupId="package-manager">
<TabItem value="npm">
```bash
npx husky init
@@ -62,7 +65,8 @@ npm install --save-dev git-format-staged
node --eval "fs.writeFileSync('.husky/pre-commit', 'git-format-staged -f \'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"\' .\n')"
```
<!--yarn-->
</TabItem>
<TabItem value="yarn">
```bash
yarn husky init
@@ -70,7 +74,8 @@ yarn add --dev git-format-staged
node --eval "fs.writeFileSync('.husky/pre-commit', 'git-format-staged -f \'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"\' .\n')"
```
<!--pnpm-->
</TabItem>
<TabItem value="pnpm">
```bash
pnpm exec husky init
@@ -78,7 +83,8 @@ pnpm add --save-dev git-format-staged
node --eval "fs.writeFileSync('.husky/pre-commit', 'git-format-staged -f \'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"\' .\n')"
```
<!--bun-->
</TabItem>
<TabItem value="bun">
```bash
bunx husky init
@@ -86,7 +92,8 @@ bun add --dev git-format-staged
bun --eval "fs.writeFileSync('.husky/pre-commit', 'git-format-staged -f \'prettier --ignore-unknown --stdin --stdin-filepath \"{}\"\' .\n')"
```
<!--END_DOCUSAURUS_CODE_TABS-->
</TabItem>
</Tabs>
Add or remove file extensions to suit your project. Note that regardless of which extensions you list formatting will respect any `.prettierignore` files in your project.
docs/rationale.md
+10 -8
View File
@@ -13,9 +13,9 @@ The first requirement of Prettier is to output valid code that has the exact sam
### Strings
Double or single quotes? Prettier chooses the one which results in the fewest number of escapes. `"It's gettin' better!"`, not `'It\'s gettin\' better!'`. In case of a tie or the string not containing any quotes, Prettier defaults to double quotes (but that can be changed via the [singleQuote](options.html#quotes) option).
Double or single quotes? Prettier chooses the one which results in the fewest number of escapes. `"It's gettin' better!"`, not `'It\'s gettin\' better!'`. In case of a tie or the string not containing any quotes, Prettier defaults to double quotes (but that can be changed via the [singleQuote](/docs/options#quotes) option).
JSX has its own option for quotes: [jsxSingleQuote](options.html#jsx-quotes).
JSX has its own option for quotes: [jsxSingleQuote](/docs/options#jsx-quotes).
JSX takes its roots from HTML, where the dominant use of quotes for attributes is double quotes. Browser developer tools also follow this convention by always displaying HTML with double quotes, even if the source code uses single quotes. A separate option allows using single quotes for JS and double quotes for "HTML" (JSX).
Prettier maintains the way your string is escaped. For example, `"🙂"` won’t be formatted into `"\uD83D\uDE42"` and vice versa.
@@ -79,11 +79,13 @@ const user = {
[stylesheets]: https://github.com/prettier/prettier/issues/74#issuecomment-275262094
[keyed methods]: https://github.com/prettier/prettier/pull/495#issuecomment-275745434
> #### ♻️ A note on formatting reversibility
>
> The semi-manual formatting for object literals is in fact a workaround, not a feature. It was implemented only because at the time a good heuristic wasn’t found and an urgent fix was needed. However, as a general strategy, Prettier avoids _non-reversible_ formatting like that, so the team is still looking for heuristics that would allow either to remove this behavior completely or at least to reduce the number of situations where it’s applied.
>
> What does **reversible** mean? Once an object literal becomes multiline, Prettier won’t collapse it back. If in Prettier-formatted code, we add a property to an object literal, run Prettier, then change our mind, remove the added property, and then run Prettier again, we might end up with a formatting not identical to the initial one. This useless change might even get included in a commit, which is exactly the kind of situation Prettier was created to prevent.
:::note[A note on formatting reversibility]
The semi-manual formatting for object literals is in fact a workaround, not a feature. It was implemented only because at the time a good heuristic wasn’t found and an urgent fix was needed. However, as a general strategy, Prettier avoids _non-reversible_ formatting like that, so the team is still looking for heuristics that would allow either to remove this behavior completely or at least to reduce the number of situations where it’s applied.
What does **reversible** mean? Once an object literal becomes multiline, Prettier won’t collapse it back. If in Prettier-formatted code, we add a property to an object literal, run Prettier, then change our mind, remove the added property, and then run Prettier again, we might end up with a formatting not identical to the initial one. This useless change might even get included in a commit, which is exactly the kind of situation Prettier was created to prevent.
:::
### Decorators
@@ -228,7 +230,7 @@ console.log("Running a background task")(async () => {
The [printWidth](options.md#print-width) option is more of a guideline to Prettier than a hard rule. It is not the upper allowed line length limit. It is a way to say to Prettier roughly how long you’d like lines to be. Prettier will make both shorter and longer lines, but generally strive to meet the specified print width.
There are some edge cases, such as really long string literals, regexps, comments and variable names, which cannot be broken across lines (without using code transforms which [Prettier doesn’t do](#what-prettier-is-_not_-concerned-about)). Or if you nest your code 50 levels deep your lines are of course going to be mostly indentation :)
There are some edge cases, such as really long string literals, regexps, comments and variable names, which cannot be broken across lines (without using code transforms which [Prettier doesn’t do](#what-prettier-is-not-concerned-about)). Or if you nest your code 50 levels deep your lines are of course going to be mostly indentation :)
Apart from that, there are a few cases where Prettier intentionally exceeds the print width.
docs/sharing-configurations.md
+13 -6
View File
@@ -3,6 +3,9 @@ id: sharing-configurations
title: Sharing configurations
---
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";
In case you have many different projects, it can be helpful to have a **shared configuration** which can be used in all of them, instead of copy-pasting the same config for every project.
This page explains how to create, publish and consume a shareable config.
@@ -71,32 +74,36 @@ npm publish
You first need to install your published configuration, for example:
<!--DOCUSAURUS_CODE_TABS-->
<!--npm-->
<Tabs groupId="package-manager">
<TabItem value="npm">
```bash
npm install --save-dev @username/prettier-config
```
<!--yarn-->
</TabItem>
<TabItem value="yarn">
```bash
yarn add --dev @username/prettier-config
```
<!--pnpm-->
</TabItem>
<TabItem value="pnpm">
```bash
pnpm add --save-dev @username/prettier-config
```
<!--bun-->
</TabItem>
<TabItem value="bun">
```bash
bun add --dev @username/prettier-config
```
<!--END_DOCUSAURUS_CODE_TABS-->
</TabItem>
</Tabs>
Then, you can reference it in your `package.json`:
docs/webstorm.md
+1 -1
View File
@@ -13,7 +13,7 @@ Once it’s done, you can do a few things in your IDE. You can use the **Reforma
You can also configure WebStorm to run Prettier on save (_Cmd+S/Ctrl+S_) or use it as the default formatter (_Opt+Cmd+L/Ctrl+Alt+L_). For this, open _Preferences / Settings | Languages & Frameworks | JavaScript | Prettier_ and tick the corresponding checkbox: **On save** and/or **On ‘Reformat Code’** action.
![Example](/docs/assets/webstorm/prettier-settings.png)
![Example](/images/webstorm/prettier-settings.png)
By default, WebStorm will apply formatting to all _.js, .ts, .jsx_, and _.tsx_ files that you’ve edited in your project. To apply the formatting to other file types, or to limit formatting to files located only in specific directories, you can customize the default configuration by using [glob patterns](https://github.com/isaacs/node-glob).
eslint.config.js
+7
View File
@@ -33,6 +33,7 @@ dist*/
website/build/
website/static/playground.js
website/static/lib/
website/.docusaurus
scripts/benchmark/*/
**/.yarn/**
**/.pnp.*
@@ -467,6 +468,12 @@ export default [
"unicorn/filename-case": "off",
},
},
{
files: ["website/docusaurus.config.js"],
languageOptions: {
sourceType: "module",
},
},
{
files: ["website/playground/**/*"],
languageOptions: {
netlify.toml
+1
View File
@@ -1,5 +1,6 @@
[build]
command = "yarn build:website"
publish = "website/build/"
[build.environment]
NODE_VERSION = "lts/*"
package.json
-1
View File
@@ -176,7 +176,6 @@
"lint:prettier": "prettier . --check --cache",
"lint:spellcheck": "cspell --no-progress --relative --dot --gitignore",
"lint:deps": "node ./scripts/check-deps.js",
"lint:blog": "node ./scripts/lint-blog.js",
"lint:knip": "knip",
"fix": "run-s fix:eslint fix:prettier",
"fix:eslint": "yarn lint:eslint --fix",
scripts/lint-blog.js
-17
View File
@@ -1,17 +0,0 @@
#!/usr/bin/env node
import fs from "node:fs";
const blogPostDir = new URL("../website/blog/", import.meta.url);
const files = fs.readdirSync(blogPostDir);
for (const file of files) {
if (file.endsWith(".md")) {
const fileData = fs.readFileSync(new URL(file, blogPostDir), "utf8");
if (!fileData.includes("<!-- truncate -->")) {
console.error(`${file}: Should include a <!-- truncate --> comment`);
process.exitCode = 1;
}
}
}
website/README.md
+6 -5
View File
@@ -28,9 +28,9 @@ https://prettier.io/
The site is built on [Docusaurus](https://docusaurus.io/), a static site generator for documentation sites.
Its main configuration file is `siteConfig.js` ([docs](https://docusaurus.io/docs/en/site-config)).
Its main configuration file is `docusaurus.config.js` ([docs](https://docusaurus.io/docs/configuration)).
Pages can be added to the site by putting `.js` files with React components in `pages/`. If you want to use code from other files in these pages, be aware of [how `require` works in Docusaurus](https://docusaurus.io/docs/en/api-pages#page-require-paths). It’s also possible to include `.html` files directly. They are served as is and don’t have any of the header, footer, or styles shared by the rest of Docusaurus. This is the way the Playground is hooked up (`pages/playground/index.html`).
Pages can be added to the site by putting `.jsx` files with React components in `src/pages/`. It’s also possible to include `.md` files directly. ([docs](https://docusaurus.io/docs/creating-pages))
Images and other static assets are placed inside the `static` directory: `static/img/your-image.png` is mapped to `http://prettier.io/img/your-image.png`. Any `.css` files in `static/` are concatenated to the standard styles provided by Docusaurus and used site-wide.
@@ -38,6 +38,8 @@ Images and other static assets are placed inside the `static` directory: `static
The Playground is not integrated with the Docusaurus infrastructure. Its UI (`website/playground/`) is built separately with webpack configured to put the resulting bundle in Docusaurus’s `static` directory. The `yarn start` command (in `website/`) concurrently starts both Docusaurus’s local server and webpack in the watch mode for the Playground.
The entry point of the playground is at `static/playground/index.html`.
Another part of the Playground is a web worker where formatting happens. It’s not managed by webpack and resides directly in `static/worker.js`. It expects to find the [UMD bundles of Prettier](https://prettier.io/docs/en/browser.html) in `static/lib/`. That’s why running `yarn build:website` or `PULL_REQUEST=true yarn build:website` in the project root is a required step.
Finally, there is a service worker that caches Prettier’s relatively heavy bundles (`static/service-worker.js`).
@@ -59,7 +61,7 @@ next: doc2 # next doc on the sidebar for navigation
---
```
The docs from `docs/` are published to `https://prettier.io/docs/en/next/` and are considered to be the docs of the next (not yet released) version of Prettier. When a release happens, the docs from `docs/` are copied to the `website/versioned_docs/version-stable` directory, whose content is published to `https://prettier.io/docs/en`.
The docs from `docs/` are published to `https://prettier.io/docs/next/` and are considered to be the docs of the next (not yet released) version of Prettier. When a release happens, the docs from `docs/` are copied to the `website/versioned_docs/version-stable` directory, whose content is published to `https://prettier.io/docs/`.
## Blog
@@ -67,8 +69,7 @@ The `website/blog` directory contains blog posts written in Markdown. Their fron
```yaml
title: Blog Post Title
author: Author Name
authorURL: http://github.com/author # (or some other link)
authors: author declared in `blog/authors.yml`
---
```
website/blog/2017-04-13-1.0.0.md
+1 -2
View File
@@ -1,6 +1,5 @@
---
author: Christopher Chedeau (@vjeux)
authorURL: https://twitter.com/vjeux
authors: "vjeux"
title: Releasing Prettier 1.0
---
website/blog/2017-04-20-1.2.0.md
+1 -2
View File
@@ -1,6 +1,5 @@
---
author: Christopher Chedeau (@vjeux)
authorURL: https://twitter.com/vjeux
authors: "vjeux"
title: Prettier 1.2
---
website/blog/2017-05-03-1.3.0.md
+1 -2
View File
@@ -1,6 +1,5 @@
---
author: Christopher Chedeau (@vjeux)
authorURL: https://twitter.com/vjeux
authors: "vjeux"
title: Prettier 1.3
---
website/blog/2017-06-03-1.4.0.md
+2 -3
View File
@@ -1,6 +1,5 @@
---
author: Christopher Chedeau (@vjeux)
authorURL: https://twitter.com/vjeux
authors: "vjeux"
title: "Prettier 1.4: TypeScript and CSS support"
---
@@ -8,7 +7,7 @@ This release introduces support for TypeScript, CSS, Less, and SCSS languages to
<!-- truncate -->
[![prettier-revolution-conf](/blog/assets/prettier-revolution-conf.png)](https://revolutionconf.com/talk/a-prettier-printer)
[![prettier-revolution-conf](./assets/prettier-revolution-conf.png)](https://revolutionconf.com/talk/a-prettier-printer)
## TypeScript Support
website/blog/2017-06-28-1.5.0.md
+1 -2
View File
@@ -1,6 +1,5 @@
---
author: Christopher Chedeau (@vjeux)
authorURL: https://twitter.com/vjeux
authors: "vjeux"
title: "Prettier 1.5: GraphQL, CSS-in-JS & JSON"
---
website/blog/2017-08-29-1.6.0.md
+2 -3
View File
@@ -1,6 +1,5 @@
---
author: Christopher Chedeau (@vjeux)
authorURL: https://twitter.com/vjeux
authors: "vjeux"
title: "Prettier 1.6: Config File, JSX"
---
@@ -496,7 +495,7 @@ global {
}
```
#### Fix <this.Component /> ([#2472](https://github.com/prettier/prettier/pull/2472)) by [@backus](https://github.com/backus)
#### Fix \<this.Component /> ([#2472](https://github.com/prettier/prettier/pull/2472)) by [@backus](https://github.com/backus)
Thanks to the untyped and permissive nature of JavaScript, we've been able to concat undefined to a string and get some interesting code as a result. Now fixed for this case :)
website/blog/2017-09-15-1.7.0.md
+2 -3
View File
@@ -1,6 +1,5 @@
---
author: @suchipi
authorURL: https://twitter.com/suchipi
authors: "suchipi"
title: "Prettier 1.7: JSX tweaks, Pragma, TypeScript and CSS fixes"
---
@@ -55,7 +54,7 @@ We should print a ternary using JSX mode if:
```
However, this heuristic caused some [unexpected formatting](https://github.com/prettier/prettier/issues/2729):
![GitHub Diff showing a ternary containing internationalization strings appearing inside a JSX element being converted to use JSX-mode style ternaries](/blog/assets/github-diff-ternary-in-jsx.png)
![GitHub Diff showing a ternary containing internationalization strings appearing inside a JSX element being converted to use JSX-mode style ternaries](./assets/github-diff-ternary-in-jsx.png)
So, in 1.7.0, we have revised our heuristic to just be:
website/blog/2017-11-07-1.8.0.md
+3 -4
View File
@@ -1,6 +1,5 @@
---
author: Lucas Azzola (@azz)
authorURL: https://twitter.com/lucasazzola
authors: "azz"
title: "Prettier 1.8: Markdown Support"
---
@@ -108,7 +107,7 @@ reallyUgly(javascript);
When rearranging list items, after running Prettier all the numbers will be fixed!
![Markdown Lists](/blog/assets/markdown-lists.gif)
![Markdown Lists](./assets/markdown-lists.gif)
> Note: you can actually opt out of this by using `1.` for all list items if you want to optimize for cleaner diffs.
@@ -116,7 +115,7 @@ When rearranging list items, after running Prettier all the numbers will be fixe
Tables will also automatically be adjusted to fit their contents. This could be completely unmaintainable without an automated tool.
![Markdown Tables](/blog/assets/markdown-tables.gif)
![Markdown Tables](./assets/markdown-tables.gif)
**Markdown-in-JS**
website/blog/2017-12-05-1.9.0.md
+1 -2
View File
@@ -1,6 +1,5 @@
---
author: Lucas Duailibe (@duailibe)
authorURL: https://twitter.com/duailibe
authors: "duailibe"
title: "Prettier 1.9: JSX Fragments, EditorConfig and Arrow Parens"
---
website/blog/2018-01-10-1.10.0.md
+2 -3
View File
@@ -1,6 +1,5 @@
---
author: Christopher Chedeau (@vjeux)
authorURL: https://twitter.com/vjeux
authors: "vjeux"
title: "Prettier 1.10: One Year of Prettier 🎂"
---
@@ -425,7 +424,7 @@ Similarly, "JSON with comments" will also be detected.
---
<h1 style="padding: 0; margin-bottom: -2rem">🎂</h1>
<h1 style={{padding: 0, marginBottom: "-2rem"}}>🎂</h1>
[@azz]: https://github.com/azz
[@ardevelop]: https://github.com/ardevelop
website/blog/2018-02-26-1.11.0.md
+15 -14
View File
@@ -1,6 +1,5 @@
---
author: Suchipi (@suchipi)
authorURL: https://github.com/suchipi
authors: "suchipi"
title: "Prettier 1.11: CSS fixes and new TypeScript feature support"
---
@@ -335,7 +334,7 @@ Prettier was mistakenly adding a comma after `@import` urls. This is no longer a
Prettier was printing the `!default` directive in an odd way:
<!-- prettier-ignore -->
```css
```scss
$theme-checkbox-colors: (
default: $theme-color-border,
checked: $theme-color-checked,
@@ -348,7 +347,7 @@ $theme-checkbox-colors: (
It's now handled properly:
<!-- prettier-ignore -->
```css
```scss
$theme-checkbox-colors: (
default: $theme-color-border,
checked: $theme-color-checked,
@@ -923,7 +922,7 @@ Links whose URL contained HTML entities were mistakenly being changed when run t
Indentation of JS tagged template string content within markdown code blocks was being calculated incorrectly:
<!-- prettier-ignore -->
```md
``````md
<!-- Unformatted code: -->
- 1
- 2
@@ -954,12 +953,12 @@ asd
asd
`;
```
```
``````
It has been fixed in Prettier 1.11.0:
<!-- prettier-ignore -->
```md
``````md
<!-- Formatted code (Prettier 1.11.0): -->
* 1
@@ -976,7 +975,7 @@ It has been fixed in Prettier 1.11.0:
asd
`;
```
```
``````
#### Print multiline content correctly in footnoteDefinition ([#3787] by [@ikatyang])
@@ -1007,15 +1006,17 @@ fn main() {
```
<!-- Formatted code (Prettier 1.11.0): -->
Some text.[^fn]
[^fn]: Here is a footnote which includes code.
```rs
fn main() {
println!("this is some Rust!");
}
```
```rs
fn main() {
println!("this is some Rust!");
}
```
``````
#### Respect `tabWidth` for list items ([#3990] by [@ikatyang])
@@ -1037,7 +1038,7 @@ We've discovered that CommonMark diverges from the original Markdown syntax for
This change should also improve indentation in text editors:
![](/blog/assets/markdown-list-indent.gif)
![](./assets/markdown-list-indent.gif)
### API
website/blog/2018-04-09-plugin-php-0.1.md
+2 -3
View File
@@ -1,7 +1,6 @@
---
author: Christian Zosel (@chrzosel)
authorURL: https://twitter.com/chrzosel
title: Prettier for PHP 0.1: First alpha release 🎉
authors: "czosel"
title: "Prettier for PHP 0.1: First alpha release 🎉"
---
After more than 200 merged pull requests since mid December 2017, we're happy to announce the first alpha release of [Prettier for PHP](https://github.com/prettier/plugin-php). In this blog post, we'd like to give a short overview of how the plugin works, its philosophy, and what to expect in the future.
website/blog/2018-04-11-1.12.0.md
+3 -4
View File
@@ -1,6 +1,5 @@
---
author: Suchipi (@suchipi)
authorURL: https://twitter.com/suchipi
authors: "suchipi"
title: "Prettier 1.12: Fixes, Features, and Formatting, Oh My!"
---
@@ -438,11 +437,11 @@ In Prettier 1.11.1, there was an issue where the indentation level for binary ex
```js
// Input:
class EnterpriseQualityClass {
foobar =
foobar =
// we get foo and multiply by 3
this.foo * 3 +
// then add bar and multiply by 90 time foo plus 2
(this.bar * 90) * (this.foo + 2)
(this.bar * 90) * (this.foo + 2)
}
// Formatted (Prettier 1.11.1):
website/blog/2018-05-27-1.13.0.md
+2 -3
View File
@@ -1,6 +1,5 @@
---
author: Lucas Duailibe (@duailibe)
authorURL: https://twitter.com/duailibe
authors: "duailibe"
title: "Prettier 1.13: Conquering the web!"
---
@@ -608,7 +607,7 @@ When passing `--plugin=path/to/plugin` Prettier 1.12 and earlier would crash bec
#### Adding plugin interface for isBlockComment ([#4347] by [@mgrip])
A block comment is a comment that can be printed inline (for JS, it's `/* comment */`) with code. Since Prettier is responsible for printing comments we needed to let plugins determine if a comment is a block comment. Read more in our [docs](plugins.md).
A block comment is a comment that can be printed inline (for JS, it's `/* comment */`) with code. Since Prettier is responsible for printing comments we needed to let plugins determine if a comment is a block comment. Read more in our [docs](/docs/plugins).
### JavaScript
website/blog/2018-07-29-1.14.0.md
+1 -2
View File
@@ -1,6 +1,5 @@
---
author: Ika (@ikatyang)
authorURL: https://github.com/ikatyang
authors: "ikatyang"
title: "Prettier 1.14: YAML Support"
---
website/blog/2018-11-07-1.15.0.md
+34 -35
View File
@@ -1,6 +1,5 @@
---
author: Ika (@ikatyang)
authorURL: https://github.com/ikatyang
authors: "ikatyang"
title: "Prettier 1.15: HTML, Vue, Angular and MDX Support"
---
@@ -179,15 +178,15 @@ You can now use Prettier to format it, and we’ll format both the Markdown and
```jsx
<!-- Input -->
import {
colors } from
import {
colors } from
'./theme'
import Palette from './components/palette'
# Colors
<Palette colors={
colors}
colors}
/>
<!-- Output -->
@@ -223,7 +222,7 @@ const example2 =
? someValue === 'c'
? 'hello world, branch a && b && c'
: 'hello world, branch a && b && !c'
: 'hello world, branch a && !b'
: 'hello world, branch a && !b'
: null;
// Output (Prettier 1.14)
@@ -289,7 +288,7 @@ class Hello {
@decorator
ownLine = 'value';
@decorator({
hello: 'world'
}) multiLine = 'value';
@@ -491,18 +490,18 @@ we'll look at the first line of the file,
and if there's a shebang,
we'll use it to infer which parser to use.
<code style="display: block; background: #282a36; color: #f1f1f0">
<span style="color: #686868"># Input</span><br />
$ <span style="color: #5af78e">cat</span> <u>bin/example</u><br />
<code style={{display: "block", background: "#282a36", color: "#f1f1f0"}}>
<span style={{color: "#686868"}}># Input</span><br />
$ <span style={{color: "#5af78e"}}>cat</span> <u>bin/example</u><br />
\#!/usr/bin/env node<br />
&nbsp;&nbsp;require ( "../src/cli" ) . run ( )<br />
<br />
$ <span style="color: #5af78e">prettier</span> <u>bin/example</u><br />
<br />
<span style="color: #686868"># Output (Prettier 1.14)</span><br />
[<span style="color: #ff5c57">error</span>] No parser could be inferred for file: bin/example<br />
<br />
<span style="color: #686868"># Output (Prettier 1.15)</span><br />
$ <span style={{color: "#5af78e"}}>prettier</span> <u>bin/example</u><br />
<span style={{color: "#686868"}}># Output (Prettier 1.14)</span><br />
[<span style={{color: "#ff5c57"}}>error</span>] No parser could be inferred for file: bin/example<br />
<span style={{color: "#686868"}}># Output (Prettier 1.15)</span><br />
#!/usr/bin/env node<br />
require("../src/cli").run();
</code>
@@ -521,15 +520,15 @@ Previously, there was no color for the option validation error message,
so it wasn’t easy to see what option had an invalid value passed to it, and what the valid values were.
In Prettier 1.15, you should be able to understand what's going on at a glance.
<code style="display: block; background: #282a36; color: #f1f1f0">
<span style="color: #686868"># Input</span><br />
$ <span style="color: #5af78e">prettier</span> <u>filename.js</u> --trailing-comma wow<br />
<br />
<span style="color: #686868"># Output (Prettier 1.14)</span><br />
[<span style="color: #ff5c57">error</span>] Invalid \`\`--trailing-comma\`\` value. Expected "all", "es5" or "none", but received \`"wow"\`.
<br /><br />
<span style="color: #686868"># Output (Prettier 1.15)</span><br />
[<span style="color: #ff5c57">error</span>] Invalid <span style="color: #ff5c57">--trailing-comma</span> value. Expected <span style="color: #57c7ff">"all", "es5" or "none"</span>, but received <span style="color: #ff5c57">"wow"</span>.
<code style={{display: "block", background: "#282a36", color: "#f1f1f0"}}>
<span style={{color: "#686868"}}># Input</span><br />
$ <span style={{color: "#5af78e"}}>prettier</span> <u>filename.js</u> --trailing-comma wow<br />
<span style={{color: "#686868"}}># Output (Prettier 1.14)</span><br />
[<span style={{color: "#ff5c57"}}>error</span>] Invalid \`\`--trailing-comma\`\` value. Expected "all", "es5" or "none", but received \`"wow"\`.
<span style={{color: "#686868"}}># Output (Prettier 1.15)</span><br />
[<span style={{color: "#ff5c57"}}>error</span>] Invalid <span style={{color: "#ff5c57"}}>--trailing-comma</span> value. Expected <span style={{color: "#57c7ff"}}>"all", "es5" or "none"</span>, but received <span style={{color: "#ff5c57"}}>"wow"</span>.
</code>
#### Allow printer to preprocess the AST ([#5041] by [@ikatyang])
@@ -550,15 +549,15 @@ interface Printer {
Previously, loading a config file of an unsupported format would throw an error message
that looks like a bug in Prettier, so we improved the message in Prettier 1.15.
<code style="display: block; background: #282a36; color: #f1f1f0">
<span style="color: #686868"># Input</span><br />
$ <span style="color: #5af78e">prettier</span> <u>filename.js</u> --config <u>.prettierrc.wow</u><br />
<br />
<span style="color: #686868"># Output (Prettier 1.14)</span><br />
[<span style="color: #ff5c57">error</span>] Invalid configuration file: Cannot read property 'sync' of undefined
<br /><br />
<span style="color: #686868"># Output (Prettier 1.15)</span><br />
[<span style="color: #ff5c57">error</span>] Invalid configuration file: No sync loader specified for extension ".wow"
<code style={{display: "block", background: "#282a36", color: "#f1f1f0"}}>
<span style={{color: "#686868"}}># Input</span><br />
$ <span style={{color: "#5af78e"}}>prettier</span> <u>filename.js</u> --config <u>.prettierrc.wow</u><br />
<span style={{color: "#686868"}}># Output (Prettier 1.14)</span><br />
[<span style={{color: "#ff5c57"}}>error</span>] Invalid configuration file: Cannot read property 'sync' of undefined
<span style={{color: "#686868"}}># Output (Prettier 1.15)</span><br />
[<span style={{color: "#ff5c57"}}>error</span>] Invalid configuration file: No sync loader specified for extension ".wow"
</code>
#### Add an option to enforce line endings ([#5327] by [@kachkaev])
website/blog/2019-01-20-1.16.0.md
+7 -8
View File
@@ -1,6 +1,5 @@
---
author: Ika (@ikatyang)
authorURL: https://github.com/ikatyang
authors: "ikatyang"
title: "Prettier 1.16: HTML improvements and better CRLF handling"
---
@@ -136,13 +135,13 @@ in the output except for the files which aren’t properly formatted. This isn
very friendly for new contributors and users in general, so we added a `--check`
option that produces more human-friendly output.
<code style="display: block; background: #282a36; color: #f1f1f0">
<span style="color: #686868"># Prettier 1.15</span><br />
$ <span style="color: #5af78e">prettier</span> <span style="color: #57c7ff">\*.js</span> --list-different<br />
<code style={{display: "block", background: "#282a36", color: "#f1f1f0"}}>
<span style={{color: "#686868"}}># Prettier 1.15</span><br />
$ <span style={{color: "#5af78e"}}>prettier</span> <span style={{color: "#57c7ff"}}>\*.js</span> --list-different<br />
unformatted.js<br />
<br />
<span style="color: #686868"># Prettier 1.16</span><br />
$ <span style="color: #5af78e">prettier</span> <span style="color: #57c7ff">\*.js</span> --check<br />
<span style={{color: "#686868"}}># Prettier 1.16</span><br />
$ <span style={{color: "#5af78e"}}>prettier</span> <span style={{color: "#57c7ff"}}>\*.js</span> --check<br />
Checking formatting...<br />
unformatted.js<br />
Code style issues found in the above file(s). Forgot to run Prettier?<br />
website/blog/2019-04-12-1.17.0.md
+13 -10
View File
@@ -1,6 +1,5 @@
---
author: Lucas Duailibe (@duailibe)
authorURL: https://github.com/duailibe
authors: "duailibe"
title: "Prettier 1.17: More quotes options and support for shared configs"
---
@@ -75,14 +74,18 @@ If you don't want to use `package.json`, you can use any of the supported extens
[@azz] has created an example configuration package. You can [see the source on GitHub](https://github.com/azz/prettier-config) or [install it via npm](https://www.npmjs.com/package/@azz/prettier-config).
> Note: This method does **not** offer a way to _extend_ the configuration to overwrite some properties from the shared configuration. If you need to do that, import the file in a `.prettierrc.js` file and export the modifications, e.g:
>
> ```js
> module.exports = {
> ...require("@company/prettier-config"),
> semi: false,
> };
> ```
:::note
This method does **not** offer a way to _extend_ the configuration to overwrite some properties from the shared configuration. If you need to do that, import the file in a `.prettierrc.js` file and export the modifications, e.g:
```js
module.exports = {
...require("@company/prettier-config"),
semi: false,
};
```
:::
## General
website/blog/2019-06-06-1.18.0.md
+1 -2
View File
@@ -1,6 +1,5 @@
---
author: Lucas Duailibe (@duailibe)
authorURL: https://github.com/duailibe
authors: "duailibe"
title: "Prettier 1.18: Lots of fixes and OpenCollective"
---
website/blog/2019-11-09-1.19.0.md
+3 -4
View File
@@ -1,6 +1,5 @@
---
author: Simon Lydell (@lydell)
authorURL: https://github.com/lydell
authors: "lydell"
title: "Prettier 1.19: Long awaited Vue option, TypeScript 3.7 and new JavaScript features"
---
@@ -1142,7 +1141,7 @@ Previously, Prettier only supported the most common HTML entities, such as `&nbs
[error] stdin: SyntaxError: Unknown entity "excl" - use the "&#<decimal>;" or "&#x<hex>;" syntax (1:6)
[error] > 1 | <p>Hi&excl;</p>
[error] | ^
[error] 2 |
[error] 2 |
-->
<!-- Prettier 1.19 -->
@@ -1497,7 +1496,7 @@ Previously, `<style>` elements with `lang="css"` were not formatted, while omitt
```html
<!-- Input -->
<style lang="css">
a {
a {
color: #F00
}</style>
website/blog/2020-03-21-2.0.0.md
+9 -10
View File
@@ -1,6 +1,5 @@
---
author: "Georgii Dolzhykov (@thorn0)"
authorURL: "https://github.com/thorn0"
authors: "thorn0"
title: "Prettier 2.0 “2020”"
---
@@ -18,7 +17,7 @@ After a long and careful consideration, we decided to change the default values
Previously, any method call chain of length three or longer would be automatically broken into multiple lines. The new heuristic is based on the complexity of the call arguments in the chain, rather than simply on the chain's length. Now, if chained method calls have arguments which aren't easy to understand at a glance (e.g. functions or deeply-nested objects), the chain is broken. Otherwise, they're allowed to remain on one line. See prior issues [#3197](https://github.com/prettier/prettier/issues/3107), [#4765](https://github.com/prettier/prettier/pull/4765), [#1565](https://github.com/prettier/prettier/issues/1565) and [#4125](https://github.com/prettier/prettier/pull/4125) for context and examples.
To get best results, make sure your value for the [`printWidth` option](/docs/en/options.html#print-width) isn't too high.
To get best results, make sure your value for the [`printWidth` option](/docs/options#print-width) isn't too high.
<!-- prettier-ignore -->
```javascript
@@ -101,7 +100,7 @@ In Prettier 2.0, the CLI also prints such errors for individual patterns.
#### Fix config overrides pattern matching to include dot files ([#5813](https://github.com/prettier/prettier/pull/5813) by [@chrisblossom](https://github.com/chrisblossom))
Previously, [configuration overrides](/docs/en/configuration.html#configuration-overrides) weren't applied to files whose name had a leading dot.
Previously, [configuration overrides](/docs/configuration#configuration-overrides) weren't applied to files whose name had a leading dot.
#### Drop support for Node versions older than 10 ([#6908](https://github.com/prettier/prettier/pull/6908) by [@fisker](https://github.com/fisker))
@@ -120,13 +119,13 @@ There is a possibility that the default value will change to `all` (meaning even
#### Plugin API: changes in `prettier.util` ([#6993](https://github.com/prettier/prettier/pull/6993) by [@fisker](https://github.com/fisker))
- `prettier.util.mapDoc` has been removed.<br>
- `prettier.util.mapDoc` has been removed.<br />
Use `prettier.doc.utils.mapDoc` instead.
- `prettier.util.isNextLineEmpty` has been updated.<br>
- `prettier.util.isNextLineEmpty` has been updated.<br />
Use `isNextLineEmpty(text, node, locEnd)` instead of `isNextLineEmpty(text, node, options)`.
- `prettier.util.isPreviousLineEmpty` has been updated.<br>
- `prettier.util.isPreviousLineEmpty` has been updated.<br />
Use `isPreviousLineEmpty(text, node, locStart)` instead of `isPreviousLineEmpty(text, node, options)`.
- `prettier.util.getNextNonSpaceNonCommentCharacterIndex` has been updated.<br>
- `prettier.util.getNextNonSpaceNonCommentCharacterIndex` has been updated.<br />
Use `getNextNonSpaceNonCommentCharacterIndex(text, node, locEnd)` instead of `getNextNonSpaceNonCommentCharacterIndex(text, node, options)`.
#### Change default value for `arrowParens` to `always` ([#7430](https://github.com/prettier/prettier/pull/7430) by [@kachkaev](https://github.com/kachkaev))
@@ -760,7 +759,7 @@ Even though index signatures without type annotations or with multiple parameter
```ts
// Input
type A = { [key: string] };
type B = { [a: string, b: string]: string; };
type B = { [a: string, b: string]: string; };
// Prettier 1.19
type A = { [key: string]: };
@@ -1063,7 +1062,7 @@ Error: Mixed descriptor in srcset is not supported
<!-- prettier-ignore -->
```html
<!-- Input -->
<pre><br></pre>
<pre><br /></pre>
<pre><hr></pre>
<!-- Prettier 1.19 -->
website/blog/2020-08-24-2.1.0.md
+9 -10
View File
@@ -1,6 +1,5 @@
---
author: "Sosuke Suzuki (@sosukesuzuki)"
authorURL: "https://github.com/sosukesuzuki"
authors: "sosukesuzuki"
title: "Prettier 2.1: new --embedded-language-formatting option and new JavaScript/TypeScript features!"
---
@@ -12,7 +11,7 @@ This release adds a new `--embedded-language-formatting` option, supports new Ja
### API
#### Add --embedded-language-formatting={auto,off} option ([#7875](https://github.com/prettier/prettier/pull/7875) by [@bakkot](https://github.com/bakkot), [#8825](https://github.com/prettier/prettier/pull/8825) by [@fisker](https://github.com/fisker))
#### Add --embedded-language-formatting=\{auto,off\} option ([#7875](https://github.com/prettier/prettier/pull/7875) by [@bakkot](https://github.com/bakkot), [#8825](https://github.com/prettier/prettier/pull/8825) by [@fisker](https://github.com/fisker))
When Prettier identifies cases where it looks like you've placed some code it knows how to format within a string in another file, like in a tagged template in JavaScript with a tag named `html` or in code blocks in Markdown, it will try to format that code by default.
@@ -143,7 +142,7 @@ If a comments line had trailing whitespaces, comments were not detected as end-o
<!-- prettier-ignore -->
```jsx
// Input
var a = { /* extra whitespace --> */
var a = { /* extra whitespace --> */
b };
var a = { /* no whitespace --> */
@@ -427,7 +426,7 @@ Support Stage-2 proposal [Private Fields in `in`](https://github.com/tc39/propos
SyntaxError: Unexpected token (1:1)
> 1 | #prop in obj;
| ^
2 |
2 |
// Prettier 2.1
#prop in obj;
@@ -502,7 +501,7 @@ SyntaxError: Unexpected token (1:1)
};
```
#### Wrap jsx element on the left of "<" with parentheses ([#8461](https://github.com/prettier/prettier/pull/8461) by [@sosukesuzuki](https://github.com/sosukesuzuki))
#### Wrap jsx element on the left of "\<" with parentheses ([#8461](https://github.com/prettier/prettier/pull/8461) by [@sosukesuzuki](https://github.com/sosukesuzuki))
<!-- prettier-ignore -->
```jsx
@@ -516,7 +515,7 @@ SyntaxError: Unexpected token (1:1)
SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (1:9)
> 1 | <div /> < 5;
| ^
2 |
2 |
// Prettier 2.1
(<div />) < 5;
@@ -982,7 +981,7 @@ modify URLs.
}
```
#### Add support for @supports selector(<custom-selector>) ([#8545](https://github.com/prettier/prettier/pull/8545) by [@boyenn](https://github.com/boyenn))
#### Add support for @supports selector(\<custom-selector>) ([#8545](https://github.com/prettier/prettier/pull/8545) by [@boyenn](https://github.com/boyenn))
<!-- prettier-ignore -->
```css
@@ -1037,7 +1036,7 @@ body {
/* Prettier 2.0 */
body {
test: function($list...);
foo: bar(returns-list($list) ...);
foo: bar(returns-list($list) ...);
background-color: rgba(50 50 50 50..);
}
@@ -2134,7 +2133,7 @@ SyntaxError: Merge nodes can only have Alias nodes as values (2:2)
| ^^^^^^^^^^^^
> 4 | K2: "Two"
| ^^^^^^^^^^^^
> 5 |
> 5 |
| ^
6 | bar:
7 | <<: *anchor
website/blog/2020-11-20-2.2.0.md
+1 -2
View File
@@ -1,6 +1,5 @@
---
author: "Sosuke Suzuki (@sosukesuzuki)"
authorURL: "https://github.com/sosukesuzuki"
authors: "sosukesuzuki"
title: "Prettier 2.2: new JavaScript parsers, TS 4.1 and ESM standalone bundles"
---
website/blog/2020-12-11-plugin-ruby-1.0.md
+1 -2
View File
@@ -1,6 +1,5 @@
---
author: Kevin Newton (@kddnewton)
authorURL: https://twitter.com/kddnewton
authors: kddnewton
title: Prettier for Ruby goes v1.0 🎉
---
website/blog/2021-05-09-2.3.0.md
+2 -3
View File
@@ -1,6 +1,5 @@
---
author: "Georgii Dolzhykov (@thorn0)"
authorURL: "https://github.com/thorn0"
authors: "thorn0"
title: "Prettier 2.3. In which assignments are consistent, short keys non-breaking, and Handlebars official"
---
@@ -98,7 +97,7 @@ The [`--html-whitespace-sensitivity`][hws-option] option is supported and defaul
The feature is called “Ember / Handlebars” and not just “Handlebars” because Glimmer doesn’t support some syntax and use cases of Handlebars. This is mostly due to the fact that [Handlebars], being a template engine (a preprocessor), doesn’t care about the underlying syntax of the content it processes whereas Glimmer parses two syntaxes – HTML and Handlebars – at the same time and combines the result into a single tree, which Prettier can print. This means Prettier won’t format Handlebars files that can’t be parsed into such a tree, either because the underlying syntax isn’t HTML or because template directives and tags overlap in a way that can’t be represented in a tree (e.g., `{{#if foo}}<div>{{/if}`). Even with these restrictions, the formatter still seems to be useful enough to non-Ember Handlebars users. As for the syntax unsupported by Ember, there is a good chance to see support for it in future versions of Prettier as Glimmer uses a full-fledged Handlebars parser under the hood.
Files with the extensions `.hbs` and `.handlebars` are recognized as Handlebars by default. For other extensions, the [`--parser`](parser-option) option with the value `glimmer` has to be specified – for example, using command line or, better yet, [configuration overrides].
Files with the extensions `.hbs` and `.handlebars` are recognized as Handlebars by default. For other extensions, the [`--parser`](/docs/configuration#setting-the-parser-option) option with the value `glimmer` has to be specified – for example, using command line or, better yet, [configuration overrides].
See the formatter in action on the [playground][playground-glimmer]!
website/blog/2021-09-09-2.4.0.md
+1 -2
View File
@@ -1,6 +1,5 @@
---
author: "Sosuke Suzuki (@sosukesuzuki)"
authorURL: "https://github.com/sosukesuzuki"
authors: "sosukesuzuki"
title: "Prettier 2.4: new bracketSameLine option and TypeScript 4.4 support!"
---
website/blog/2021-11-25-2.5.0.md
+2 -3
View File
@@ -1,6 +1,5 @@
---
author: "Sosuke Suzuki (@sosukesuzuki)"
authorURL: "https://github.com/sosukesuzuki"
authors: "sosukesuzuki"
title: "Prettier 2.5: TypeScript 4.5 and MDX v2 comment syntax!"
---
@@ -16,7 +15,7 @@ If you enjoy Prettier and would like to support our work, consider sponsoring us
#### Avoid extra offset in arrow function body when using long types ([#11515](https://github.com/prettier/prettier/pull/11515) by [@kachkaev](https://github.com/kachkaev) and [@thorn0](https://github.com/thorn0))
Starting with Prettier 2.3.0, type declarations in arrow functions could affect function body indentation. Changing the length of the type annotation could produce large diffs and thus increased the chance of git conflicts. To prevent this, function body offset was stabilized.<br>
Starting with Prettier 2.3.0, type declarations in arrow functions could affect function body indentation. Changing the length of the type annotation could produce large diffs and thus increased the chance of git conflicts. To prevent this, function body offset was stabilized.<br />
**Note**: This change may affect a large number of lines in your codebase.
<!-- prettier-ignore -->
website/blog/2022-01-06-prettier-begins-paying-maintainers.md → website/blog/2022-01-06-prettier-begins-paying-maintainers.mdx
+5 -4
View File
@@ -1,14 +1,15 @@
---
author: "Christopher Chedeau (@vjeux)"
authorURL: "https://github.com/vjeux"
authors: "vjeux"
title: "Prettier begins paying maintainers"
---
Prettier, an opinionated code formatter for JavaScript and many web languages, has been accepting donations at [OpenCollective](https://opencollective.com/prettier) since 2019 and thanks to many generous donations we now have \$50,000 in the bank! As a result, we are now able to pay the two active maintainers \$1,500/month each. This funding will ensure that they will be able to continue consistent maintenance of Prettier into the future.
<!-- truncate -->
{/* truncate */}
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">📣 Prettier is now accepting donations! 🎉 If you &#39;d like to support our work, head to our OpenCollective! 🙏<a href="https://t.co/etDqkYLm4H">https://t.co/etDqkYLm4H</a></p>&mdash; Prettier (@PrettierCode) <a href="https://twitter.com/PrettierCode/status/1132012865416781824?ref_src=twsrc%5Etfw">May 24, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
import { Tweet } from "react-tweet";
<Tweet id="1132012865416781824" />
Open Source and Money has always been a tricky topic. We've tried many things with Prettier. Right after the project was open sourced, Facebook contracted [James Long](https://twitter.com/jlongster) for 2 weeks in order to polish it. Facebook also paid Christopher Chedeau ([vjeux](https://twitter.com/Vjeux)) for 9 months to work on it full time. Once there was \$10,000 in contributions, we gave everyone that contributed significantly the opportunity to redeem \$1,000 but due to the complexities in collecting the money, few people did.
website/blog/2022-03-16-2.6.0.md
+2 -3
View File
@@ -1,6 +1,5 @@
---
author: "Sosuke Suzuki (@sosukesuzuki)"
authorURL: "https://github.com/sosukesuzuki"
authors: "sosukesuzuki"
title: "Prettier 2.6: new singleAttributePerLine option and new JavaScript features!"
---
@@ -788,7 +787,7 @@ schema {
<!-- prettier-ignore -->
```yaml
# Input
# Input
block_with_ideographic_space: |
　line-content # This line starts with U+3000
website/blog/2022-06-14-2.7.0.md
+3 -4
View File
@@ -1,6 +1,5 @@
---
author: "Sosuke Suzuki (@sosukesuzuki)"
authorURL: "https://github.com/sosukesuzuki"
authors: "sosukesuzuki"
title: "Prettier 2.7: new --cache CLI option and TypeScript 4.7 syntax!"
---
@@ -214,14 +213,14 @@ Although this change does not affect the comments format in `import`, follows ch
// Input
export {
foo,
bar as // comment
baz,
}
import {
foo,
bar as // comment
baz,
} from 'foo'
website/blog/2022-11-23-2.8.0.md
+2 -3
View File
@@ -1,6 +1,5 @@
---
author: "Sosuke Suzuki (@sosukesuzuki)"
authorURL: "https://github.com/sosukesuzuki"
authors: "sosukesuzuki"
title: "Prettier 2.8: improve --cache CLI option and TypeScript 4.9 satisfies operator!"
---
@@ -205,7 +204,7 @@ Pseudo-selectors like `:is`, `:where`, and `:not` that can take multiple selecto
### SCSS
#### Fix: extra space between '#' and '{' ([#13286](https://github.com/prettier/prettier/pull/13286) by [@jspereiramoura](https://github.com/jspereiramoura))
#### Fix: extra space between '#' and '\{' ([#13286](https://github.com/prettier/prettier/pull/13286) by [@jspereiramoura](https://github.com/jspereiramoura))
<!-- prettier-ignore -->
```scss
website/blog/2023-07-05-3.0.0.md
+7 -8
View File
@@ -1,6 +1,5 @@
---
author: "Sosuke Suzuki (@sosukesuzuki)"
authorURL: "https://github.com/sosukesuzuki"
authors: "sosukesuzuki"
title: "Prettier 3.0: Hello, ECMAScript Modules!"
---
@@ -359,7 +358,7 @@ File structures changes:
- `esm/parser-yaml.mjs` -> `plugins/yaml.mjs`
- `parser-yaml.js` -> `plugins/yaml.js`
Check full list on <https://unpkg.com/browse/prettier@3.0.0/>.
Check full list on https://unpkg.com/browse/prettier@3.0.0/.
A new plugin has been added:
@@ -425,7 +424,7 @@ We believe make `textToDoc` return docs without trailing hard lines makes the pl
#### Removed support for custom parser api ([#13250](https://github.com/prettier/prettier/pull/13250) by [@fisker](https://github.com/fisker) and [@thorn0](https://github.com/thorn0))
Before [plugins](/docs/en/plugins.html) were a thing, Prettier had a similar but more limited feature called custom parsers. It’s been removed in v3.0.0 as its functionality was a subset of what the Plugin API did. If you used it, please check [how to migrate](/docs/en/api.html#custom-parser-api).
Before [plugins](/docs/plugins) were a thing, Prettier had a similar but more limited feature called custom parsers. It’s been removed in v3.0.0 as its functionality was a subset of what the Plugin API did. If you used it, please check [how to migrate](/docs/api#custom-parser-api-removed).
#### The second argument `parsers` passed to `parsers.parse` has been removed ([#13268](https://github.com/prettier/prettier/pull/13268) by [@fisker](https://github.com/fisker))
@@ -582,7 +581,7 @@ $ node test.js
```jsx
// Input
export default whatever(function (a: {
aaaaaaaaa: string;
aaaaaaaaa: string;
bbbbbbbbb: string;
ccccccccc: string;
}) {
@@ -1059,7 +1058,7 @@ Y(() => () => (a ? b : c));
// Input
[
(a = b),
c // comment
]
@@ -1168,7 +1167,7 @@ const bar = [
<!-- prettier-ignore -->
```tsx
// Input
type FooBar =
type FooBar =
| Number // this documents the first option
| void // this documents the second option
;
@@ -1247,7 +1246,7 @@ class MyClass {
<!-- prettier-ignore -->
```ts
// Input
type T =
type T =
| (
| {
value: number
website/blog/2023-11-13-3.1.0.md
+1 -2
View File
@@ -1,6 +1,5 @@
---
author: "Sosuke Suzuki (@sosukesuzuki)"
authorURL: "https://github.com/sosukesuzuki"
authors: "sosukesuzuki"
title: "Prettier 3.1: New experimental ternaries formatting and Angular control flow syntax!"
---
website/blog/2023-11-13-curious-ternaries.md
+1 -2
View File
@@ -1,6 +1,5 @@
---
author: "Alex Rattray (@rattrayalex)"
authorURL: "https://github.com/rattrayalex"
authors: "rattrayalex"
title: "A curious case of the ternaries"
---
website/blog/2023-11-27-20k-bounty-was-claimed.md
+1 -2
View File
@@ -1,6 +1,5 @@
---
author: "Christopher Chedeau (@vjeux)"
authorURL: "https://github.com/vjeux"
authors: "vjeux"
title: "$20k Bounty was Claimed!"
---
website/blog/2023-11-30-cli-deep-dive.md
+3 -8
View File
@@ -1,6 +1,5 @@
---
author: "Fabio Spampinato (@fabiospampinato)"
authorURL: "https://github.com/fabiospampinato"
authors: "fabiospampinato"
title: "Prettier's CLI: A Performance Deep Dive"
---
@@ -38,9 +37,7 @@ The goal is to make it close to ~100% backwards compatible, and then just ship i
## Overview
<p align="center">
<img src="/blog/assets/prettier-architecture.png" width="800px" />
</p>
![](./assets/prettier-architecture.png)
Prettier's CLI works roughly like in the diagram above:
@@ -235,9 +232,7 @@ I think the main room for improvement in this area is doing something visually i
## Results
<p align="center">
<img src="/blog/assets/prettier-bench.png" width="600px" />
</p>
![](./assets/prettier-bench.png)
Before we wrap up, here are some numbers I see when checking files in Babel's monorepo, with all files formatted, but 9 erroring files, with various flags, and with the current and new CLI:
website/blog/2024-01-12-3.2.0.md
+1 -2
View File
@@ -1,6 +1,5 @@
---
author: "Sosuke Suzuki (@sosukesuzuki)"
authorURL: "https://github.com/sosukesuzuki"
authors: "sosukesuzuki"
title: "Prettier 3.2: Support JSONC and Angular’s ICU expression"
---
website/blog/2024-06-01-3.3.0.md
+2 -3
View File
@@ -1,6 +1,5 @@
---
author: "Sosuke Suzuki (@sosukesuzuki)"
authorURL: "https://github.com/sosukesuzuki"
authors: "sosukesuzuki"
title: "Prettier 3.3: New Flow features and a lot of bug fixes"
---
@@ -401,7 +400,7 @@ opinionated-code-formatter-that-support-many-languages-and-integrate-with-most-e
<!-- prettier-ignore -->
```md
<!-- Input -->
<!-- Input -->
\
word very-very-very-very-very-very-very-very-very-very-long-word very-very-very-very-very-very-very-very-very-very-long-word
website/blog/2024-11-26-3.4.0.md
+6 -7
View File
@@ -1,6 +1,5 @@
---
author: "Sosuke Suzuki (@sosukesuzuki)"
authorURL: "https://github.com/sosukesuzuki"
authors: "sosukesuzuki"
title: "Prettier 3.4: A lot of bug fixes"
---
@@ -206,7 +205,7 @@ This change ensures that the extra line is no longer inserted.
<!-- prettier-ignore -->
```ts
// Input
const foo1 =
const foo1 =
// comment
<T,>() => () => 1;
@@ -571,9 +570,9 @@ The CommonMark spec doesn't mention non-ASCII spaces here, so removing them chan
<!-- prettier-ignore -->
```md
<!-- Input -->
 EM Space (U+2003) EM Space 
 EM Space (U+2003) EM Space
　全角スペース (U+3000) 全形空白　
　全角スペース (U+3000) 全形空白
<!-- Prettier 3.3 -->
EM Space (U+2003) EM Space
@@ -581,9 +580,9 @@ EM Space (U+2003) EM Space
全角スペース (U+3000) 全形空白
<!-- Prettier 3.4 -->
 EM Space (U+2003) EM Space 
 EM Space (U+2003) EM Space
　全角スペース (U+3000) 全形空白　
　全角スペース (U+3000) 全形空白
```
#### Don't break a line a between Chinese or Japanese and others ([#16691](https://github.com/prettier/prettier/pull/16691) by [@tats-u](https://github.com/tats-u))
website/blog/authors.yml
+95
View File
@@ -0,0 +1,95 @@
vjeux:
name: Christopher Chedeau
url: https://github.com/vjeux
image_url: https://github.com/vjeux.png
socials:
x: vjeux
github: vjeux
suchipi:
name: Lily Skye
url: https://github.com/suchipi
image_url: https://github.com/suchipi.png
socials:
x: suchipi
github: suchipi
azz:
name: Lucas Azzola
url: https://github.com/azz
image_url: https://github.com/azz.png
socials:
x: lucasazzola
github: suchipi
duailibe:
name: Lucas Duailibe
url: https://github.com/duailibe
image_url: https://github.com/duailibe.png
socials:
x: duailibe
github: duailibe
czosel:
name: Christian Zosel
url: https://github.com/czosel
image_url: https://github.com/czosel.png
socials:
x: chrzosel
github: czosel
ikatyang:
name: Ika
url: https://github.com/ikatyang
image_url: https://github.com/ikatyang.png
socials:
x: ikatyang
github: ikatyang
lydell:
name: Simon Lydell
url: https://github.com/lydell
image_url: https://github.com/lydell.png
socials:
x: SimonLydell
github: lydell
thorn0:
name: Georgii Dolzhykov
url: https://github.com/thorn0
image_url: https://github.com/thorn0.png
socials:
x: thorn0
github: thorn0
sosukesuzuki:
name: Sosuke Suzuki
url: https://github.com/sosukesuzuki
image_url: https://github.com/sosukesuzuki.png
socials:
x: __sosukesuzuki
github: sosukesuzuki
kddnewton:
name: Kevin Newton
url: https://github.com/kddnewton
image_url: https://github.com/kddnewton.png
socials:
x: kddnewton
github: kddnewton
rattrayalex:
name: Alex Rattray
url: https://github.com/rattrayalex
image_url: https://github.com/rattrayalex.png
socials:
x: RattrayAlex
github: rattrayalex
fabiospampinato:
name: Fabio Spampinato
url: https://github.com/fabiospampinato
image_url: https://github.com/fabiospampinato.png
socials:
x: fabiospampinato
github: fabiospampinato
website/core/Footer.js
-95
View File
@@ -1,95 +0,0 @@
"use strict";
const React = require("react");
const PropTypes = require("prop-types");
const GithubButton = (props) => (
<a
className="github-button"
href={props.config.githubUrl}
data-icon="octicon-star"
data-show-count="true"
aria-label="Star this project on GitHub"
>
Star
</a>
);
GithubButton.propTypes = {
config: PropTypes.object,
};
class Footer extends React.Component {
url(path) {
const language = this.props.language || "en";
return `${this.props.config.baseUrl}docs/${language}${path}`;
}
usersUrl() {
const language = this.props.language || "en";
return `${this.props.config.baseUrl}${language}/users`;
}
render() {
return (
<footer className="footerSection nav-footer" id="footer">
<section className="sitemap">
<a href={this.props.config.baseUrl} className="nav-home">
<img
src={this.props.config.baseUrl + this.props.config.footerIcon}
alt={this.props.config.title}
/>
</a>
<div>
<h5>Docs</h5>
<a href={this.url("/index.html")}>About</a>
<a href={this.url("/install.html")}>Usage</a>
<br />
<a href="https://www.netlify.com">
<img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" />
</a>
</div>
<div>
<h5>Community</h5>
<a href={this.usersUrl()}>User Showcase</a>
<a
href="http://stackoverflow.com/questions/tagged/prettier"
target="_blank"
rel="noopener noreferrer"
>
Stack Overflow
</a>
<a href="https://twitter.com/PrettierCode">
@PrettierCode on Twitter
</a>
<object
type="image/svg+xml"
data="https://img.shields.io/twitter/follow/prettiercode.svg?label=Follow+Prettier&style=social"
>
<a href="https://twitter.com/intent/follow?screen_name=prettiercode">
<img
alt="Follow Prettier on Twitter"
src="https://img.shields.io/twitter/follow/prettiercode.png?label=Follow+Prettier&style=social"
/>
</a>
</object>
</div>
<div>
<h5>More</h5>
<a href={this.props.config.baseUrl + "blog"}>Blog</a>
<a href={this.props.config.githubUrl}>GitHub</a>
<a href={this.props.config.githubUrl + "/issues"}>Issues</a>
<GithubButton config={this.props.config} />
</div>
</section>
</footer>
);
}
}
Footer.propTypes = {
language: PropTypes.string,
config: PropTypes.object,
};
module.exports = Footer;
website/data/languages.yml
+1 -8
View File
@@ -1,5 +1,4 @@
- name: JavaScript
showName: true
image: /images/languages/tools_js.svg
variants:
- "[JSX](https://facebook.github.io/jsx/)"
@@ -7,14 +6,12 @@
- "[TypeScript](https://www.typescriptlang.org)"
- "[JSON](https://json.org)"
- name: HTML
showName: true
image: /images/languages/tools_html.svg
variants:
- "[Vue](https://vuejs.org)"
- "[Angular](https://angular.io)"
- "[Ember / Handlebars](https://emberjs.com)"
- name: CSS
showName: true
image: /images/languages/tools_css.svg
variants:
- "[Less](http://lesscss.org)"
@@ -23,12 +20,10 @@
- "[`styled-jsx`](https://npmjs.com/styled-jsx)"
- name: GraphQL
nameLink: https://graphql.org
showName: true
image: /images/languages/tools_gql.svg
variants:
- "[GraphQL Schemas](https://graphql.org/learn/schema/)"
- name: Markdown
showName: true
image: /images/languages/tools_md.svg
variants:
- "[CommonMark](https://commonmark.org)"
@@ -36,12 +31,10 @@
- "[MDX v1](https://mdxjs.com)"
- name: YAML
nameLink: https://yaml.org
showName: true
image: /images/languages/tools_yaml.svg
variants: []
- name: Community Plugins
nameLink: ./docs/en/plugins.html#community-plugins
showName: true
image: /images/languages/tools_wip.svg
variants:
- "[Apex](https://github.com/dangmai/prettier-plugin-apex)"
@@ -52,4 +45,4 @@
- "[Rust](https://github.com/jinxdash/prettier-plugin-rust)"
- "[TOML](https://github.com/bd82/toml-tools/tree/master/packages/prettier-plugin-toml)"
- "[XML](https://github.com/prettier/plugin-xml)"
- "[And more...](./docs/en/plugins.html#community-plugins)"
- "[And more...](/docs/plugins#community-plugins)"
website/docusaurus.config.js
+261
View File
@@ -0,0 +1,261 @@
// @ts-check
import fs from "node:fs";
import { createRequire } from "node:module";
import { load as parseYaml } from "js-yaml";
import { themes as prismThemes } from "prism-react-renderer";
const require = createRequire(import.meta.url);
const packageJsonFile = new URL("../package.json", import.meta.url);
const packageJson = JSON.parse(fs.readFileSync(packageJsonFile, "utf8"));
const GITHUB_URL = `https://github.com/${packageJson.repository}`;
/**
*
* @param {string} fsPath
*/
function loadYaml(fsPath) {
return parseYaml(fs.readFileSync(new URL(fsPath, import.meta.url), "utf8"));
}
const users = loadYaml("./data/users.yml");
const editors = loadYaml("./data/editors.yml");
const supportedLanguages = loadYaml("./data/languages.yml");
/** @type {import('@docusaurus/types').Config} */
const config = {
title: "Prettier",
tagline: "Opinionated Code Formatter",
favicon: "icon.png",
titleDelimiter: "·",
// Set the production url of your site here
url: packageJson.homepage,
// Set the /<baseUrl>/ pathname under which your site is served
// For GitHub pages deployment, it is often '/<projectName>/'
baseUrl: "/",
// GitHub pages deployment config.
// If you aren't using GitHub pages, you don't need these.
organizationName: "prettier", // Usually your GitHub org/user name.
projectName: packageJson.name, // Usually your repo name.
customFields: {
users,
editors,
supportedLanguages,
githubUrl: GITHUB_URL,
tideliftUrl:
"https://tidelift.com/subscription/pkg/npm-prettier?utm_source=npm-prettier&utm_medium=referral&utm_campaign=website",
},
stylesheets: [
"https://unpkg.com/@sandhose/prettier-animated-logo@1.0.3/dist/wide.css",
],
onBrokenLinks: "throw",
onBrokenMarkdownLinks: "warn",
// Even if you don't use internationalization, you can use this field to set
// useful metadata like html lang. For example, if your site is Chinese, you
// may want to replace "en" with "zh-Hans".
i18n: {
defaultLocale: "en",
locales: ["en"],
},
presets: [
[
"classic",
/** @type {import('@docusaurus/preset-classic').Options} */
{
docs: {
sidebarPath: "./sidebars.json",
/** @type {import('@docusaurus/plugin-content-docs').EditUrlFunction} */
editUrl: ({ docPath }) => `${GITHUB_URL}/edit/main/docs/${docPath}`,
path: "../docs",
sidebarCollapsed: false,
breadcrumbs: false,
versions: {
current: {
label: "next",
badge: false,
},
stable: {
label: "stable",
badge: false,
},
},
},
blog: {
feedOptions: {
type: ["rss", "atom"],
xslt: true,
},
blogTitle: "Prettier blog",
blogDescription: "Read blog posts about Prettier from the team",
editUrl: `${GITHUB_URL}/edit/main/website/`,
blogSidebarCount: 10,
blogSidebarTitle: "Recent posts",
postsPerPage: 10,
onInlineTags: "warn",
onInlineAuthors: "warn",
onUntruncatedBlogPosts: "throw",
},
theme: {
customCss: [
"./src/css/custom.css",
require.resolve("react-tweet/theme.css"),
],
},
gtag: {
trackingID: "G-T57CP1SG02",
anonymizeIP: true,
},
},
],
],
themeConfig:
/** @type {import('@docusaurus/preset-classic').ThemeConfig} */
{
// Replace with your project's social card
image: "icon.png",
colorMode: {
respectPrefersColorScheme: true,
},
navbar: {
title: "Prettier",
logo: {
alt: "",
src: "icon.png",
},
style: "dark",
items: [
{
type: "docsVersionDropdown",
},
{
to: "pathname:///playground/",
label: "Playground",
position: "right",
target: "_self",
},
{
type: "docSidebar",
sidebarId: "docs",
label: "Docs",
position: "right",
},
{ to: "/blog", label: "Blog", position: "right" },
{
href: "https://opencollective.com/prettier",
label: "Donate",
position: "right",
},
{
"aria-label": "GitHub repository",
className: "header-github-link",
href: GITHUB_URL,
position: "right",
},
],
},
footer: {
style: "dark",
links: [
{
title: "Docs",
items: [
{
label: "About",
to: "/docs",
},
{
label: "Usage",
to: "/docs/install",
},
{
html: /*html*/ `
<br />
<a href="https://www.netlify.com" target="_blank" rel="noreferrer noopener" aria-label="Deploys by Netlify">
<img src="https://www.netlify.com/img/global/badges/netlify-color-accent.svg" alt="Deploys by Netlify" width="114" height="51" />
</a>
`,
},
],
},
{
title: "Community",
items: [
{
label: "User Showcase",
to: "/users",
},
{
label: "Stack Overflow",
href: "http://stackoverflow.com/questions/tagged/prettier",
},
{
label: "@PrettierCode on Twitter",
href: "https://twitter.com/PrettierCode",
},
],
},
{
title: "More",
items: [
{
label: "Blog",
to: "/blog",
},
{
label: "GitHub",
href: GITHUB_URL,
},
{
label: "Issues",
href: `${GITHUB_URL}/issues`,
},
{
html: /*html*/ `
<a
href="https://github.com/prettier/prettier"
target="_blank"
rel="noreferrer noopener"
aria-label="Star this project on GitHub"
class="footer__github-stars"
>
<img src="https://img.shields.io/github/stars/prettier/prettier?style=social" alt="Star this project on GitHub" />
</a>
`,
},
],
},
],
},
algolia: {
appId: "OHFQ1H5TQS",
apiKey: "46e1871dfdc7b4e16290acceb5b0f459",
indexName: "prettier",
},
prism: {
additionalLanguages: [
"bash",
"diff",
"handlebars",
"markup-templating", // Required for "handlebars"
"toml",
"ini",
"vim",
"scss",
"less",
],
theme: prismThemes.github,
darkTheme: prismThemes.dracula,
},
},
};
export default config;
website/package.json
+36 -9
View File
@@ -2,29 +2,56 @@
"private": true,
"license": "MIT",
"scripts": {
"build": "webpack --mode=production && docusaurus-build",
"start": "concurrently \"docusaurus-start\" \"webpack --mode=development --watch\"",
"update-stable-docs": "rimraf ./versioned_docs ./versions.json && docusaurus-version stable && node ./scripts/replace-version-placeholder.mjs"
"playground:build": "webpack --mode=production",
"playground:watch": "webpack --mode=development --watch",
"docusaurus": "docusaurus",
"start": "concurrently \"yarn playground:watch\" \"docusaurus start\"",
"build": "yarn playground:build && docusaurus build",
"swizzle": "docusaurus swizzle",
"clear": "docusaurus clear",
"serve": "docusaurus serve",
"write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids",
"update-stable-docs": "node ./scripts/update-stable-docs.mjs"
},
"dependencies": {
"@docusaurus/core": "3.7.0",
"@docusaurus/preset-classic": "3.7.0",
"@mdx-js/react": "^3.0.0",
"@sandhose/prettier-animated-logo": "1.0.3",
"clipboard": "2.0.11",
"clsx": "^2.0.0",
"codemirror-graphql": "2.2.0",
"lz-string": "1.5.0",
"prop-types": "15.8.1",
"react": "18.3.1",
"react-dom": "18.3.1"
"prism-react-renderer": "^2.3.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-markdown": "9.0.3",
"react-tweet": "3.2.1"
},
"devDependencies": {
"@babel/core": "7.26.0",
"@babel/preset-env": "7.26.0",
"@sandhose/prettier-animated-logo": "1.0.3",
"@docusaurus/module-type-aliases": "3.7.0",
"@docusaurus/types": "3.7.0",
"@types/js-yaml": "4.0.9",
"babel-loader": "9.2.1",
"concurrently": "9.1.2",
"docusaurus": "1.14.7",
"js-yaml": "4.1.0",
"rimraf": "6.0.1",
"webpack": "5.97.1",
"webpack-cli": "6.0.1"
},
"browserslist": {
"production": [
">0.5%",
"not dead",
"not op_mini all"
],
"development": [
"last 3 chrome version",
"last 3 firefox version",
"last 5 safari version"
]
},
"packageManager": "yarn@4.6.0"
}
website/pages/en/help/index.js
-46
View File
@@ -1,46 +0,0 @@
"use strict";
const React = require("react");
const { Container, GridBlock } = require("../../../core/CompLibrary.js");
class Help extends React.Component {
render() {
const supportLinks = [
{
content:
"Learn more using the [documentation on this site.](/docs/en/why-prettier.html)\n",
title: "Browse Docs",
},
{
content: "Ask questions about the documentation and project\n",
title: "Join the community",
},
{
content: "Find out what's new with this project\n",
title: "Stay up to date",
},
];
return (
<div>
<div className="docMainWrapper wrapper">
<Container className="mainContainer documentContainer postContainer">
<div className="post">
<header className="postHeader">
<h2>Need help?</h2>
</header>
<p>This project is maintained by a dedicated group of people;</p>
<GridBlock contents={supportLinks} layout="threeColumn" />
</div>
</Container>
</div>
</div>
);
}
}
Help.defaultProps = {
language: "en",
};
module.exports = Help;
website/pages/en/index.js
-420
View File
@@ -1,420 +0,0 @@
"use strict";
const React = require("react");
const PropTypes = require("prop-types");
const AnimatedLogo = require("@sandhose/prettier-animated-logo");
const { MarkdownBlock, Container } = require("../../core/CompLibrary.js");
const siteConfig = require(process.cwd() + "/siteConfig.js");
const ButtonGroup = (props) => (
<div className="buttonGroup buttonWrapper">{props.children}</div>
);
ButtonGroup.propTypes = {
children: PropTypes.node,
};
class Button extends React.Component {
render() {
return (
<div className="pluginWrapper buttonWrapper">
<a className="button" href={this.props.href} target={this.props.target}>
{this.props.children}
</a>
</div>
);
}
}
Button.defaultProps = {
target: "_self",
};
Button.propTypes = {
href: PropTypes.string,
target: PropTypes.string,
children: PropTypes.any,
};
function Tidelift() {
return (
<a className="tidelift" href={siteConfig.tideliftUrl}>
PRETTIER FOR ENTERPRISE
</a>
);
}
const HomeSplash = (props) => (
<div className="homeContainer">
<Tidelift />
<div className="homeSplashFade">
<div className="wrapper homeWrapper">
<div className="animatedLogoWrapper">
<AnimatedLogo version="wide" />
</div>
<div className="inner">
<div className="section promoSection">
<div className="promoRow">
<div className="pluginRowBlock">
<Button href="/playground/">Try It Online</Button>&nbsp;
<Button href={"/docs/" + props.language + "/install.html"}>
Install Prettier
</Button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
HomeSplash.propTypes = {
language: PropTypes.string,
};
const TldrSection = ({ language }) => (
<div className="tldrSection productShowcaseSection lightBackground">
<Container>
<div
style={{
display: "flex",
flexFlow: "row wrap",
justifyContent: "space-evenly",
}}
>
<div style={{ display: "flex", flexDirection: "column" }}>
<h2>What is Prettier?</h2>
<ul style={{ flex: "1" }}>
<li>An opinionated code formatter</li>
<li>Supports many languages</li>
<li>Integrates with most editors</li>
<li>
<a href={"/docs/" + language + "/option-philosophy.html"}>
Has few options &raquo;
</a>
</li>
</ul>
</div>
<div style={{ display: "flex", flexDirection: "column" }}>
<h2>Why?</h2>
<ul style={{ flex: "1" }}>
<li>Your code is formatted on save</li>
<li>No need to discuss style in code review</li>
<li>Saves you time and energy</li>
<li>
<a href={"/docs/" + language + "/why-prettier.html"}>
And more &raquo;
</a>
</li>
</ul>
</div>
</div>
</Container>
</div>
);
TldrSection.propTypes = {
language: PropTypes.string,
};
const Language = ({ name, nameLink, showName, image, variants }) => (
<div
className="languageCategory"
style={{
display: "flex",
alignItems: "flex-start",
paddingBottom: "1em",
}}
>
<img src={image} style={{ width: "50px", padding: "0 20px" }} />
<ul>
{showName && (
<li className="accented">
{nameLink ? <a href={nameLink}>{name}</a> : name}
</li>
)}
{variants.map((variant) => (
<li key={variant}>
<MarkdownBlock>{variant}</MarkdownBlock>
</li>
))}
</ul>
</div>
);
Language.propTypes = {
name: PropTypes.string,
nameLink: PropTypes.string,
showName: PropTypes.bool,
image: PropTypes.string,
variants: PropTypes.array,
};
const LanguagesSection = () => {
const languageChunks = siteConfig.supportedLanguages.reduce(
(acc, language) => {
const last = acc.at(-1);
if (
last &&
last.length < 2 &&
last.reduce((sum, lang) => sum + lang.variants.length, 0) +
language.variants.length <
9
) {
last.push(language);
} else {
acc.push([language]);
}
return acc;
},
[],
);
return (
<div
className="languagesSection productShowcaseSection"
style={{ textAlign: "center" }}
>
<Container>
<h2>Works with the Tools You Use</h2>
<div
style={{
display: "flex",
flexFlow: "row wrap",
justifyContent: "space-around",
}}
>
{languageChunks.map((languageChunk, index) => (
<div key={index} style={{ flex: "1 1 auto" }}>
{languageChunk.map((language) => (
<Language key={language.name} {...language} />
))}
</div>
))}
</div>
</Container>
</div>
);
};
const Editor = ({ content = "", image, name }) => (
<div className="editor">
<img className="editorImage" src={image} />
<div className="editorInfo">
<h3 className="editorName">{name}</h3>
<MarkdownBlock>{content.replaceAll("\n", " \n")}</MarkdownBlock>
</div>
</div>
);
Editor.propTypes = {
content: PropTypes.string,
image: PropTypes.string.isRequired,
name: PropTypes.string.isRequired,
};
const EditorSupportSection = () => (
<div className="editorSupportSection productShowcaseSection lightBackground">
<Container>
<h2>Editor Support</h2>
<div
style={{
display: "flex",
flexFlow: "row wrap",
justifyContent: "space-around",
}}
>
{siteConfig.editors.map((editor) => (
<Editor key={editor.name} {...editor} />
))}
</div>
</Container>
<div style={{ float: "right" }}>
<span>Got more? </span>
<a
href={`${siteConfig.githubUrl}/edit/main/website/data/editors.yml`}
className="button"
>
Send a PR
</a>
</div>
</div>
);
const UsersSection = ({ language }) => {
const showcase = siteConfig.users
.filter((user) => user.pinned)
.map((user, i) => (
<a key={i} className="growOnHover alignCenter" href={user.infoLink}>
<img className="user" src={user.greyImage} title={user.caption} />
</a>
));
return (
<div className="usersSection productShowcaseSection">
<Container>
<h2>Used By People You Rely On</h2>
<div style={{ textAlign: "right" }} />
<div
style={{
display: "flex",
flexFlow: "row wrap",
justifyContent: "space-around",
}}
>
{showcase}
</div>
<div className="more-users">
<a
className="button"
href={siteConfig.baseUrl + language + "/users/"}
target="_self"
style={{ marginRight: "10px" }}
>
See Others
</a>
</div>
<h2 className="ecosystemSubHeader">Established in the Ecosystem</h2>
<div
className="ecosystemSubSection"
style={{
display: "flex",
justifyContent: "space-around",
flexFlow: "row wrap",
}}
>
<div style={{ display: "flex", marginTop: "22px" }}>
<a
href="https://2021.stateofjs.com/en-US/other-tools/utilities"
style={{ marginTop: "15px" }}
>
<img
src="/images/state_of_js_grey.svg"
style={{ width: "80px" }}
/>
</a>
<div style={{ marginLeft: ".7em", width: "260px" }}>
<p>Regularly used by:</p>
<ul style={{ marginBottom: "0" }}>
<li>
<a href="https://2021.stateofjs.com/en-US/other-tools/#utilities">
More than 83% of respondents to State of JS 2021.
</a>
</li>
<li>
<a href="https://2020.stateofjs.com/en-US/other-tools/#utilities">
More than 70% of respondents to State of JS 2020.
</a>
</li>
</ul>
</div>
</div>
<div style={{ display: "flex", marginTop: "22px" }}>
<a href="https://github.com/prettier/prettier">
<img src="/images/github_grey.svg" style={{ width: "80px" }} />
</a>
<div style={{ marginLeft: ".7em", width: "260px" }}>
<p>
More than{" "}
<strong data-placeholder="dependent-github">8.9 million</strong>{" "}
dependent repositories on GitHub
</p>
<Button href="https://github.com/prettier/prettier/network/dependents">
Check Them Out
</Button>
</div>
</div>
<div style={{ display: "flex", marginTop: "22px" }}>
<a href="https://npmjs.com/package/prettier">
<img src="/images/npm_grey.svg" style={{ width: "80px" }} />
</a>
<div style={{ marginLeft: ".7em", width: "260px" }}>
<p>
More than{" "}
<strong data-placeholder="dependent-npm">18.7k</strong>{" "}
dependent packages on npm
</p>
<Button href="https://www.npmjs.com/browse/depended/prettier">
See them all
</Button>
</div>
</div>
</div>
</Container>
</div>
);
};
UsersSection.propTypes = {
language: PropTypes.string,
};
const SyntaxSection = () => (
// eslint-disable-next-line react/jsx-no-target-blank
<a
href="https://sentry.shop/products/syntax-prettier-tee"
target="_blank"
className="syntaxLink"
style={{
color: "black",
fontSize: 20,
fontWeight: "bold",
}}
>
<div
style={{
backgroundColor: "#f8bc45",
justifyContent: "center",
display: "flex",
paddingTop: 20,
}}
>
<div
style={{
width: 860,
display: "flex",
justifyContent: "center",
flexDirection: "column",
}}
>
<p>
Limited edition tshirts are now available to buy! $10 per tshirt goes
to maintain the project.
</p>
<img width={860} src="/images/syntaxfm/1.webp" />
</div>
</div>
</a>
);
class Index extends React.Component {
render() {
const language = this.props.language || "en";
return (
<div>
<script src="landing.js" />
<HomeSplash language={language} />
<div className="mainContainer landingContainer">
<SyntaxSection />
<TldrSection language={language} />
<LanguagesSection />
<EditorSupportSection />
<UsersSection language={language} />
</div>
</div>
);
}
}
Index.propTypes = {
language: PropTypes.string,
};
module.exports = Index;
website/pages/en/users/index.js
-67
View File
@@ -1,67 +0,0 @@
"use strict";
const React = require("react");
const { Container } = require("../../../core/CompLibrary.js");
const siteConfig = require(process.cwd() + "/siteConfig.js");
class Users extends React.Component {
render() {
const showcase = siteConfig.users.map((user, i) => (
<a key={i} href={user.infoLink}>
<img src={user.image} title={user.caption} />
</a>
));
return (
<div>
<div className="mainContainer">
<Container padding={["bottom", "top"]}>
<div className="showcaseSection">
<div className="prose">
<h1>Who’s Using This?</h1>
</div>
<blockquote
style={{
fontSize: "125%",
textAlign: "left",
}}
>
<p>Prettier is regularly used by:</p>
<ul>
<li>
<a href="https://2021.stateofjs.com/en-US/other-tools/#utilities">
More than <strong>83%</strong> of respondents to State of
JS 2021 (10282 developers out of 12360).
</a>
</li>
<li>
<a href="https://2020.stateofjs.com/en-US/other-tools/#utilities">
More than <strong>70%</strong> of respondents to State of
JS 2020 (14880 developers out of 20974).
</a>
</li>
</ul>
</blockquote>
<div className="logos">{showcase}</div>
<div className="prose">
...and{" "}
<a href="https://www.npmjs.com/browse/depended/prettier">
many more projects
</a>
</div>
</div>
</Container>
</div>
</div>
);
}
}
Users.defaultProps = {
language: "en",
};
Users.title = "Who's using Prettier?";
module.exports = Users;
website/pages/en/versions.js
-96
View File
@@ -1,96 +0,0 @@
"use strict";
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
const React = require("react");
const { Container } = require("../../core/CompLibrary.js");
const CWD = process.cwd();
const versions = require(`${CWD}/versions.json`);
const rootPackageJson = require(`${CWD}/../package.json`);
const defaultBranchVersion = rootPackageJson.version;
const isDefaultBranchDevVersion = defaultBranchVersion.endsWith("-dev");
const devVersion = isDefaultBranchDevVersion ? defaultBranchVersion : null;
const latestVersion = isDefaultBranchDevVersion
? rootPackageJson.devDependencies.prettier
: defaultBranchVersion;
const [latestDocsVersion, ...pastDocsVersions] = versions;
function Versions(props) {
const { config: siteConfig } = props;
return (
<div className="docMainWrapper wrapper">
<Container className="mainContainer versionsContainer">
<div className="post">
<header className="postHeader">
<h1>{siteConfig.title} Versions</h1>
</header>
<table className="versions">
<tbody>
<tr>
<th>Version</th>
<th>Install with</th>
<th>Documentation</th>
</tr>
<tr>
<td>{latestVersion}</td>
<td>
<code>npm install prettier</code>
</td>
<td>
<a href={`${siteConfig.baseUrl}docs/en/index.html`}>
{latestDocsVersion}
</a>{" "}
(latest)
</td>
</tr>
<tr>
<td>{devVersion}</td>
<td>
<code>npm install prettier/prettier</code>
</td>
<td>
<a href={`${siteConfig.baseUrl}docs/en/next/index.html`}>
next
</a>{" "}
(main)
</td>
</tr>
{pastDocsVersions.length > 0 &&
pastDocsVersions.map((pastDocsVersion, index) => {
const pastMajorVersion = pastDocsVersion.replace(/^v/u, "");
return (
<tr key={index}>
<td>{pastMajorVersion}.x</td>
<td>
<code>
npm install prettier@
{pastMajorVersion}
</code>
</td>
<td>
<a
href={`${siteConfig.baseUrl}docs/en/${pastDocsVersion}/index.html`}
>
{pastDocsVersion}
</a>
</td>
</tr>
);
})}
</tbody>
</table>
</div>
</Container>
</div>
);
}
module.exports = Versions;
website/scripts/replace-version-placeholder.mjs
-22
View File
@@ -1,22 +0,0 @@
import fs from "node:fs/promises";
const DIRECTORY = new URL("../versioned_docs/version-stable/", import.meta.url);
let version = process.env.PRETTIER_VERSION;
if (!version) {
const packageJsonFile = new URL("../../package.json", import.meta.url);
const packageJson = JSON.parse(await fs.readFile(packageJsonFile));
({ version } = packageJson);
}
await Promise.all(
["browser.md"].map(async (file) => {
file = new URL(file, DIRECTORY);
let content = await fs.readFile(file, "utf8");
content = content.replaceAll("%PRETTIER_VERSION%", version);
await fs.writeFile(file, content);
}),
);
website/scripts/update-stable-docs.mjs
+55
View File
@@ -0,0 +1,55 @@
import fs from "node:fs/promises";
const version = await getPrettierVersion();
// Copy sidebar config
const STABLE_SIDEBAR = relativeURL(
"../versioned_sidebars/version-stable-sidebars.json",
);
const CURRENT_SIDEBAR = relativeURL("../sidebars.json");
await fs.copyFile(CURRENT_SIDEBAR, STABLE_SIDEBAR);
// Copy docs
const STABLE_DOCS_DIRECTORY = relativeURL("../versioned_docs/version-stable/");
const CURRENT_DOCS_DIRECTORY = relativeURL("../../docs/");
await fs.rm(STABLE_DOCS_DIRECTORY, { recursive: true, force: true });
await fs.mkdir(STABLE_DOCS_DIRECTORY, { recursive: true, force: true });
await fs.cp(CURRENT_DOCS_DIRECTORY, STABLE_DOCS_DIRECTORY, { recursive: true });
// Replace version placeholders
await Promise.all(
["browser.md"].map(async (file) => {
file = new URL(file, STABLE_DOCS_DIRECTORY);
await replaceVersionPlaceholder(file, version);
}),
);
async function getPrettierVersion() {
const version = process.env.PRETTIER_VERSION;
if (!version) {
const packageJsonFile = new URL("../../package.json", import.meta.url);
const packageJson = JSON.parse(await fs.readFile(packageJsonFile));
return packageJson.version;
}
return version;
}
/**
* @param {import("fs").PathLike} path
*/
function relativeURL(path) {
return new URL(path, import.meta.url);
}
/**
* @param {import("fs").PathLike} path
* @param {string} version
*/
async function replaceVersionPlaceholder(path, version) {
let content = await fs.readFile(path, "utf8");
content = content.replaceAll("%PRETTIER_VERSION%", version);
await fs.writeFile(path, content);
}
website/siteConfig.js
-98
View File
@@ -1,98 +0,0 @@
"use strict";
// Docs: https://docusaurus.io/docs/en/site-config.html
const path = require("path");
const fs = require("fs");
const { load: parseYaml } = require("js-yaml");
const PACKAGE = require("../package.json");
const GITHUB_URL = `https://github.com/${PACKAGE.repository}`;
function loadYaml(fsPath) {
return parseYaml(fs.readFileSync(path.join(__dirname, fsPath), "utf8"));
}
const users = loadYaml("./data/users.yml");
const editors = loadYaml("./data/editors.yml");
const supportedLanguages = loadYaml("./data/languages.yml");
const siteConfig = {
title: "Prettier",
tagline: "Opinionated Code Formatter",
githubUrl: GITHUB_URL,
url: PACKAGE.homepage,
baseUrl: "/",
projectName: PACKAGE.name,
repo: PACKAGE.repository,
cname: "prettier.io",
users,
editors,
supportedLanguages,
tideliftUrl:
"https://tidelift.com/subscription/pkg/npm-prettier?utm_source=npm-prettier&utm_medium=referral&utm_campaign=website",
/* base url for editing docs, usage example: editUrl + 'en/doc1.md' */
editUrl: `${GITHUB_URL}/edit/main/docs/`,
headerLinks: [
{ href: "/playground/", label: "Playground" },
{ doc: "index", label: "Docs" },
{ blog: true, label: "Blog" },
{ search: true },
{ href: "https://opencollective.com/prettier", label: "Donate" },
{ href: GITHUB_URL, label: "GitHub" },
],
/* path to images for header/footer */
headerIcon: "icon.png",
footerIcon: "icon.png",
favicon: "icon.png",
/* colors for website */
colors: {
primaryColor: "#1A2B34",
secondaryColor: "#808080",
},
highlight: {
theme: "default",
version: require("highlight.js/package.json").version,
},
usePrism: ["javascript", "jsx", "typescript", "ts", "js", "html", "css"],
useEnglishUrl: true,
scripts: [
"https://buttons.github.io/buttons.js",
"https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js",
"/js/code-block-buttons.js",
],
stylesheets: [
"//unpkg.com/@sandhose/prettier-animated-logo@1.0.3/dist/wide.css",
],
algolia: {
apiKey: process.env.ALGOLIA_PRETTIER_API_KEY,
indexName: "prettier",
},
markdownPlugins: [
// ignore `<!-- prettier-ignore -->` before passing into Docusaurus to avoid mis-parsing (#3322)
(md) => {
md.block.ruler.before(
"htmlblock",
"prettierignore",
(state, startLine) => {
const pos = state.bMarks[startLine];
const max = state.eMarks[startLine];
if (/<!-- prettier-ignore -->/u.test(state.src.slice(pos, max))) {
state.line += 1;
return true;
}
return false;
},
);
},
],
separateCss: ["static/separate-css"],
gaTrackingId: "UA-111350464-1",
twitter: true,
twitterUsername: "PrettierCode",
twitterImage: "icon.png",
ogImage: "icon.png",
onPageNav: "separate",
};
module.exports = siteConfig;
website/src/css/custom.css
+98
View File
@@ -0,0 +1,98 @@
/**
* Any CSS included here will be global. The classic template
* bundles Infima by default. Infima is a CSS framework designed to
* work well for content-centric websites.
*/
/* You can override the default Infima variables here. */
:root {
--ifm-color-primary: #19828a;
--ifm-color-primary-dark: #16757c;
--ifm-color-primary-darker: #156e75;
--ifm-color-primary-darkest: #115b61;
--ifm-color-primary-light: #1b8f98;
--ifm-color-primary-lighter: #1d959f;
--ifm-color-primary-lightest: #21a9b3;
--ifm-code-font-size: 90%;
--ifm-button-border-radius: calc(0.8rem * var(--ifm-button-size-multiplier));
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
--navbar-color: #1a2b34;
--color-yellow: #f8bc45;
--color-yellow-dark: #f7b126;
--color-yellow-darker: #f6ab17;
--color-yellow-darkest: #d69108;
--color-yellow-light: #f9c764;
--color-yellow-lighter: #facd73;
--color-yellow-lightest: #fbdda1;
--color-pink: #c596c7;
--color-pink-dark: #b87fbb;
--color-pink-darker: #b274b5;
--color-pink-darkest: #9c559f;
--color-pink-light: #d2add3;
--color-pink-lighter: #d8b8d9;
--color-pink-lightest: #ebdaeb;
}
[data-theme="dark"] {
--ifm-color-primary: #56b3b4;
--ifm-color-primary-dark: #4aa5a6;
--ifm-color-primary-darker: #459c9d;
--ifm-color-primary-darkest: #398081;
--ifm-color-primary-light: #68bbbc;
--ifm-color-primary-lighter: #72bfc0;
--ifm-color-primary-lightest: #8dcccd;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
.button--primary:active,
.button--primary.button--active {
--ifm-button-background-color: var(--ifm-color-primary-dark);
--ifm-button-border-color: var(--ifm-color-primary-dark);
}
.button--secondary:active,
.button--secondary.button--active {
--ifm-button-background-color: var(--ifm-color-secondary-dark);
--ifm-button-border-color: var(--ifm-color-secondary-dark);
}
.navbar {
--ifm-navbar-background-color: var(--navbar-color);
--ifm-navbar-link-hover-color: #68bbbc;
}
.hero {
--ifm-hero-background-color: var(--navbar-color);
}
.footer {
--ifm-footer-background-color: #20232a;
}
.header-github-link::before {
content: "";
width: 24px;
height: 24px;
display: flex;
background-color: var(--ifm-navbar-link-color);
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E");
transition: background-color var(--ifm-transition-fast)
var(--ifm-transition-timing-default);
}
.header-github-link:hover::before {
background-color: var(--ifm-navbar-link-hover-color);
}
.menu__link {
line-height: 1.15;
}
.footer__github-stars {
display: block;
margin-top: 8px;
}
website/src/pages/help/index.jsx
+55
View File
@@ -0,0 +1,55 @@
import Link from "@docusaurus/Link";
import Layout from "@theme/Layout";
import Heading from "@theme/Heading";
/**
*
* @param {object} props
* @param {string} props.title
* @param {ReactNode} props.children
*/
function Card({ title, children }) {
return (
<div class="card margin-vert--sm">
<div class="card__header">
<h2>{title}</h2>
</div>
<div class="card__body">
<p>{children}</p>
</div>
</div>
);
}
export default function Help() {
return (
<Layout title="Prettier · Opinionated Code Formatter">
<main className="margin-vert--xl container">
<div className="margin-bottom--lg">
<Heading as="h1">Need help?</Heading>
<div>This project is maintained by a dedicated group of people;</div>
</div>
<div className="row">
<div className="col">
<Card title="Browse Docs">
Learn more using the{" "}
<Link to="/docs">documentation on this site</Link>.
</Card>
</div>
<div className="col">
<Card title="Join the community">
Ask questions about the documentation and project.
</Card>
</div>
<div className="col">
<Card title="Stay up to date">
Find out what's new with this project.
</Card>
</div>
</div>
</main>
</Layout>
);
}
website/src/pages/index.jsx
+371
View File
@@ -0,0 +1,371 @@
import clsx from "clsx";
import Link from "@docusaurus/Link";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Layout from "@theme/Layout";
import AnimatedLogo from "@sandhose/prettier-animated-logo";
import Heading from "@theme/Heading";
import styles from "./index.module.css";
import { useState } from "react";
import Markdown from "react-markdown";
function DraggableLogo() {
const [rolling, setRolling] = useState(false);
/**
*
* @param {DragEvent} event
*/
const onDragStart = (event) => {
event.preventDefault();
setRolling(true);
};
return (
<div
className={styles.logoWrapper}
draggable="true"
onDragStart={onDragStart}
onTouchStart={onDragStart}
>
<AnimatedLogo
version="wide"
rolling={rolling}
onAnimationEnd={() => setRolling(false)}
/>
</div>
);
}
function Tidelift() {
const { siteConfig } = useDocusaurusContext();
const tideliftUrl = siteConfig.customFields.tideliftUrl;
return (
<Link className={styles.tidelift} to={tideliftUrl}>
PRETTIER FOR ENTERPRISE
</Link>
);
}
function HomepageHeader() {
return (
<header className={clsx("hero hero--dark", styles.heroBanner)}>
<Tidelift />
<div className="container">
<div className={styles.logoWrapperContainer}>
<DraggableLogo />
</div>
<div className={styles.heroButtonContainer}>
<Link
className={clsx(
"button button--primary button--lg",
styles.heroButton,
)}
to="pathname:///playground/"
target="_self"
>
Try It Online
</Link>
<Link
className={clsx(
"button button--secondary button--lg",
styles.heroButton,
)}
to="/docs/install"
>
Install Prettier
</Link>
</div>
</div>
</header>
);
}
function SyntaxSection() {
return (
<section className={styles.syntaxSection}>
<Link
to="https://sentry.shop/products/syntax-prettier-tee"
className={clsx(styles.syntaxLink, "container")}
>
<div className="margin-bottom--md">
Limited edition tshirts are now available to buy! $10 per tshirt goes
to maintain the project.
</div>
<img width={860} alt="" src="/images/syntaxfm/1.webp" />
</Link>
</section>
);
}
function TldrSection() {
return (
<div className={clsx(styles.tldrSection, styles.sectionPadding)}>
<div className={clsx("container", styles.tldrSectionInner)}>
<div className={styles.tldrSectionColumn}>
<Heading as="h2">What is Prettier?</Heading>
<ul>
<li>An opinionated code formatter</li>
<li>Supports many languages</li>
<li>Integrates with most editors</li>
<li>
<a href={"/docs/option-philosophy"}>Has few options &raquo;</a>
</li>
</ul>
</div>
<div className={styles.tldrSectionColumn}>
<Heading as="h2">Why?</Heading>
<ul>
<li>Your code is formatted on save</li>
<li>No need to discuss style in code review</li>
<li>Saves you time and energy</li>
<li>
<Link to={"/docs/why-prettier"}>And more &raquo;</Link>
</li>
</ul>
</div>
</div>
</div>
);
}
function LanguagesSection() {
const { siteConfig } = useDocusaurusContext();
const languages = siteConfig.customFields.supportedLanguages;
const languageChunks = languages.reduce((acc, language) => {
const last = acc.at(-1);
if (
last &&
last.length < 2 &&
last.reduce((sum, lang) => sum + lang.variants.length, 0) +
language.variants.length <
9
) {
last.push(language);
} else {
acc.push([language]);
}
return acc;
}, []);
return (
<section className={clsx(styles.sectionPadding, styles.languageSection)}>
<div className="container">
<Heading as="h2">Works with the Tools You Use</Heading>
<div className={styles.languageSectionGrid}>
{languageChunks.map((languageChunk, index) => (
<div key={index}>
{languageChunk.map((language) => (
<LanguageItem key={language.name} {...language} />
))}
</div>
))}
</div>
</div>
</section>
);
}
/**
*
* @param {object} props
* @param {string} props.name
* @param {string?} props.nameLink
* @param {string} props.image
* @param {string[]} props.variants
*/
function LanguageItem({ name, nameLink, image, variants }) {
return (
<div className={styles.languageItem}>
<img src={image} className={styles.languageItemImage} alt="" />
<ul className={styles.languageItemList}>
<li>{nameLink ? <a href={nameLink}>{name}</a> : name}</li>
{variants.map((variant) => (
<li key={variant}>
<Markdown>{variant}</Markdown>
</li>
))}
</ul>
</div>
);
}
function EditorSupportSection() {
const { siteConfig } = useDocusaurusContext();
const editors = siteConfig.customFields.editors;
const githubUrl = siteConfig.customFields.githubUrl;
return (
<div className={clsx(styles.sectionPadding, styles.editorSection)}>
<div className="container">
<Heading as="h2">Editor Support</Heading>
<div className={styles.editorSectionGrid}>
{editors.map((editor) => (
<Editor key={editor.name} {...editor} />
))}
</div>
<div className={styles.editorSectionButtonContainer}>
<div>
<span className="margin-right--sm">Got more?</span>
<Link
to={`${githubUrl}/edit/main/website/data/editors.yml`}
className={clsx("button button--outline button--primary")}
>
Send a PR
</Link>
</div>
</div>
</div>
</div>
);
}
/**
*
* @param {object} props
* @param {string} props.content
* @param {string} props.image
* @param {string} props.name
*/
function Editor({ content = "", image, name }) {
return (
<div className={styles.editorItem}>
<img src={image} className={styles.editorItemImage} alt="" />
<div>
<Heading as="h3">{name}</Heading>
<Markdown>{content.replaceAll("\n", " \n")}</Markdown>
</div>
</div>
);
}
function UsersSection() {
const { siteConfig } = useDocusaurusContext();
const users = siteConfig.customFields.users;
const showcase = users
.filter((user) => user.pinned)
.map((user, i) => (
<a key={i} href={user.infoLink} className={styles.userItem}>
<img
src={user.greyImage}
title={user.caption}
className={styles.userItemImage}
/>
</a>
));
return (
<div className={clsx(styles.sectionPadding, styles.userSection)}>
<div className="container padding-bottom--md">
<Heading as="h2">Used By People You Rely On</Heading>
<div className={styles.userSectionGrid}>{showcase}</div>
<div className={styles.userSectionButtonContainer}>
<div>
<Link to="/users" className={clsx("button button--primary")}>
See others
</Link>
</div>
</div>
</div>
<div className="container">
<Heading as="h2">Established in the Ecosystem</Heading>
<div className={styles.ecosystemGrid}>
<div className={styles.ecosystemGridItem}>
<Link
to="https://2021.stateofjs.com/en-US/other-tools/utilities"
style={{ marginTop: "15px" }}
aria-label="Statistic for utility tools in the State of JavaScript survey"
>
<img src="/images/state_of_js_grey.svg" alt="" />
</Link>
<div>
<p>Regularly used by:</p>
<ul>
<li>
<Link to="https://2021.stateofjs.com/en-US/other-tools/#utilities">
More than 83% of respondents to State of JS 2021.
</Link>
</li>
<li>
<Link to="https://2020.stateofjs.com/en-US/other-tools/#utilities">
More than 70% of respondents to State of JS 2020.
</Link>
</li>
</ul>
</div>
</div>
<div className={styles.ecosystemGridItem}>
<Link
to="https://github.com/prettier/prettier"
aria-label="Prettier on GitHub"
>
<img src="/images/github_grey.svg" alt="" />
</Link>
<div>
<p>
More than{" "}
<strong data-placeholder="dependent-github">8.9 million</strong>{" "}
dependent repositories on GitHub
</p>
<Link
className="button button--primary"
to="https://github.com/prettier/prettier/network/dependents"
>
Check Them Out
</Link>
</div>
</div>
<div className={styles.ecosystemGridItem}>
<Link
to="https://npmjs.com/package/prettier"
aria-label="Prettier on NPM"
>
<img src="/images/npm_grey.svg" alt="" />
</Link>
<div>
<p>
More than{" "}
<strong data-placeholder="dependent-npm">18.7k</strong>{" "}
dependent packages on npm
</p>
<Link
className="button button--primary"
to="https://www.npmjs.com/browse/depended/prettier"
aria-label="See every dependent npm packages"
>
See them all
</Link>
</div>
</div>
</div>
</div>
</div>
);
}
export default function Home() {
const { siteConfig } = useDocusaurusContext();
return (
<div className="home">
<Layout
title="Prettier · Opinionated Code Formatter"
description={siteConfig.tagline}
>
<HomepageHeader />
<SyntaxSection />
<TldrSection />
<LanguagesSection />
<EditorSupportSection />
<UsersSection />
</Layout>
</div>
);
}
website/src/pages/index.module.css
+333
View File
@@ -0,0 +1,333 @@
:global(.home) {
--ifm-navbar-shadow: none;
--color-tidelift: #f6914d;
--color-tidelift-darker: #e67c36;
--ifm-h2-font-size: 2.125rem;
--ifm-heading-font-weight: 500;
--ifm-heading-margin-top: 1.25rem;
--ifm-heading-margin-bottom: 2.75rem;
--ifm-list-margin: 0;
--ifm-list-left-padding: 0;
}
.heroBanner {
--ifm-color-primary: var(--color-yellow);
--ifm-color-primary-dark: var(--color-yellow-dark);
--ifm-color-secondary: var(--color-pink);
--ifm-color-secondary-dark: var(--color-pink-dark);
padding: 3rem 0;
text-align: center;
position: relative;
overflow: hidden;
}
@media screen and (max-width: 996px) {
.heroBanner {
padding-bottom: 2.5rem;
}
}
.logoWrapperContainer {
display: flex;
justify-content: center;
margin-bottom: 2rem;
}
.logoWrapper > svg {
cursor: ew-resize;
height: auto;
max-width: calc(100vw - 30px);
}
.heroButtonContainer {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
@media screen and (max-width: 443px) {
.heroButtonContainer {
flex-direction: column;
}
}
.heroButton {
--ifm-button-color: var(--ifm-color-gray-900);
}
.tidelift {
--ifm-link-hover-decoration: none;
--ifm-link-hover-color: var(--ifm-color-gray-900);
background: var(--color-tidelift) url(/images/tidelift-small.png) 10px
no-repeat;
background-size: 24px;
color: var(--ifm-color-gray-900);
position: absolute;
top: 16px;
right: 0;
font-size: 12px;
border-radius: 14px 0 0 14px;
padding: 6px 14px 6px 44px;
z-index: 10;
font-weight: 500;
transition-property: color, background, border-color;
transition-duration: var(--ifm-button-transition-duration);
transition-timing-function: var(--ifm-transition-timing-default);
}
.tidelift:hover {
background-color: var(--color-tidelift-darker);
}
.syntaxSection {
--ifm-color-primary: var(--color-yellow);
--ifm-color-primary-dark: var(--color-yellow-dark);
background-color: var(--ifm-color-primary);
display: flex;
justify-content: center;
}
.syntaxLink {
--ifm-link-hover-color: var(--ifm-color-gray-900);
--ifm-container-width: 860px;
--ifm-container-width-xl: 860px;
color: var(--ifm-color-gray-900);
font-size: 1.25rem;
font-weight: bold;
justify-content: center;
display: flex;
flex-direction: column;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.sectionPadding {
padding-top: 3rem;
padding-bottom: 3rem;
}
.tldrSection {
--ifm-color-primary: var(--color-yellow);
--ifm-color-primary-dark: var(--color-yellow-dark);
--ifm-link-color: var(--ifm-color-primary);
--ifm-link-hover-color: var(--ifm-color-primary);
background-color: #182025;
color: var(--ifm-color-primary);
}
.tldrSectionInner {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 1rem;
justify-content: space-evenly;
}
.tldrSectionColumn {
display: flex;
flex-direction: column;
}
.tldrSection h2:before {
content: "# ";
}
.tldrSectionColumn ul li {
list-style: none;
list-style-position: inside;
}
.tldrSectionColumn li::before {
content: "* ";
vertical-align: sub;
}
.languageSection {
--ifm-color-primary: var(--color-pink);
--ifm-color-primary-dark: var(--color-pink-dark);
--ifm-link-color: var(--ifm-color-white);
--ifm-link-hover-color: var(--ifm-color-white);
color: var(--ifm-color-white);
background-color: var(--navbar-color);
}
.languageSection h2 {
color: var(--ifm-color-primary);
}
.languageSectionGrid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.languageSectionGrid > * {
flex: 1 1 auto;
}
.languageItem {
display: flex;
align-items: flex-start;
padding-bottom: 1em;
}
.languageItemImage {
width: 50px;
margin: 0 1.25rem;
}
.languageItemList {
list-style: none;
--ifm-paragraph-margin-bottom: 0;
}
.languageItemList li:first-of-type {
--ifm-link-color: var(--ifm-color-primary);
--ifm-link-hover-color: var(--ifm-color-primary);
color: var(--ifm-color-primary);
}
.languageItemList li + li {
margin-bottom: 0.25rem;
}
.languageItem code,
.editorItem code {
background-color: transparent;
border: none;
}
.editorSection {
--ifm-color-primary: #56b3b4;
--ifm-link-color: var(--ifm-color-white);
--ifm-link-hover-color: var(--ifm-color-white);
color: var(--ifm-color-white);
background-color: #182025;
}
.editorSection h2 {
color: var(--ifm-color-primary);
}
.editorSectionGrid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 3.75rem 1.25rem;
}
.editorSectionGrid > * {
flex: 0 1 262px;
}
.editorItem {
--ifm-heading-margin-top: 1.25rem;
--ifm-heading-margin-bottom: 0px;
--ifm-paragraph-margin-bottom: 0;
display: flex;
gap: 0.75rem;
}
.editorItemImage {
width: 100px;
height: 100px;
}
.editorSectionButtonContainer {
display: flex;
justify-content: flex-end;
margin-top: 3.75rem;
--ifm-font-color-base-inverse: var(--ifm-color-gray-1000);
}
.userSection {
--ifm-color-primary: #6f7b81;
--ifm-color-primary-dark: #637075;
--ifm-button-color: #1a2b34;
background-color: var(--navbar-color);
}
.userSection h2 {
color: var(--ifm-color-primary);
}
.userSectionGrid {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
.userItem {
display: flex;
align-items: center;
padding: 1em;
transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.userItem:hover {
transform: scale(1.2);
}
.userItemImage {
width: 200px;
max-height: 100px;
}
@media only screen and (max-width: 736px) {
.userItemImage {
max-height: 50px;
width: 100px;
}
}
.userSectionButtonContainer {
display: flex;
justify-content: center;
margin-top: 1.25rem;
}
.ecosystemGrid {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
gap: 1.5rem 1rem;
}
@media only screen and (max-width: 736px) {
.ecosystemGrid {
gap: 2rem 1rem;
}
}
.ecosystemGridItem {
display: grid;
grid-template-columns: auto 260px;
gap: 0.8rem;
font-size: 14px;
line-height: 1.4;
color: #b0c4ce;
--ifm-link-color: #b0c4ce;
--ifm-link-hover-color: var(--ifm-color-white);
--ifm-list-left-padding: 2rem;
--ifm-paragraph-margin-bottom: 1rem;
}
.ecosystemGridItem img {
width: 80px;
}
.ecosystemGridItem li + li {
margin-top: 0.5rem;
}
website/src/pages/users/index.jsx
+63
View File
@@ -0,0 +1,63 @@
import Layout from "@theme/Layout";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import Heading from "@theme/Heading";
import Admonition from "@theme/Admonition";
import styles from "./index.module.css";
import clsx from "clsx";
import Link from "@docusaurus/Link";
export default function Users() {
const { siteConfig } = useDocusaurusContext();
const users = siteConfig.customFields.users;
const showcase = users.map((user, i) => (
<div key={i} className={styles.logoItem}>
<Link to={user.infoLink}>
<img src={user.image} title={user.caption} />
</Link>
</div>
));
return (
<Layout title="Who's using Prettier?">
<main className={clsx("margin-vert--xl", styles.main)}>
<div className="container">
<Heading as="h1" className="text--center">
Who’s Using This?
</Heading>
<Admonition
type="info"
title="Prettier is regularly used by:"
className="margin-vert--lg"
>
<ul>
<li>
<Link to="https://2021.stateofjs.com/en-US/other-tools/#utilities">
More than <strong>83%</strong> of respondents to State of JS
2021 (10282 developers out of 12360).
</Link>
</li>
<li>
<Link to="https://2020.stateofjs.com/en-US/other-tools/#utilities">
More than <strong>70%</strong> of respondents to State of JS
2020 (14880 developers out of 20974).
</Link>
</li>
</ul>
</Admonition>
<section>
<div className={styles.logoGrid}>{showcase}</div>
<div className="text--center margin-bottom--lg">
...and{" "}
<Link to="https://www.npmjs.com/browse/depended/prettier">
many more projects
</Link>
</div>
</section>
</div>
</main>
</Layout>
);
}
website/src/pages/users/index.module.css
+31
View File
@@ -0,0 +1,31 @@
.main {
--ifm-container-width: 990px;
--ifm-container-width-xl: 990px;
}
.logoGrid {
--min-item-size: 168px;
display: flex;
flex-wrap: wrap;
}
.logoGrid > * {
flex: 1 1 var(--min-item-size);
}
.logoItem,
.logoItem > a {
display: flex;
align-items: center;
justify-content: center;
}
.logoItem a {
padding: 20px;
}
.logoItem img {
max-height: 64px;
width: 128px;
}
website/static/.nojekyll
View File
Whitespace-only changes.
website/static/CNAME
+1
View File
@@ -0,0 +1 @@
prettier.io
website/static/_redirects
+5
View File
@@ -6,3 +6,8 @@
# Broken blog link
/blog/2018/05/23/1.13.0.html /blog/2018/05/27/1.13.0.html
/blog/2023/07/05/3.1.0.html /blog/2023/07/05/3.0.0.html
# English language redirects
/en /
/en/* /:splat
/docs/en/* /docs/:splat
website/static/css/code-block-buttons.css
-63
View File
@@ -1,63 +0,0 @@
/* "Copy" code block button, style from docusaurus v2 */
.code-block-with-actions {
position: relative;
}
.code-block-actions {
position: absolute;
top: 10px;
right: 10px;
}
.code-block-copy-button {
width: 32px;
height: 32px;
border: 1px solid #dadde1;
border-radius: 6px;
display: flex;
transition: opacity 0.2s ease-in-out;
opacity: 0;
position: relative;
cursor: pointer;
color: #393a34;
background-color: #f6f8fa;
}
.code-block-with-actions:hover .code-block-copy-button {
opacity: 0.4;
}
.code-block-with-actions:hover .code-block-copy-button:hover {
opacity: 1;
}
.code-block-copy-button__icon {
fill: currentColor;
position: absolute;
width: 18px;
height: 18px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
transition: 0.15s;
}
.code-block-copy-button__icon--copied {
color: #00d600;
opacity: 0;
transform: scale(0.33);
}
.code-block-copy-button--copied .code-block-copy-button__icon--copy {
opacity: 0;
transform: scale(0.33);
}
.code-block-copy-button--copied .code-block-copy-button__icon--copied {
transition-delay: 75ms;
transform: scale(1);
opacity: 1;
}
website/pages/googlefe164a33bda4034b.html → website/static/googlefe164a33bda4034b.html
View File
File renamed without changes.
website/static/images/editors/editor_emacs.svg
+1 -1
View File
@@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 93"><g fill="none" fill-rule="evenodd"><path fill="#56B3B4" fill-rule="nonzero" d="M92 46.5C92 72.181 71.405 93 46 93S0 72.181 0 46.5 20.595 0 46 0s46 20.819 46 46.5z"/><path fill="#000" d="M32.522 72.933s3.089.218 7.062-.131c1.61-.142 7.72-.74 12.288-1.74 0 0 5.57-1.187 8.55-2.282 3.117-1.146 4.814-2.118 5.578-3.496-.034-.282.235-1.283-1.203-1.884-3.676-1.537-7.94-1.26-16.375-1.438-9.355-.32-12.467-1.881-14.125-3.139-1.59-1.275-.79-4.804 6.021-7.913C43.75 49.255 57.2 46.2 57.2 46.2c-4.53-2.232-12.977-6.156-14.713-7.004-1.523-.743-3.96-1.862-4.488-3.216-.599-1.3 1.414-2.42 2.54-2.74 3.621-1.042 8.734-1.69 13.388-1.762 2.34-.037 2.719-.187 2.719-.187 3.228-.534 5.352-2.735 4.467-6.222-.795-3.56-4.986-5.65-8.97-4.926-3.75.681-12.791 3.3-12.791 3.3 11.175-.097 13.045.09 13.88 1.254.494.687-.223 1.63-3.204 2.116-3.244.528-9.99 1.164-9.99 1.164-6.47.383-11.027.409-12.394 3.294-.893 1.885.952 3.552 1.761 4.595 3.418 3.79 8.355 5.834 11.533 7.34 1.196.566 4.704 1.635 4.704 1.635-10.31-.565-17.747 2.59-22.11 6.225-4.933 4.55-2.75 9.974 7.358 13.313 5.97 1.973 8.932 2.9 17.838 2.1 5.246-.281 6.073-.113 6.125.316.073.604-5.827 2.105-7.437 2.568-4.098 1.179-14.84 3.558-14.894 3.57z"/></g></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 92 93"><g fill="none" fill-rule="evenodd"><path fill="#56B3B4" fill-rule="nonzero" d="M92 46.5C92 72.181 71.405 93 46 93S0 72.181 0 46.5 20.595 0 46 0s46 20.819 46 46.5z"/><path fill="#182025" d="M32.522 72.933s3.089.218 7.062-.131c1.61-.142 7.72-.74 12.288-1.74 0 0 5.57-1.187 8.55-2.282 3.117-1.146 4.814-2.118 5.578-3.496-.034-.282.235-1.283-1.203-1.884-3.676-1.537-7.94-1.26-16.375-1.438-9.355-.32-12.467-1.881-14.125-3.139-1.59-1.275-.79-4.804 6.021-7.913C43.75 49.255 57.2 46.2 57.2 46.2c-4.53-2.232-12.977-6.156-14.713-7.004-1.523-.743-3.96-1.862-4.488-3.216-.599-1.3 1.414-2.42 2.54-2.74 3.621-1.042 8.734-1.69 13.388-1.762 2.34-.037 2.719-.187 2.719-.187 3.228-.534 5.352-2.735 4.467-6.222-.795-3.56-4.986-5.65-8.97-4.926-3.75.681-12.791 3.3-12.791 3.3 11.175-.097 13.045.09 13.88 1.254.494.687-.223 1.63-3.204 2.116-3.244.528-9.99 1.164-9.99 1.164-6.47.383-11.027.409-12.394 3.294-.893 1.885.952 3.552 1.761 4.595 3.418 3.79 8.355 5.834 11.533 7.34 1.196.566 4.704 1.635 4.704 1.635-10.31-.565-17.747 2.59-22.11 6.225-4.933 4.55-2.75 9.974 7.358 13.313 5.97 1.973 8.932 2.9 17.838 2.1 5.246-.281 6.073-.113 6.125.316.073.604-5.827 2.105-7.437 2.568-4.098 1.179-14.84 3.558-14.894 3.57z"/></g></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

docs/assets/webstorm/external-tool-prettier.png → website/static/images/webstorm/external-tool-prettier.png
View File
File renamed without changes.
docs/assets/webstorm/prettier-settings.png → website/static/images/webstorm/prettier-settings.png
View File
File renamed without changes.
docs/assets/youtube-cover/a-prettier-printer-by-james-long-on-react-conf-2017.png → website/static/images/youtube-cover/a-prettier-printer-by-james-long-on-react-conf-2017.png
View File
File renamed without changes.
docs/assets/youtube-cover/javascript-code-formatting-by-christopher-chedeau-on-react-london-2017.png → website/static/images/youtube-cover/javascript-code-formatting-by-christopher-chedeau-on-react-london-2017.png
View File
File renamed without changes.
website/static/js/code-block-buttons.js
-57
View File
@@ -1,57 +0,0 @@
/* global ClipboardJS */
"use strict";
(function () {
const CONTAINER_CLASS_NAME = "code-block-with-actions";
const ACTIONS_CONTAINER_CLASS_NAME = "code-block-actions";
const COPY_BUTTON_CLASS_NAME = "code-block-copy-button";
const COPY_BUTTON_COPIED_CLASS_NAME = `${COPY_BUTTON_CLASS_NAME}--copied`;
const COPY_BUTTON_ICON_CLASS_NAME = `${COPY_BUTTON_CLASS_NAME}__icon`;
const COPY_BUTTON_COPY_ICON_CLASS_NAME = `${COPY_BUTTON_ICON_CLASS_NAME}--copy`;
const COPY_BUTTON_COPIED_ICON_CLASS_NAME = `${COPY_BUTTON_ICON_CLASS_NAME}--copied`;
const ARIA_LABEL = "Copy code to clipboard";
const ARIA_LABEL_COPIED = "Copied";
function init(codeBlock) {
const container = codeBlock.parentNode;
container.classList.add(CONTAINER_CLASS_NAME);
const actionsContainer = Object.assign(document.createElement("div"), {
className: ACTIONS_CONTAINER_CLASS_NAME,
});
const copyButton = Object.assign(document.createElement("button"), {
className: COPY_BUTTON_CLASS_NAME,
type: "button",
innerHTML:
`<svg class="${COPY_BUTTON_ICON_CLASS_NAME} ${COPY_BUTTON_COPY_ICON_CLASS_NAME}" viewBox="0 0 24 24"><path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg>` +
`<svg class="${COPY_BUTTON_ICON_CLASS_NAME} ${COPY_BUTTON_COPIED_ICON_CLASS_NAME}" viewBox="0 0 24 24"><path d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg>`,
});
copyButton.setAttribute("aria-label", ARIA_LABEL);
new ClipboardJS(copyButton, { target: () => codeBlock }).on(
"success",
(event) => {
event.clearSelection();
copyButton.classList.add(COPY_BUTTON_COPIED_CLASS_NAME);
copyButton.setAttribute("aria-label", ARIA_LABEL_COPIED);
copyButton.disabled = true;
setTimeout(() => {
copyButton.classList.remove(COPY_BUTTON_COPIED_CLASS_NAME);
copyButton.setAttribute("aria-label", ARIA_LABEL);
copyButton.disabled = false;
}, 2000);
},
);
actionsContainer.appendChild(copyButton);
container.appendChild(actionsContainer);
}
window.addEventListener("load", () => {
for (const codeBlock of document.querySelectorAll("pre > code.hljs")) {
init(codeBlock);
}
});
})();
website/static/landing.js
-30
View File
@@ -1,30 +0,0 @@
"use strict";
if (location.hash.slice(1).startsWith(encodeURIComponent("{"))) {
location.pathname = "/playground/";
}
window.addEventListener("load", () => {
// We don't have access to a unique body css attribute for just the homepage
// so instead it is set on load. It's only really visible on a vertical overscroll
document.body.style.backgroundColor = "rgb(24, 32, 37)";
const logoWrapper = document.querySelector(".animatedLogoWrapper");
const logo = document.querySelector(".prettier-logo-wide");
const lastDash = logo.querySelector("g:last-of-type path:last-of-type");
function handleLogoDrag(event) {
logo.classList.add("rolling");
event.preventDefault();
}
logoWrapper.setAttribute("draggable", "true");
logoWrapper.addEventListener("touchstart", handleLogoDrag);
logoWrapper.addEventListener("dragstart", handleLogoDrag);
lastDash.addEventListener("animationend", (event) => {
if (/roll/u.test(event.animationName)) {
logo.classList.remove("rolling");
}
});
});
website/static/overrides.css
-611
View File
@@ -1,611 +0,0 @@
html body {
font-family:
-apple-system,
BlinkMacSystemFont,
Segoe UI,
Roboto,
Oxygen,
Ubuntu,
Cantarell,
Fira Sans,
Droid Sans,
Helvetica Neue,
sans-serif;
overflow-x: hidden;
}
em {
font-style: italic;
}
.mainContainer .wrapper a:hover,
.mainContainer .wrapper a:focus,
.inner .projectIntro a:hover,
.inner .projectIntro a:focus {
text-decoration: underline;
}
.tidelift {
background: #f6914d url(/images/tidelift-small.png) 10px center no-repeat;
background-size: 24px;
color: #000000;
position: absolute;
margin-top: -15px;
right: 0;
font-size: 13px;
border-radius: 13px 0 0px 13px;
padding: 7px 15px 5px 45px;
z-index: 9999 !important;
}
/* Note: CSS on body bg-color for index page is set inside landing.js, not here */
.post p a {
text-decoration: underline !important;
}
.post a {
font-weight: 600;
}
.animatedLogoWrapper > svg {
max-width: calc(100vw - 30px);
height: auto;
cursor: ew-resize;
margin-bottom: 30px;
}
@media screen and (max-width: 735px) {
footer .sitemap {
display: block;
margin-left: 20px;
}
footer .sitemap .nav-home {
margin: 0 auto;
}
footer .sitemap > div {
margin-bottom: 20px;
}
footer .sitemap > div h5 {
margin: 0;
}
}
.buttonGroup .button:not(:first-of-type) {
margin-left: -2px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.buttonGroup .button:not(:last-of-type) {
margin-right: 0;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
.button {
font-weight: 600;
font-size: 18px;
padding-top: 9px;
padding-bottom: 8px;
padding-left: 2rem;
padding-right: 2rem;
border-radius: 8px;
}
.pluginRowBlock .button {
border-radius: 16px;
}
.pluginRowBlock .buttonWrapper:nth-of-type(1) .button {
background: #f8bc45;
}
.pluginRowBlock .buttonWrapper:nth-of-type(2) .button {
background: #c596c7;
}
.pluginRowBlock .buttonWrapper:nth-of-type(3) .button {
background: #5ab3b3;
}
.homeContainer {
background: #1a2b34;
padding-top: 30px;
}
.mainContainer.landingContainer {
padding: 0;
}
.productShowcaseSection {
background: #1a2b34;
padding-top: 50px;
padding-bottom: 50px;
}
.productShowcaseSection.lightBackground {
background: #182025;
}
.productShowcaseSection h2 {
text-align: left;
font-weight: 500;
margin-bottom: 1.5em;
font-size: 34px !important;
}
.productShowcaseSection h3 {
color: #f9f9f9 !important;
font-weight: 400;
}
.productShowcaseSection p,
.productShowcaseSection span,
.productShowcaseSection a,
.productShowcaseSection code {
color: #f9f9f9 !important;
font-size: 14px;
}
.tldrSection h2,
.tldrSection ul {
color: #f8bc45 !important;
padding: 0 !important;
}
.tldrSection h2::before {
content: "# ";
}
.mainContainer .tldrSection ul li {
list-style: none;
list-style-position: inside;
line-height: 1;
}
.mainContainer .tldrSection ul li a {
color: inherit !important;
font-size: inherit;
}
.tldrSection li::before {
content: "* ";
vertical-align: sub;
}
.languagesSection h2,
.languagesSection .accented,
.languagesSection .accented a {
color: #c596c7 !important;
}
.languagesSection .languageCategory ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.languagesSection .languageCategory p,
.languagesSection .languageCategory a {
font-size: 1rem;
padding: 0;
}
.languagesSection .languageCategory code {
font-size: 0.8rem;
}
.editorSupportSection h2 {
color: #5ab3b3 !important;
}
.editor {
padding: 0 20px 60px 0;
display: flex;
min-width: 262px;
flex: 1;
flex-grow: 0;
flex-basis: 22%;
}
.editor code {
white-space: nowrap;
}
.editorImage {
width: 100px;
height: 100px;
}
.editorInfo {
padding-left: 12px;
flex-shrink: 0;
}
.editorInfo .editorName {
margin-bottom: 0;
margin-top: 1em;
}
.productShowcaseSection code,
.editorInfo code {
white-space: normal;
padding-left: 0;
padding-right: 0;
}
.editorInfo p {
line-height: 1.7;
padding: 0;
}
@media only screen and (min-width: 360px) and (max-width: 590px) {
.editor {
flex-direction: column;
min-width: 140px;
padding-right: 0;
}
.editorInfo {
padding-left: 0px !important;
}
.editorImage {
margin: 0;
width: 50px;
height: 50px;
}
}
@media only screen and (max-width: 736px) {
.editor {
padding-bottom: 30px;
}
.editorImage {
width: 75px;
height: 75px;
}
}
.getStartedSection h2 {
color: #e85f61 !important;
}
.getStartedSection {
text-align: left;
}
.getStartedSection--npm .yarnOnly {
display: none;
}
.getStartedSection:not(.getStartedSection--npm) .npmOnly {
display: none;
}
.getStartedSection .button {
border: 1px solid #e85f61;
color: #e85f61 !important;
line-height: 1em;
}
.getStartedSection .button.active {
background: #e85f61;
color: #1a2b34 !important;
}
.getStartedSection ol {
list-style: none;
color: #f9f9f9;
margin-top: 48px;
margin-left: 48px;
}
.getStartedSection ol li {
margin: 0 0 22px 0 !important;
min-height: 110px;
padding-left: 46px;
position: relative;
}
.getStartedSection ol li::before {
color: #e85f61;
font-size: 58px;
position: absolute;
left: -24px;
top: -44px;
width: 58px;
text-align: right;
}
.getStartedSection ol li:nth-of-type(1)::before {
content: "1.";
}
.getStartedSection ol li:nth-of-type(2)::before {
content: "2.";
}
.getStartedSection ol li:nth-of-type(3)::before {
content: "3.";
}
.decorativeRects {
min-width: 400px;
width: 400px;
}
@media screen and (max-width: 960px) {
.decorativeRects {
min-width: 300px;
width: 300px;
}
}
@media screen and (max-width: 875px) {
.decorativeRects {
display: none;
}
}
@media only screen and (max-width: 736px) {
.getStartedSection ol {
margin: 0 0 0 -12px !important;
padding: 0 !important;
}
.getStartedSection ol li::before {
font-size: 36px;
top: -22px;
}
.getStartedFlexContainer {
flex-wrap: wrap-reverse !important;
}
}
.getStartedFlexContainer pre {
overflow: hidden;
}
.getStartedSection code {
font-weight: 500;
font-size: 100%;
overflow-x: auto;
}
.getStartedSection .hljs {
background: transparent !important;
font-size: 130%;
}
.getStartedSteps {
overflow: auto;
}
.usersSection h2,
.usersSection h3 {
color: #6f7b81 !important;
}
.usersSection a {
color: #f9f9f9 !important;
}
.usersSection a:hover {
color: white !important;
}
.usersSection .alignCenter {
display: flex;
align-items: center;
}
.usersSection p {
font-size: 1em;
margin: 4px;
}
.usersSection .button {
background: #6f7b81;
color: #1a2b34 !important;
}
.usersSection .user {
max-height: 100px;
width: 200px;
flex-grow: 1;
padding: 1em;
}
.usersSection .more-users {
margin-top: 20px;
}
@media only screen and (max-width: 736px) {
.usersSection .user {
max-height: 50px !important;
width: 100px !important;
}
}
.ecosystemSubHeader {
margin-top: 40px !important;
margin-bottom: 20px !important;
}
.ecosystemSubSection p {
padding-top: 0 !important;
font-size: 0.9em;
color: rgb(176, 196, 206) !important;
line-height: 1.2em !important;
}
.ecosystemSubSection ul,
.ecosystemSubSection ul a {
color: rgb(176, 196, 206) !important;
}
.growOnHover {
transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.growOnHover:hover {
transform: scale(1.2);
}
.mainContainer .wrapper .post h2 {
font-size: 2em;
}
.mainContainer .wrapper .post h3 {
font-size: 1.5em;
font-weight: 400;
}
.mainContainer .wrapper .post h4 {
font-size: 1.25em;
font-weight: 400;
}
pre {
overflow-x: auto;
}
@media only screen and (min-width: 736px) {
.mainContainer .wrapper .post .postHeader h1 {
font-size: 32px;
}
}
h1 a {
color: #24292e;
}
a {
color: #56b3b4;
}
.post p a {
text-decoration: inherit !important;
}
.post p a:hover {
text-decoration: underline !important;
}
.post a {
font-weight: inherit;
}
.post,
.post-content {
font-size: 16px;
}
.post-meta {
float: left;
margin-right: 10px;
font-size: 14px;
}
.blogContainer .postHeader {
margin-bottom: 0;
}
.read-more {
margin-top: 10px;
}
.blogContainer .posts .post {
border-bottom: 1px solid #1b2b35;
border-radius: 0;
}
.mainContainer .wrapper .post h2,
.mainContainer .wrapper .post h3 {
padding-bottom: 0.3em;
border-bottom: 1px solid #1b2b35;
margin-top: 14px;
margin-bottom: 16px;
font-weight: 600;
line-height: 1.25;
}
.mainContainer .wrapper .post h4 {
font-size: 1.25em;
line-height: 24px;
font-weight: 500;
margin-bottom: 20px;
margin-top: 10px;
}
.mainContainer .wrapper .post h5 {
font-size: 1.125em;
}
.hljs {
padding: 16px;
overflow: auto;
font-size: 13.6px;
line-height: 1.45;
border-radius: 3px;
border-left-color: #eb5d5d;
}
.hljs,
.hljs-subst {
color: #1b2b35;
}
.hljs-type,
.hljs-string,
.hljs-number,
.hljs-selector-id,
.hljs-selector-class,
.hljs-quote,
.hljs-template-tag,
.hljs-deletion,
.hljs-title,
.hljs-section {
color: #eb5d5d;
}
.hljs-built_in,
.hljs-bullet,
.hljs-code,
.hljs-addition,
.hljs-literal {
color: #56b3b4;
}
.hljs-keyword,
.hljs-attribute,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-name,
.hljs-title,
.hljs-section {
font-weight: normal;
}
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-comment {
color: #cda144;
}
.showcaseSection .logos img {
max-height: 64px;
}
/* DOCUSAURUS_CODE_TABS */
.tabs {
border-top: none;
}
.nav-tabs {
border-bottom: none;
}
.tabs .nav-tabs > div {
padding: 4px 12px;
}
/* Syntax Section */
.syntaxLink:hover {
text-decoration: underline;
}
website/pages/playground-redirect.html → website/static/playground-redirect.html
View File
File renamed without changes.
website/pages/playground/index.html → website/static/playground/index.html
+3 -3
View File
@@ -170,10 +170,10 @@
></script>
<link rel="stylesheet" href="/separate-css/playground.css" />
<!-- Global site tag (gtag.js) - Google Analytics -->
<!-- Google tag (gtag.js) -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=UA-111350464-1"
src="https://www.googletagmanager.com/gtag/js?id=G-T57CP1SG02"
></script>
<script>
window.dataLayer = window.dataLayer || [];
@@ -181,7 +181,7 @@
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "UA-111350464-1");
gtag("config", "G-T57CP1SG02");
</script>
</head>
website/versioned_docs/version-stable/api.md
+6 -3
View File
@@ -1,7 +1,6 @@
---
id: version-stable-api
id: api
title: API
original_id: api
---
If you want to run Prettier programmatically, check this page out.
@@ -178,6 +177,10 @@ await format("lodash ( )", {
// -> "_();\n"
```
> Note: Overall, doing codemods this way isn’t recommended. Prettier uses the location data of AST nodes for many things like preserving blank lines and attaching comments. When the AST is modified after the parsing, the location data often gets out of sync, which may lead to unpredictable results. Consider using [jscodeshift](https://github.com/facebook/jscodeshift) if you need codemods.
:::note
Overall, doing codemods this way isn’t recommended. Prettier uses the location data of AST nodes for many things like preserving blank lines and attaching comments. When the AST is modified after the parsing, the location data often gets out of sync, which may lead to unpredictable results. Consider using [jscodeshift](https://github.com/facebook/jscodeshift) if you need codemods.
:::
As part of the removed Custom parser API, it was previously possible to pass a path to a module exporting a `parse` function via the `--parser` option. Use the `--plugin` CLI option or the `plugins` API option instead to [load plugins](plugins.md#using-plugins).
website/versioned_docs/version-stable/browser.md
+2 -3
View File
@@ -1,7 +1,6 @@
---
id: version-stable-browser
id: browser
title: Browser
original_id: browser
---
Run Prettier in the browser using its **standalone** version. This version doesn’t depend on Node.js. It only formats the code and has no support for config files, ignore files, CLI usage, or automatic loading of plugins.
@@ -19,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/>. 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.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.
You need to load the ones that you’re going to use and pass them to `prettier.format` using the `plugins` option.
website/versioned_docs/version-stable/cli.md
+21 -6
View File
@@ -1,7 +1,6 @@
---
id: version-stable-cli
id: cli
title: CLI
original_id: cli
---
Use the `prettier` command to run Prettier from the command line.
@@ -10,7 +9,11 @@ Use the `prettier` command to run Prettier from the command line.
prettier [options] [file/dir/glob ...]
```
> To run your locally installed version of Prettier, prefix the command with `npx` or `yarn` (if you use Yarn), i.e. `npx prettier --help`, or `yarn prettier --help`.
:::note
To run your locally installed version of Prettier, prefix the command with `npx` or `yarn` (if you use Yarn), i.e. `npx prettier --help`, or `yarn prettier --help`.
:::
To format a file in-place, use `--write`. (Note: This overwrites your files!)
@@ -30,9 +33,17 @@ A more complicated example:
prettier docs package.json "{app,__{tests,mocks}__}/**/*.js" --write --single-quote --trailing-comma all
```
> Don’t forget the **quotes** around the globs! The quotes make sure that Prettier CLI expands the globs rather than your shell, which is important for cross-platform usage.
:::warning
> It’s better to use a [configuration file](configuration.md) for formatting options like `--single-quote` and `--trailing-comma` instead of passing them as CLI flags. This way the Prettier CLI, [editor integrations](editors.md), and other tooling can all know what options you use.
Don’t forget the **quotes** around the globs! The quotes make sure that Prettier CLI expands the globs rather than your shell, which is important for cross-platform usage.
:::
:::note
It’s better to use a [configuration file](configuration.md) for formatting options like `--single-quote` and `--trailing-comma` instead of passing them as CLI flags. This way the Prettier CLI, [editor integrations](editors.md), and other tooling can all know what options you use.
:::
## File patterns
@@ -223,7 +234,11 @@ Running Prettier without `--cache` will delete the cache.
Also, since the cache file is stored in `./node_modules/.cache/prettier/.prettier-cache`, so you can use `rm ./node_modules/.cache/prettier/.prettier-cache` to remove it manually.
> Plugins version and implementation are not used as cache keys. We recommend that you delete the cache when updating plugins.
:::warning
Plugins version and implementation are not used as cache keys. We recommend that you delete the cache when updating plugins.
:::
## `--cache-location`
website/versioned_docs/version-stable/comparison.md
+1 -2
View File
@@ -1,7 +1,6 @@
---
id: version-stable-comparison
id: comparison
title: Prettier vs. Linters
original_id: comparison
---
## How does it compare to ESLint/TSLint/stylelint, etc.?
website/versioned_docs/version-stable/configuration.md
+2 -3
View File
@@ -1,7 +1,6 @@
---
id: version-stable-configuration
id: configuration
title: Configuration File
original_id: configuration
---
You can configure Prettier via (in order of precedence):
@@ -172,7 +171,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.
## EditorConfig
website/versioned_docs/version-stable/editors.md
+1 -2
View File
@@ -1,7 +1,6 @@
---
id: version-stable-editors
id: editors
title: Editor Integration
original_id: editors
---
To get the most out of Prettier, it’s recommended to run it from your editor.
Loaded 100 of 119 files, more files were not shown because too many files have changed in this diff. Show more