Release 3.2.5
This commit is contained in:
1 parent
8cbee2e217
commit
7142cf354c
8 files changed
+147
-44
No files matched your search
@@ -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
|
||||
|
||||
@@ -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
@@ -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
@@ -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
@@ -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-->
|
||||
|
||||
Reference in new issue
Block a user