docs: add delimiterSpacing toggle and global option docs

Author: luisherranz

src/content/docs/formatter/index.mdx

@@ -67,6 +67,7 @@ The following defaults are applied:
       "arrowParentheses":"always",
       "bracketSameLine": false,
       "bracketSpacing": true,
+      "delimiterSpacing": false,
       "jsxQuoteStyle": "double",
       "quoteProperties": "asNeeded",
       "semicolons": "always",

src/content/docs/reference/configuration.mdx

@@ -635,6 +635,14 @@ Choose whether spaces should be added between brackets and inner values.
 
 > Default: `true`
 
+### `formatter.delimiterSpacing`
+
+Whether to insert spaces inside delimiters. Affects parentheses `()`, square brackets `[]`, TypeScript angle brackets `<>`, and JSX curly braces `{}`.
+
+This option is available for JavaScript, JSON, and CSS. It is not available for GraphQL.
+
+> Default: `false`
+
 ### `formatter.expand`
 
 Whether to expand arrays and objects on multiple lines.
@@ -845,6 +853,14 @@ Choose whether spaces should be added between brackets and inner values.
 
 > Default: `true`
 
+### `javascript.formatter.delimiterSpacing`
+
+Whether to insert spaces inside delimiters. Affects parentheses `()`, square brackets `[]`, TypeScript angle brackets `<>`, and JSX curly braces `{}`.
+
+This option is available for JavaScript, JSON, and CSS. It is not available for GraphQL.
+
+> Default: `false`
+
 ### `javascript.formatter.attributePosition`
 
 The attribute position style in jsx elements.
@@ -1086,6 +1102,12 @@ Choose whether spaces should be added between brackets and inner values.
 
 > Default: `true`
 
+### `json.formatter.delimiterSpacing`
+
+Whether to insert spaces inside square brackets `[]`.
+
+> Default: `false`
+
 ### `json.formatter.expand`
 
 Whether to expand arrays and objects on multiple lines.
@@ -1228,6 +1250,12 @@ The type of quote used when representing string literals. It can be `"single"` o
 
 > Default: `"double"`
 
+### `css.formatter.delimiterSpacing`
+
+Whether to insert spaces inside delimiters. Affects parentheses `()` and square brackets `[]`.
+
+> Default: `false`
+
 ### `css.formatter.trailingNewline`
 
 Whether to add a trailing newline at the end of the file.
@@ -1243,7 +1271,6 @@ Setting this option to `false` is **highly discouraged** because it could cause
 Disable trailing newline at your own risk.
 :::
 
-
 ### `css.linter.enabled`
 
 Enables Biome's linter for CSS files.

src/playground/PlaygroundLoader.tsx

