Release 3.2.5

This commit is contained in:
Sosuke Suzuki committed 2024-02-04 14:35:44 +09:00
1 parent 8cbee2e217
commit 7142cf354c
8 files changed
+147 -44

No files matched your search

+1 -1
View File
@@ -26,7 +26,7 @@ Don't fill the form below manually! Let a program create a report for you:
-->
**Prettier 3.2.4**
**Prettier 3.2.5**
[Playground link](https://prettier.io/playground/#.....)
```sh
+1 -1
View File
@@ -20,7 +20,7 @@ BEFORE SUBMITTING AN ISSUE:
**Environments:**
- Prettier Version: 3.2.4
- Prettier Version: 3.2.5
- Running Prettier via: <!-- CLI, Node.js API, Browser API, etc. -->
- Runtime: <!-- Node.js v14, Chrome v83, etc. -->
- Operating System: <!-- Windows, Linux, macOS, etc. -->
+104
View File
@@ -1,3 +1,107 @@
# 3.2.5
[diff](https://github.com/prettier/prettier/compare/3.2.4...3.2.5)
#### Support Angular inline styles as single template literal ([#15968](https://github.com/prettier/prettier/pull/15968) by [@sosukesuzuki](https://github.com/sosukesuzuki))
[Angular v17](https://blog.angular.io/introducing-angular-v17-4d7033312e4b) supports single string inline styles.
<!-- prettier-ignore -->
```ts
// Input
@Component({
template: `<div>...</div>`,
styles: `h1 { color: blue; }`,
})
export class AppComponent {}
// Prettier 3.2.4
@Component({
template: `<div>...</div>`,
styles: `h1 { color: blue; }`,
})
export class AppComponent {}
// Prettier 3.2.5
@Component({
template: `<div>...</div>`,
styles: `
h1 {
color: blue;
}
`,
})
export class AppComponent {}
```
#### Unexpected embedded formatting for Angular template ([#15969](https://github.com/prettier/prettier/pull/15969) by [@JounQin](https://github.com/JounQin))
Computed template should not be considered as Angular component template
<!-- prettier-ignore -->
```ts
// Input
const template = "foobar";
@Component({
[template]: `<h1>{{ hello }}</h1>`,
})
export class AppComponent {}
// Prettier 3.2.4
const template = "foobar";
@Component({
[template]: `<h1>{{ hello }}</h1>`,
})
export class AppComponent {}
// Prettier 3.2.5
const template = "foobar";
@Component({
[template]: `<h1>{{ hello }}</h1>`,
})
export class AppComponent {}
```
#### Use `"json"` parser for `tsconfig.json` by default ([#16012](https://github.com/prettier/prettier/pull/16012) by [@sosukesuzuki](https://github.com/sosukesuzuki))
In [v2.3.0](https://prettier.io/blog/2024/01/12/3.2.0#new-jsonc-parser-added-15831httpsgithubcomprettierprettierpull15831-by-fiskerhttpsgithubcomfisker), we introduced `"jsonc"` parser which adds trialing comma **by default**.
When adding a new parser we also define how it will be used based on the [`linguist-languages`](https://www.npmjs.com/package/linguist-languages) data.
`tsconfig.json` is a special file used by [TypeScript](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#using-tsconfigjson-or-jsconfigjson), it uses `.json` file extension, but it actually uses the [JSON with Comments](https://code.visualstudio.com/docs/languages/json#_json-with-comments) syntax. However, we found that there are many third-party tools not recognize it correctly because of the confusing `.json` file extension.
We decide to treat it as a JSON file for now to avoid the extra configuration step.
To keep using the `"jsonc"` parser for your `tsconfig.json` files, add the following to your `.pretterrc` file
```json
{
"overrides": [
{
"files": ["tsconfig.json", "jsconfig.json"],
"options": {
"parser": "jsonc"
}
}
]
}
```
<!-- prettier-ignore -->
```
# Prettier 3.2.4
prettier --file-info tsconfig.json
{ "ignored": false, "inferredParser": "jsonc" }
# Prettier 3.2.5
prettier --file-info tsconfig.json
{ "ignored": false, "inferredParser": "json" }
```
# 3.2.4
[diff](https://github.com/prettier/prettier/compare/3.2.3...3.2.4)
+16 -16
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@3.2.4/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.2.5/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.
@@ -29,8 +29,8 @@ See below for examples.
### Global
```html
<script src="https://unpkg.com/prettier@3.2.4/standalone.js"></script>
<script src="https://unpkg.com/prettier@3.2.4/plugins/graphql.js"></script>
<script src="https://unpkg.com/prettier@3.2.5/standalone.js"></script>
<script src="https://unpkg.com/prettier@3.2.5/plugins/graphql.js"></script>
<script>
(async () => {
const formatted = await prettier.format("type Query { hello: String }", {
@@ -47,8 +47,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
```html
<script type="module">
import * as prettier from "https://unpkg.com/prettier@3.2.4/standalone.mjs";
import prettierPluginGraphql from "https://unpkg.com/prettier@3.2.4/plugins/graphql.mjs";
import * as prettier from "https://unpkg.com/prettier@3.2.5/standalone.mjs";
import prettierPluginGraphql from "https://unpkg.com/prettier@3.2.5/plugins/graphql.mjs";
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
@@ -61,8 +61,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
```js
define([
"https://unpkg.com/prettier@3.2.4/standalone.js",
"https://unpkg.com/prettier@3.2.4/plugins/graphql.js",
"https://unpkg.com/prettier@3.2.5/standalone.js",
"https://unpkg.com/prettier@3.2.5/plugins/graphql.js",
], async (prettier, ...plugins) => {
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
@@ -90,8 +90,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
### Worker
```js
importScripts("https://unpkg.com/prettier@3.2.4/standalone.js");
importScripts("https://unpkg.com/prettier@3.2.4/plugins/graphql.js");
importScripts("https://unpkg.com/prettier@3.2.5/standalone.js");
importScripts("https://unpkg.com/prettier@3.2.5/plugins/graphql.js");
(async () => {
const formatted = await prettier.format("type Query { hello: String }", {
@@ -107,9 +107,9 @@ If you want to format [embedded code](options.md#embedded-language-formatting),
```html
<script type="module">
import * as prettier from "https://unpkg.com/prettier@3.2.4/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.2.4/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.2.4/plugins/estree.mjs";
import * as prettier from "https://unpkg.com/prettier@3.2.5/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.2.5/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.2.5/plugins/estree.mjs";
console.log(
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -125,10 +125,10 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser
```html
<script type="module">
import * as prettier from "https://unpkg.com/prettier@3.2.4/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.2.4/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.2.4/plugins/estree.mjs";
import prettierPluginHtml from "https://unpkg.com/prettier@3.2.4/plugins/html.mjs";
import * as prettier from "https://unpkg.com/prettier@3.2.5/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.2.5/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.2.5/plugins/estree.mjs";
import prettierPluginHtml from "https://unpkg.com/prettier@3.2.5/plugins/html.mjs";
console.log(
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "prettier",
"version": "3.3.0-dev",
"version": "3.2.5",
"description": "Prettier is an opinionated code formatter",
"bin": "./bin/prettier.cjs",
"repository": "prettier/prettier",
@@ -10,6 +10,8 @@ If you want to run Prettier programmatically, check this page out.
import * as prettier from "prettier";
```
Our public APIs are all asynchronous, if you must use synchronous version for some reason, you can try [`@prettier/sync`](https://github.com/prettier/prettier-synchronized).
## `prettier.format(source, options)`
`format` is used to format text using Prettier. `options.parser` must be set according to the language you are formatting (see the [list of available parsers](options.md#parser)). Alternatively, `options.filepath` can be specified for Prettier to infer the parser from the file extension. Other [options](options.md) may be provided to override the defaults.
@@ -19,7 +19,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.2.4/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.2.5/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.
@@ -30,8 +30,8 @@ See below for examples.
### Global
```html
<script src="https://unpkg.com/prettier@3.2.4/standalone.js"></script>
<script src="https://unpkg.com/prettier@3.2.4/plugins/graphql.js"></script>
<script src="https://unpkg.com/prettier@3.2.5/standalone.js"></script>
<script src="https://unpkg.com/prettier@3.2.5/plugins/graphql.js"></script>
<script>
(async () => {
const formatted = await prettier.format("type Query { hello: String }", {
@@ -48,8 +48,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
```html
<script type="module">
import * as prettier from "https://unpkg.com/prettier@3.2.4/standalone.mjs";
import prettierPluginGraphql from "https://unpkg.com/prettier@3.2.4/plugins/graphql.mjs";
import * as prettier from "https://unpkg.com/prettier@3.2.5/standalone.mjs";
import prettierPluginGraphql from "https://unpkg.com/prettier@3.2.5/plugins/graphql.mjs";
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
@@ -62,8 +62,8 @@ Note that the [`unpkg` field](https://unpkg.com/#examples) in Prettier’s `pack
```js
define([
"https://unpkg.com/prettier@3.2.4/standalone.js",
"https://unpkg.com/prettier@3.2.4/plugins/graphql.js",
"https://unpkg.com/prettier@3.2.5/standalone.js",
"https://unpkg.com/prettier@3.2.5/plugins/graphql.js",
], async (prettier, ...plugins) => {
const formatted = await prettier.format("type Query { hello: String }", {
parser: "graphql",
@@ -91,8 +91,8 @@ This syntax doesn’t necessarily work in the browser, but it can be used when b
### Worker
```js
importScripts("https://unpkg.com/prettier@3.2.4/standalone.js");
importScripts("https://unpkg.com/prettier@3.2.4/plugins/graphql.js");
importScripts("https://unpkg.com/prettier@3.2.5/standalone.js");
importScripts("https://unpkg.com/prettier@3.2.5/plugins/graphql.js");
(async () => {
const formatted = await prettier.format("type Query { hello: String }", {
@@ -108,9 +108,9 @@ If you want to format [embedded code](options.md#embedded-language-formatting),
```html
<script type="module">
import * as prettier from "https://unpkg.com/prettier@3.2.4/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.2.4/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.2.4/plugins/estree.mjs";
import * as prettier from "https://unpkg.com/prettier@3.2.5/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.2.5/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.2.5/plugins/estree.mjs";
console.log(
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -126,10 +126,10 @@ The HTML code embedded in JavaScript stays unformatted because the `html` parser
```html
<script type="module">
import * as prettier from "https://unpkg.com/prettier@3.2.4/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.2.4/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.2.4/plugins/estree.mjs";
import prettierPluginHtml from "https://unpkg.com/prettier@3.2.4/plugins/html.mjs";
import * as prettier from "https://unpkg.com/prettier@3.2.5/standalone.mjs";
import prettierPluginBabel from "https://unpkg.com/prettier@3.2.5/plugins/babel.mjs";
import prettierPluginEstree from "https://unpkg.com/prettier@3.2.5/plugins/estree.mjs";
import prettierPluginHtml from "https://unpkg.com/prettier@3.2.5/plugins/html.mjs";
console.log(
await prettier.format("const html=/* HTML */ `<DIV> </DIV>`", {
@@ -122,18 +122,16 @@ For example, you can do the following to have Prettier run before each commit:
```bash
npm install --save-dev husky lint-staged
npx husky install
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged"
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"
```
<!--yarn-->
```bash
yarn add --dev husky lint-staged
npx husky install
npm pkg set scripts.prepare="husky install"
npx husky add .husky/pre-commit "npx lint-staged"
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','npx lint-staged\n')"
```
> If you use Yarn 2, see https://typicode.github.io/husky/#/?id=yarn-2
@@ -142,9 +140,8 @@ For example, you can do the following to have Prettier run before each commit:
```bash
pnpm add --save-dev husky lint-staged
pnpm exec husky install
npm pkg set scripts.prepare="husky install"
pnpm exec husky add .husky/pre-commit "pnpm exec lint-staged"
npx husky init
node --eval "fs.writeFileSync('.husky/pre-commit','pnpm exec lint-staged\n')"
```
<!--END_DOCUSAURUS_CODE_TABS-->