docs: new guide on how to use biome in big projects (#318)

Co-authored-by: Tyler Cosgrove <[email protected]>

website/astro.config.ts

@@ -175,6 +175,14 @@ export default defineConfig({
 							label: "Manual installation",
 							link: "/guides/manual-installation",
 						},
+						{
+							label: "Use Rome in big projects",
+							link: "/guides/big-projects",
+							badge: {
+								text: "New",
+								variant: "note",
+							},
+						},
 					],
 				},
 				{

website/package.json

@@ -16,11 +16,10 @@
 	},
 	"devDependencies": {
 		"@algolia/client-search": "^4.17.0",
-		"@astrojs/mdx": "^0.19.7",
 		"@astrojs/prism": "^2.1.2",
 		"@astrojs/react": "^2.2.2",
 		"@astrojs/rss": "^2.4.4",
-		"@astrojs/vercel": "^3.8.1",
+		"@astrojs/vercel": "^5.0.0",
 		"@biomejs/wasm-web": "../packages/@biomejs/wasm-web",
 		"@codemirror/lang-javascript": "^6.1.8",
 		"@codemirror/lang-json": "^6.0.1",
@@ -36,7 +35,7 @@
 		"@types/react-dom": "^18.2.7",
 		"@uiw/react-codemirror": "^4.20.2",
 		"@vitejs/plugin-react": "^2.1.0",
-		"astro": "^2.10.9",
+		"astro": "^3.1.0",
 		"astro-compress": "^2.0.12",
 		"autoprefixer": "^10.4.12",
 		"codemirror-lang-rome-ast": "0.0.6",
@@ -59,12 +58,10 @@
 		"sass": "^1.62.1",
 		"typescript": "^5.0.4",
 		"vite": "3.1.8",
-		"vite-plugin-svgr": "^2.2.2"
-	},
-	"engines": {
-		"pnpm": "^8.0.0"
-	},
-	"dependencies": {
-		"@astrojs/starlight": "^0.8.0"
-	}
+		"vite-plugin-svgr": "^2.2.2",
+		"@astrojs/starlight": "^0.10.0"
+		},
+		"engines": {
+				"pnpm": "^8.0.0"
+		}
 }

website/src/content/docs/guides/big-projects.mdx

@@ -0,0 +1,103 @@
+---
+title: Use Rome in big projects
+description: A small guide how to set Biome in big projects
+---
+
+import CodeBlockHeader from "@src/components/CodeBlockHeader.astro";
+
+
+Biome can provide some tools that can help you to use it properly in big projects, such as monorepo or workspaces that contain multiple projects.
+
+
+## Use multiple configuration files
+
+When you use Biome's features - either with the CLI or LSP - the tool looks for the nearest configuration file using the current working directory.
+
+If Biome doesn't find the configuration file there, it **starts walking upwards** the directories of the file system, until it finds one.
+
+You can leverage this feature to apply different settings based on the project/folder.
+
+Let's suppose we have a project that contains a backend app and new frontend app.
+
+
+```
+app
+├── backend
+│   ├── biome.json
+│   └── package.json
+└── frontend
+    ├── biome.json
+    ├── legacy-app
+    │   └── package.json
+    └── new-app
+        └── package.json
+```
+
+This means that when you run a script from the file `app/backend/package.json`, Biome will use the configuration file `app/backend/biome.json`.
+
+When you run a script from `app/frontend/legacy-app/package.json` or `app/frontend/new-app/package.json`, Biome will use the configuration file `app/frontend/biome.json`.
+
+## Share the configuration
+
+It's possible to use the [`extends`](/reference/configuration#extends) configuration option to breakdown options across files.
+
+Let's assume that we have these requirements:
+- `legacy-app` have to format using spaces;
+- `backend` and `new-pp` have to format using tabs;
+- all apps have to format using line width 120;
+- `backend` app needs some extra linting;
+
+We start by creating a new configuration file at `app/biome.json`, and put there the shared options:
+
+<CodeBlockHeader filename="app/biome.json" />
+
+```json
+{
+  "formatter": {
+    "enabled": true,
+    "lineWidth": 120
+  }
+}
+```
+
+Now let's **move** `app/frontend/biome.json` to `app/frontend/legacy-app/`, because that's where we need to use a different formatting.
+
+<CodeBlockHeader filename="app/frontend/legacy-app/biome.json" />
+
+
+```json
+{
+  "formatter": {
+    "indentStyle": "space"
+  }
+}
+```
+
+Then, we tell Biome to inherit all the options from the main `app/biome.json` file, using the `extends` property:
+
+<CodeBlockHeader filename="app/frontend/legacy-app/biome.json" />
+
+```diff
+{
++  "extends": ["../../app.json"],
+   "formatter": {
+     "indentStyle": "space"
+   }
+}
+```
+
+Let's jump to `app/backend/biome.json`, where we need to enable the linting:
+
+<CodeBlockHeader filename="app/backend/biome.json" />
+
+```json
+{
+  "extends": ["../app.json"],
+    "linter": {
+      "enabled": "true",
+      "rules": {
+        "recommended": true
+      }
+   }
+}
+```