@@ -432,6 +432,9 @@ function initState(
 			bracketSpacing:
 				searchParams.get("bracketSpacing") === "true" ||
 				defaultPlaygroundState.settings.bracketSpacing,
+			delimiterSpacing:
+				searchParams.get("delimiterSpacing") === "true" ||
+				defaultPlaygroundState.settings.delimiterSpacing,
 			bracketSameLine:
 				searchParams.get("bracketSameLine") === "true" ||
 				defaultPlaygroundState.settings.bracketSameLine,

src/playground/tabs/SettingsTab.tsx

@@ -58,6 +58,7 @@ export default function SettingsTab({
 			semicolons,
 			arrowParentheses,
 			bracketSpacing,
+			delimiterSpacing,
 			bracketSameLine,
 			expand,
 			indentScriptAndStyle,
@@ -121,6 +122,10 @@ export default function SettingsTab({
 		setPlaygroundState,
 		"bracketSpacing",
 	);
+	const setDelimiterSpacing = createPlaygroundSettingsSetter(
+		setPlaygroundState,
+		"delimiterSpacing",
+	);
 	const setBracketSameLine = createPlaygroundSettingsSetter(
 		setPlaygroundState,
 		"bracketSameLine",
@@ -350,6 +355,8 @@ export default function SettingsTab({
 				setAttributePosition={setAttributePosition}
 				bracketSpacing={bracketSpacing}
 				setBracketSpacing={setBracketSpacing}
+				delimiterSpacing={delimiterSpacing}
+				setDelimiterSpacing={setDelimiterSpacing}
 				bracketSameLine={bracketSameLine}
 				setBracketSameLine={setBracketSameLine}
 				expand={expand}
@@ -772,6 +779,8 @@ function FormatterSettings({
 	setAttributePosition,
 	bracketSpacing,
 	setBracketSpacing,
+	delimiterSpacing,
+	setDelimiterSpacing,
 	bracketSameLine,
 	setBracketSameLine,
 	expand,
@@ -803,6 +812,8 @@ function FormatterSettings({
 	setAttributePosition: (value: AttributePosition) => void;
 	bracketSpacing: boolean;
 	setBracketSpacing: (value: boolean) => void;
+	delimiterSpacing: boolean;
+	setDelimiterSpacing: (value: boolean) => void;
 	bracketSameLine: boolean;
 	setBracketSameLine: (value: boolean) => void;
 	expand: Expand;
@@ -822,6 +833,7 @@ function FormatterSettings({
 	const arrowParenthesesId = useId();
 	const attributePositionId = useId();
 	const bracketSpacingId = useId();
+	const delimiterSpacingId = useId();
 	const bracketSameLineId = useId();
 	const expandId = useId();
 	const indentScriptAndStyleId = useId();
@@ -966,6 +978,16 @@ function FormatterSettings({
 						onChange={(e) => setBracketSpacing(e.target.checked)}
 					/>
 				</div>
+				<div className="field-row">
+					<label htmlFor={delimiterSpacingId}>Delimiter Spacing</label>
+					<input
+						id={delimiterSpacingId}
+						name="delimiterSpacing"
+						type="checkbox"
+						checked={delimiterSpacing}
+						onChange={(e) => setDelimiterSpacing(e.target.checked)}
+					/>
+				</div>
 				<div className="field-row">
 					<label htmlFor={bracketSameLineId}>Bracket Same Line</label>
 					<input

src/playground/types.ts

@@ -178,6 +178,7 @@ export interface PlaygroundSettings {
 	arrowParentheses: ArrowParentheses;
 	attributePosition: AttributePosition;
 	bracketSpacing: boolean;
+	delimiterSpacing: boolean;
 	bracketSameLine: boolean;
 	expand: Expand;
 	lintRules: LintRule;
@@ -234,6 +235,7 @@ export const defaultPlaygroundState: PlaygroundState = {
 		arrowParentheses: ArrowParentheses.Always,
 		attributePosition: AttributePosition.Auto,
 		bracketSpacing: true,
+		delimiterSpacing: false,
 		bracketSameLine: false,
 		expand: Expand.Auto,
 		lintRules: LINT_RULES.recommended,

src/playground/workers/biomeWorker.ts

@@ -126,6 +126,7 @@ self.addEventListener("message", async (e) => {
 				semicolons,
 				arrowParentheses,
 				bracketSpacing,
+				delimiterSpacing,
 				bracketSameLine,
 				expand,
 				indentScriptAndStyle,
@@ -186,6 +187,7 @@ self.addEventListener("message", async (e) => {
 								? "always"
 								: "asNeeded",
 						bracketSpacing,
+						delimiterSpacing,
 						bracketSameLine,
 						attributePosition:
 							attributePosition === AttributePosition.Auto
@@ -200,6 +202,7 @@ self.addEventListener("message", async (e) => {
 				css: {
 					formatter: {
 						quoteStyle: quoteStyle === QuoteStyle.Double ? "double" : "single",
+						delimiterSpacing,
 					},
 					parser: {
 						allowWrongLineComments: true,
@@ -208,6 +211,9 @@ self.addEventListener("message", async (e) => {
 					},
 				},
 				json: {
+					formatter: {
+						delimiterSpacing,
+					},
 					parser: {
 						allowComments,
 					},