Release 3.2.5

prettier · Feb 4, 2024 · 7142cf3 · 7142cf3
1 parent 8cbee2e
commit 7142cf3
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 44 deletions.
diff --git a/.github/ISSUE_TEMPLATE/formatting.md b/.github/ISSUE_TEMPLATE/formatting.md
@@ -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

diff --git a/.github/ISSUE_TEMPLATE/integration.md b/.github/ISSUE_TEMPLATE/integration.md
@@ -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. -->

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -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)

diff --git a/docs/browser.md b/docs/browser.md
@@ -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>`", {

diff --git a/package.json b/package.json
@@ -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",

diff --git a/website/versioned_docs/version-stable/api.md b/website/versioned_docs/version-stable/api.md
@@ -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.

diff --git a/website/versioned_docs/version-stable/browser.md b/website/versioned_docs/version-stable/browser.md
@@ -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>`", {

diff --git a/website/versioned_docs/version-stable/install.md b/website/versioned_docs/version-stable/install.md
@@ -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-->