website/src/content/docs/guides/getting-started.mdx

@@ -33,9 +33,6 @@ However, this is not recommended.
 It's **highly recommended** not to use range operators when installing Biome.
 Check the [versioning page](/internals/versioning/) for more information.
 
-You can now run Biome with:
-
-<PackageManagerBiomeCommand command="" />
 
 ## Configuration
 

website/src/content/docs/guides/manual-installation.mdx

@@ -17,7 +17,7 @@ You're already familiar with the tooling, and installing and updating are simple
 * Windows (including WSL), macOS, or Linux
 * x86_64 or ARM64
 
-## Picking the right binary
+## Supported platforms
 
 You have to pick the correct binary for your platform for Biome work. The following table should help you do so.
 

website/src/env.d.ts

@@ -1,2 +1,2 @@
 /// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro/client-image" />
+/// <reference types="astro/client" />

website/src/playground/PlaygroundLoader.tsx

@@ -1,13 +1,19 @@
-import { Dispatch, SetStateAction, useEffect, useRef, useState } from "react";
+import {
+	type Dispatch,
+	type SetStateAction,
+	useEffect,
+	useRef,
+	useState,
+} from "react";
 import Playground from "./Playground";
 import LoadingScreen from "./components/LoadingScreen";
 import {
 	ArrowParentheses,
 	IndentStyle,
 	LintRules,
 	LoadingState,
-	PlaygroundSettings,
-	PlaygroundState,
+	type PlaygroundSettings,
+	type PlaygroundState,
 	QuoteProperties,
 	QuoteStyle,
 	Semicolons,

website/src/playground/tabs/FormatterCodeTab.tsx

@@ -1,5 +1,5 @@
 import fastDiff from "fast-diff";
-import CodeMirror, { BiomeExtension } from "../CodeMirror";
+import CodeMirror, { type BiomeExtension } from "../CodeMirror";
 import Collapsible from "../Collapsible";
 import BiomeHeader from "../components/BiomeHeader";
 import PrettierHeader from "../components/PrettierHeader";

website/src/playground/tabs/ImportSortingTab.tsx

@@ -1,4 +1,4 @@
-import CodeMirror, { BiomeExtension } from "../CodeMirror";
+import CodeMirror, { type BiomeExtension } from "../CodeMirror";
 interface Props {
 	code: string;
 	extensions: BiomeExtension[];

website/src/playground/tabs/SettingsTab.tsx

@@ -4,7 +4,7 @@ import {
 	ArrowParentheses,
 	IndentStyle,
 	LintRules,
-	PlaygroundState,
+	type PlaygroundState,
 	QuoteProperties,
 	QuoteStyle,
 	Semicolons,

website/src/playground/utils.ts

@@ -1,10 +1,10 @@
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import { type Dispatch, type SetStateAction, useEffect, useState } from "react";
 import type { ThemeName } from "../frontend-scripts/util";
 import { getCurrentTheme } from "../frontend-scripts/util";
 import {
-	PlaygroundFileState,
-	PlaygroundSettings,
-	PlaygroundState,
+	type PlaygroundFileState,
+	type PlaygroundSettings,
+	type PlaygroundState,
 	emptyBiomeOutput,
 	emptyPrettierOutput,
 } from "./types";

website/src/playground/workers/biomeWorker.ts

@@ -1,17 +1,17 @@
 import init, {
-	Configuration,
+	type Configuration,
 	DiagnosticPrinter,
-	RomePath as BiomePath,
-	RuleCategories,
+	type RomePath as BiomePath,
+	type RuleCategories,
 	Workspace,
 } from "@biomejs/wasm-web";
 import {
 	ArrowParentheses,
-	BiomeOutput,
+	type BiomeOutput,
 	IndentStyle,
 	LintRules,
 	LoadingState,
-	PlaygroundSettings,
+	type PlaygroundSettings,
 	QuoteProperties,
 	QuoteStyle,
 	Semicolons,

website/src/playground/workers/prettierWorker.ts

@@ -6,9 +6,9 @@ import pluginEstree from "prettier/plugins/estree.mjs";
 import {
 	ArrowParentheses,
 	IndentStyle,
-	PlaygroundSettings,
-	PrettierOptions,
-	PrettierOutput,
+	type PlaygroundSettings,
+	type PrettierOptions,
+	type PrettierOutput,
 	QuoteProperties,
 	QuoteStyle,
 	Semicolons,