{"id":4954,"date":"2026-02-18T06:49:46","date_gmt":"2026-02-18T06:49:46","guid":{"rendered":"https:\/\/softcolontechnologies.com\/blogs\/?p=4954"},"modified":"2026-02-18T06:50:35","modified_gmt":"2026-02-18T06:50:35","slug":"biome-the-best-alternative-to-prettier-and-eslint-for-developers","status":"publish","type":"post","link":"https:\/\/www.softcolon.com\/blogs\/biome-the-best-alternative-to-prettier-and-eslint-for-developers\/","title":{"rendered":"Biome: The Best Alternative to Prettier and ESLint for Developers"},"content":{"rendered":"<div class=\"\">\n<div class=\"max-w-7xl mx-auto\">\n<div class=\"max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 pb-8 lg:pb-12\">\n<div class=\"prose prose-lg dark:prose-invert max-w-none overflow-hidden [&amp;_a]:text-blue-400 [&amp;_a]:underline [&amp;_a]:hover:text-blue-300 [&amp;_blockquote]:my-8 [&amp;_blockquote]:border-l-4 [&amp;_blockquote]:border-[#3f3f46] [&amp;_blockquote]:pl-6 [&amp;_blockquote]:italic [&amp;_blockquote]:text-gray-300 [&amp;_code]:rounded [&amp;_code]:bg-[#24292e] [&amp;_code]:px-2 [&amp;_code]:py-1 [&amp;_code]:text-sm [&amp;_code]:before:content-none [&amp;_code]:after:content-none [&amp;_code]:text-[#EEEEEE] [&amp;_li]:my-2 [&amp;_ol]:my-6 [&amp;_p]:my-6 [&amp;_pre]:my-8 [&amp;_pre]:w-full [&amp;_pre]:max-w-full [&amp;_pre]:overflow-x-auto [&amp;_pre]:break-words [&amp;_pre]:rounded-lg [&amp;_pre]:border [&amp;_pre]:border-gray-700 [&amp;_pre]:bg-[#1a1a1a] [&amp;_pre]:p-6 [&amp;_pre_code]:whitespace-pre-wrap [&amp;_pre_code]:break-words [&amp;_pre_code]:!bg-transparent [&amp;_pre_code]:!p-0 [&amp;_ul]:my-6 [&amp;_table]:my-8 [&amp;_table]:w-full [&amp;_table]:border-collapse [&amp;_thead]:bg-[#24292e] [&amp;_th]:border [&amp;_th]:border-gray-600 [&amp;_th]:p-3 [&amp;_th]:text-left [&amp;_th]:font-semibold [&amp;_th]: [&amp;_td]:border [&amp;_td]:border-gray-600 [&amp;_td]:p-3 [&amp;_td]:text-gray-300 [&amp;_tbody_tr:nth-child(even)]:bg-gray-900\/30\">\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">Introduction<\/h2>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">If you&#8217;re a JavaScript developer working with React, Next.js, or Vue projects, you&#8217;ve probably spent hours wrestling with <strong>ESLint<\/strong> and <strong>Prettier<\/strong>. They&#8217;re essential tools for maintaining code quality, but they often feel like they fight each other more than they help.<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Welcome to <strong>Biome<\/strong> \ud83d\ude80\u2014a modern alternative that simplifies your entire code quality setup.<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">In this detailed guide, we&#8217;ll explore what Biome is, why it&#8217;s worth adopting, and how to integrate it into your projects. Whether you&#8217;re starting a new project or migrating an existing one, this guide has you covered.<\/p>\n<\/li>\n<\/ul>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">Understanding the Problem<\/h2>\n<p class=\" text-lg my-6\">The Traditional Setup (ESLint + Prettier)<\/p>\n<p class=\" text-lg my-6\">Let&#8217;s first understand the pain points that Biome solves.<\/p>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">What is ESLint?<\/h2>\n<p class=\" text-lg my-6\"><strong>ESLint<\/strong> is a JavaScript linter\u2014a tool that analyzes your code to find bugs, performance issues, and code quality problems. It checks for things like:<\/p>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Unused variables<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Undefined functions<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Logic errors<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Best practice violations<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Accessibility issues (in React)<\/p>\n<\/li>\n<\/ul>\n<p class=\" text-lg my-6\"><strong>Example of ESLint catching bugs:<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-javascript whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-comment\">\/\/ \u274c ESLint error: 'user' is declared but never used<\/span>\n<span class=\"hljs-keyword\">const<\/span> user = { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"John\"<\/span> };\n<span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-string\">\"Hello\"<\/span>);\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">What is Prettier?<\/h2>\n<p class=\" text-lg my-6\"><strong>Prettier<\/strong> is a code formatter\u2014a tool that automatically fixes how your code <em>looks<\/em> (formatting), regardless of style preferences. It handles:<\/p>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Indentation (spaces vs tabs)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Quote style (single vs double quotes)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Line length (when to break into multiple lines)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Semicolons (when to use them)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Spacing around brackets and operators<\/p>\n<\/li>\n<\/ul>\n<p class=\" text-lg my-6\"><strong>Example of Prettier formatting:<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-javascript whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-comment\">\/\/ Before Prettier (inconsistent formatting)<\/span>\n<span class=\"hljs-keyword\">const<\/span> obj = {<span class=\"hljs-attr\">name<\/span>:<span class=\"hljs-string\">\"John\"<\/span>,<span class=\"hljs-attr\">age<\/span>:<span class=\"hljs-number\">30<\/span>,<span class=\"hljs-attr\">email<\/span>:<span class=\"hljs-string\">\"john@example.com\"<\/span>}\n\n<span class=\"hljs-comment\">\/\/ After Prettier (consistent formatting)<\/span>\n<span class=\"hljs-keyword\">const<\/span> obj = {\n  <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"John\"<\/span>,\n  <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">30<\/span>,\n  <span class=\"hljs-attr\">email<\/span>: <span class=\"hljs-string\">\"john@example.com\"<\/span>\n};\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">The Conflict Problem<\/h2>\n<p class=\" text-lg my-6\">Here&#8217;s where the pain begins: <strong>ESLint and Prettier have overlapping concerns.<\/strong><\/p>\n<p class=\" text-lg my-6\">ESLint has formatting rules (like semicolon enforcement), and Prettier also enforces formatting. This creates conflicts:<\/p>\n<p class=\" text-lg my-6\"><strong>Scenario 1: Semicolon Conflict<\/strong><\/p>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">ESLint rule: &#8220;always use semicolons&#8221; (error)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Prettier: &#8220;I don&#8217;t use semicolons&#8221; (removes them)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Result: You run ESLint \u2192 adds semicolons \u2192 save file \u2192 Prettier removes them \u2192 infinite loop<\/p>\n<\/li>\n<\/ul>\n<p class=\" text-lg my-6\"><strong>Scenario 2: Quote Conflict<\/strong><\/p>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">ESLint rule: &#8220;use single quotes&#8221; (error)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Prettier: &#8220;I prefer double quotes&#8221; (changes them)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Result: Your code quality checks fail even though your code is &#8220;formatted&#8221;<\/p>\n<\/li>\n<\/ul>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">The Solution: Install More Tools!<\/h2>\n<p class=\" text-lg my-6\">To fix this, the JavaScript community created <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">eslint-config-prettier<\/code>\u2014a package that disables conflicting ESLint rules. Now your setup looks like:<\/p>\n<ol class=\"list-decimal ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>ESLint<\/strong> for linting (finding bugs)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>Prettier<\/strong> for formatting (fixing appearance)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>eslint-config-prettier<\/strong> for resolving conflicts<\/p>\n<\/li>\n<\/ol>\n<p class=\" text-lg my-6\">This means 3 different tools, 3 different configuration files (<code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">.eslintrc<\/code>, <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">.prettierrc<\/code>, <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">.prettierignore<\/code>), and lots of package dependencies.<\/p>\n<p class=\" text-lg my-6\"><strong>Real example from your package.json:<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"devDependencies\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"eslint\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"^8.0.0\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"prettier\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"^3.0.0\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"eslint-config-prettier\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"^9.0.0\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"eslint-plugin-react\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"^7.0.0\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"eslint-plugin-react-hooks\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"^4.0.0\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"@typescript-eslint\/eslint-plugin\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"^6.0.0\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"@typescript-eslint\/parser\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"^6.0.0\"<\/span>\n    <span class=\"hljs-comment\">\/\/ ... dozens more packages<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \"><strong>What is Biome?<\/strong><\/h2>\n<p class=\" text-lg my-6\"><strong>Biome<\/strong> is a single tool that combines the functionality of ESLint, Prettier, and more into one unified toolchain. Written in <strong>Rust<\/strong> (a fast programming language), it eliminates the complexity of managing multiple tools.<\/p>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">Key Characteristics<\/h2>\n<p class=\" text-lg my-6\"><strong>1. All-in-One Toolchain<\/strong><\/p>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Linter (finds bugs) \u2713<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Formatter (fixes appearance) \u2713<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Import organizer (sorts imports) \u2713<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">All in one tool<\/p>\n<\/li>\n<\/ul>\n<p class=\" text-lg my-6\"><strong>2. Blazingly Fast<\/strong><br \/>\nBecause it&#8217;s written in Rust and uses multi-threading, Biome is <strong>10-20x faster<\/strong> than ESLint + Prettier:<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-plaintext whitespace-pre-wrap break-words text-gray-300\">ESLint + Prettier on 450 files: 38 seconds\nBiome on 450 files: 2.9 seconds\nSpeed improvement: 13x faster!\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>3. Intelligent by Default<\/strong><br \/>\nBiome comes with smart defaults:<\/p>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Knows about React and TypeScript<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Enforces modern JavaScript best practices<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Understands your project structure automatically<\/p>\n<\/li>\n<\/ul>\n<p class=\" text-lg my-6\"><strong>4. Zero Configuration (Really!)<\/strong><br \/>\nUnlike ESLint which requires complex setups, Biome works out of the box:<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-bash whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-comment\"># Install<\/span>\nnpm install --save-dev @biomejs\/biome\n\n<span class=\"hljs-comment\"># Initialize<\/span>\nnpx biome init\n\n<span class=\"hljs-comment\"># Start linting and formatting immediately!<\/span>\nnpx biome check --write .\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">How Biome Works<\/h2>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-plaintext whitespace-pre-wrap break-words text-gray-300\">Your JavaScript Code\n        \u2193\n    Biome Engine (Rust)\n        \u2193\n    \u251c\u2500 Linter: Finds bugs\n    \u251c\u2500 Formatter: Fixes appearance\n    \u2514\u2500 Organizer: Sorts imports\n        \u2193\n    biome.json (single config file)\n        \u2193\n    Fixed &amp; Formatted Code\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \"><strong>Why Switch to Biome?<\/strong><\/h2>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \"><strong>1. One Configuration File<\/strong><\/h3>\n<p class=\" text-lg my-6\"><strong>Before (ESLint + Prettier):<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-plaintext whitespace-pre-wrap break-words text-gray-300\">project\/\n\u251c\u2500\u2500 .eslintrc.json\n\u251c\u2500\u2500 .eslintignore\n\u251c\u2500\u2500 .prettierrc\n\u251c\u2500\u2500 .prettierignore\n\u2514\u2500\u2500 eslint-config-prettier\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>After (Biome):<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-plaintext whitespace-pre-wrap break-words text-gray-300\">project\/\n\u2514\u2500\u2500 biome.json\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\">A single <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">biome.json<\/code> file handles everything. No more hunting through multiple configuration files.<\/p>\n<p class=\" text-lg my-6\"><strong>What a Biome config looks like:<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"formatter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"enabled\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"indentStyle\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"space\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"indentWidth\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-number\">2<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"lineWidth\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-number\">100<\/span>\n  <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"linter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"enabled\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"rules\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n      <span class=\"hljs-attr\">\"recommended\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span>\n    <span class=\"hljs-punctuation\">}<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\">Simple, readable, and complete.<\/p>\n<hr \/>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \"><strong>2. Zero Config Defaults<\/strong><\/h3>\n<p class=\" text-lg my-6\">Biome automatically enables recommended linting rules:<\/p>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>no-unused-vars<\/strong>: Catches variables you forget to use<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>useExhaustiveDependencies<\/strong>: Prevents React hook bugs<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>noConsoleLog<\/strong>: Reminds you to remove debug logging<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>And 400+ more rules<\/strong><\/p>\n<\/li>\n<\/ul>\n<p class=\" text-lg my-6\">You don&#8217;t need to research and manually enable each rule\u2014Biome knows what matters.<\/p>\n<hr \/>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">3. Incredible Speed<\/h3>\n<p class=\" text-lg my-6\">Real-world benchmarks on different project sizes:<\/p>\n<table>\n<thead>\n<tr>\n<th>Project Size<\/th>\n<th>ESLint + Prettier<\/th>\n<th>Biome<\/th>\n<th>Speed Improvement<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>Small (45 files)<\/td>\n<td>3.2 seconds<\/td>\n<td>0.4 seconds<\/td>\n<td><strong>8x faster<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Medium (180 files)<\/td>\n<td>12.8 seconds<\/td>\n<td>1.1 seconds<\/td>\n<td><strong>11.6x faster<\/strong><\/td>\n<\/tr>\n<tr>\n<td>Large (450+ files)<\/td>\n<td>38.4 seconds<\/td>\n<td>2.9 seconds<\/td>\n<td><strong>13.2x faster<\/strong><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p class=\" text-lg my-6\"><strong>What this means for your workflow:<\/strong><\/p>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>Pre-commit hooks<\/strong> complete instantly instead of waiting 5-10 seconds<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>CI\/CD pipelines<\/strong> finish in minutes instead of waiting 30+ minutes<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>Daily development<\/strong> feels snappier and more responsive<\/p>\n<\/li>\n<\/ul>\n<hr \/>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">4. Better Error Messages<\/h3>\n<p class=\" text-lg my-6\">Biome&#8217;s error messages are clear and actionable:<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-plaintext whitespace-pre-wrap break-words text-gray-300\">\u274c Biome ERROR (typical ESLint)\n42:10  error  'user' is assigned a value but never used  no-unused-vars\n\n\u2705 Biome ERROR (Biome's version)\nfile.js:42:10: error\n  42 \u2502 const user = { name: \"John\" };\n     \u2502       ^^^^\n  43 \u2502 console.log(\"Hello\");\n     \u2502\n  This variable is never used in your code.\n  Safe fix: Remove the unused variable.\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\">Clear, contextualized, actionable.<\/p>\n<hr \/>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">5. Unified Development Experience<\/h3>\n<p class=\" text-lg my-6\">No more context switching between tools:<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-bash whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-comment\"># ESLint + Prettier approach (run multiple commands)<\/span>\nnpm run lint\nnpm run format\nnpm run lint-fix\n\n<span class=\"hljs-comment\"># Biome approach (one command)<\/span>\nnpm run check  <span class=\"hljs-comment\"># Lints AND formats in one command<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">Getting Started: Installation<\/h2>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Step 1: Install Biome Package<\/h3>\n<p class=\" text-lg my-6\">Choose your package manager and run:<\/p>\n<p class=\" text-lg my-6\"><strong>Using npm:<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-bash whitespace-pre-wrap break-words text-gray-300\">npm install --save-dev --save-exact @biomejs\/biome\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>Using yarn:<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-bash whitespace-pre-wrap break-words text-gray-300\">yarn add --dev --exact @biomejs\/biome\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>Using pnpm:<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-bash whitespace-pre-wrap break-words text-gray-300\">pnpm add --save-dev --save-exact @biomejs\/biome\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\">The <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">--save-exact<\/code> flag is important\u2014it locks to the exact version to ensure consistency across your team.<\/p>\n<hr \/>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Step 2: Initialize Configuration<\/h3>\n<p class=\" text-lg my-6\">Create your initial configuration file:<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-bash whitespace-pre-wrap break-words text-gray-300\">npx biome init\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\">This command creates a <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">biome.json<\/code> file in your project root with sensible defaults:<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"$schema\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"https:\/\/biomejs.dev\/schemas\/2.3.10\/schema.json\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"vcs\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"enabled\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">false<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"clientKind\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"git\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"useIgnoreFile\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">false<\/span><\/span>\n  <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"files\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"ignoreUnknown\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">false<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"ignore\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">[<\/span><span class=\"hljs-punctuation\">]<\/span>\n  <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"formatter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"enabled\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"indentStyle\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"tab\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"lineWidth\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-number\">80<\/span>\n  <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"organizeImports\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"enabled\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span>\n  <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"linter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"enabled\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"rules\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n      <span class=\"hljs-attr\">\"recommended\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span>\n    <span class=\"hljs-punctuation\">}<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>What each section means:<\/strong><\/p>\n<table>\n<thead>\n<tr>\n<th>Section<\/th>\n<th>Purpose<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">$schema<\/code><\/td>\n<td>Helps your editor provide autocomplete for config options<\/td>\n<\/tr>\n<tr>\n<td><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">vcs<\/code><\/td>\n<td>Tells Biome to respect your <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">.gitignore<\/code> file<\/td>\n<\/tr>\n<tr>\n<td><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">files<\/code><\/td>\n<td>Controls which files Biome processes<\/td>\n<\/tr>\n<tr>\n<td><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">formatter<\/code><\/td>\n<td>Formatting settings (indentation, line width, etc.)<\/td>\n<\/tr>\n<tr>\n<td><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">organizeImports<\/code><\/td>\n<td>Automatically sorts your imports<\/td>\n<\/tr>\n<tr>\n<td><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">linter<\/code><\/td>\n<td>Linting settings and rules<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<hr \/>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Step 3: Test It Out<\/h3>\n<p class=\" text-lg my-6\">Try running Biome on your project:<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-bash whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-comment\"># Check what issues Biome finds (without fixing)<\/span>\nnpx biome check .\n\n<span class=\"hljs-comment\"># Check and automatically fix issues<\/span>\nnpx biome check --write .\n\n<span class=\"hljs-comment\"># Just format (without linting)<\/span>\nnpx biome format --write .\n\n<span class=\"hljs-comment\"># Just lint (without formatting)<\/span>\nnpx biome lint --apply .\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\">You should see output showing:<\/p>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Files processed<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Issues found<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Fixes applied<\/p>\n<\/li>\n<\/ul>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">Configuration Guide<\/h2>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Understanding Configuration Options<\/h3>\n<p class=\" text-lg my-6\">Biome is powerful because you can customize it to match your team&#8217;s preferences. Here&#8217;s a deep dive into common options:<\/p>\n<h4>Formatter Configuration<\/h4>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"formatter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"enabled\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"indentStyle\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"space\"<\/span><span class=\"hljs-punctuation\">,<\/span>      <span class=\"hljs-comment\">\/\/ \"space\" or \"tab\"<\/span>\n    <span class=\"hljs-attr\">\"indentWidth\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-number\">2<\/span><span class=\"hljs-punctuation\">,<\/span>             <span class=\"hljs-comment\">\/\/ Number of spaces (if using spaces)<\/span>\n    <span class=\"hljs-attr\">\"lineWidth\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-number\">100<\/span><span class=\"hljs-punctuation\">,<\/span>             <span class=\"hljs-comment\">\/\/ Max characters per line<\/span>\n    <span class=\"hljs-attr\">\"lineEnding\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"lf\"<\/span>            <span class=\"hljs-comment\">\/\/ \"lf\" (Unix) or \"crlf\" (Windows)<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>Real-world example:<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-javascript whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-comment\">\/\/ If lineWidth is 80<\/span>\n<span class=\"hljs-keyword\">const<\/span> user = { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"John\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">30<\/span>, <span class=\"hljs-attr\">email<\/span>: <span class=\"hljs-string\">\"john@example.com\"<\/span> };\n\n<span class=\"hljs-comment\">\/\/ Biome automatically breaks it into multiple lines<\/span>\n<span class=\"hljs-keyword\">const<\/span> user = {\n  <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"John\"<\/span>,\n  <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">30<\/span>,\n  <span class=\"hljs-attr\">email<\/span>: <span class=\"hljs-string\">\"john@example.com\"<\/span>\n};\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<h4>JavaScript-Specific Formatting<\/h4>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"javascript\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"formatter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n      <span class=\"hljs-attr\">\"quoteStyle\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"single\"<\/span><span class=\"hljs-punctuation\">,<\/span>         <span class=\"hljs-comment\">\/\/ Single or double quotes<\/span>\n      <span class=\"hljs-attr\">\"trailingCommas\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"es5\"<\/span><span class=\"hljs-punctuation\">,<\/span>        <span class=\"hljs-comment\">\/\/ When to add trailing commas<\/span>\n      <span class=\"hljs-attr\">\"semicolons\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"always\"<\/span><span class=\"hljs-punctuation\">,<\/span>         <span class=\"hljs-comment\">\/\/ Always, never, or asNeeded<\/span>\n      <span class=\"hljs-attr\">\"arrowParentheses\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"always\"<\/span><span class=\"hljs-punctuation\">,<\/span>   <span class=\"hljs-comment\">\/\/ (x) =&gt; {} or x =&gt; {}<\/span>\n      <span class=\"hljs-attr\">\"bracketSpacing\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>         <span class=\"hljs-comment\">\/\/ { x } or {x}<\/span>\n      <span class=\"hljs-attr\">\"bracketSameLine\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">false<\/span><\/span>        <span class=\"hljs-comment\">\/\/ &gt; on same line or new line<\/span>\n    <span class=\"hljs-punctuation\">}<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>Visual example:<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-javascript whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-comment\">\/\/ With recommended settings<\/span>\n<span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">map<\/span> = (<span class=\"hljs-params\">x<\/span>) =&gt; ({ <span class=\"hljs-attr\">value<\/span>: x });\n<span class=\"hljs-keyword\">const<\/span> obj = { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"John\"<\/span> };\n<span class=\"hljs-keyword\">const<\/span> items = [<span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">2<\/span>, <span class=\"hljs-number\">3<\/span>,];  <span class=\"hljs-comment\">\/\/ trailing comma<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<h4>Linter Rules Configuration<\/h4>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"linter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"enabled\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"rules\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n      <span class=\"hljs-attr\">\"recommended\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>        <span class=\"hljs-comment\">\/\/ Enable Biome's recommended rules<\/span>\n      <span class=\"hljs-attr\">\"complexity\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"noUselessFragments\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"warn\"<\/span>  <span class=\"hljs-comment\">\/\/ Warning, not error<\/span>\n      <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"style\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"noParameterAssign\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"off\"<\/span><span class=\"hljs-punctuation\">,<\/span>   <span class=\"hljs-comment\">\/\/ Disable this rule<\/span>\n        <span class=\"hljs-attr\">\"useNamingConvention\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"off\"<\/span>\n      <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"correctness\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"noUnusedVariables\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"warn\"<\/span>   <span class=\"hljs-comment\">\/\/ Warn instead of error<\/span>\n      <span class=\"hljs-punctuation\">}<\/span>\n    <span class=\"hljs-punctuation\">}<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>Rule severity levels:<\/strong><\/p>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">\"error\"<\/code>: Build fails, must fix<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">\"warn\"<\/code>: Shows warning, build passes<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">\"off\"<\/code>: Rule disabled<\/p>\n<\/li>\n<\/ul>\n<hr \/>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Common Configuration Scenarios<\/h3>\n<p class=\" text-lg my-6\"><strong>Scenario 1: New React Project<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"formatter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"indentStyle\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"space\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"indentWidth\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-number\">2<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"lineWidth\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-number\">100<\/span>\n  <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"linter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"rules\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n      <span class=\"hljs-attr\">\"recommended\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"correctness\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"useExhaustiveDependencies\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"error\"<\/span>  <span class=\"hljs-comment\">\/\/ Critical for React hooks<\/span>\n      <span class=\"hljs-punctuation\">}<\/span>\n    <span class=\"hljs-punctuation\">}<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>Scenario 2: Strict Enterprise Project<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"formatter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"indentStyle\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"space\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"indentWidth\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-number\">2<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"lineWidth\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-number\">80<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"semicolons\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"always\"<\/span>\n  <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"linter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"rules\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n      <span class=\"hljs-attr\">\"recommended\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"security\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"noDangerouslySetInnerHtml\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"error\"<\/span>\n      <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"a11y\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"useValidAnchor\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"error\"<\/span>\n      <span class=\"hljs-punctuation\">}<\/span>\n    <span class=\"hljs-punctuation\">}<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>Scenario 3: Lenient Startup<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"formatter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"indentStyle\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"space\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"indentWidth\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-number\">2<\/span>\n  <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"linter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"rules\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n      <span class=\"hljs-attr\">\"recommended\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"suspicious\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"noConsole\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"off\"<\/span>  <span class=\"hljs-comment\">\/\/ Allow console logs during development<\/span>\n      <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"style\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"useNamingConvention\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"off\"<\/span>  <span class=\"hljs-comment\">\/\/ Flexible naming<\/span>\n      <span class=\"hljs-punctuation\">}<\/span>\n    <span class=\"hljs-punctuation\">}<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">Migrating from ESLint &amp; Prettier<\/h2>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Option 1: Automatic Migration (Recommended)<\/h3>\n<p class=\" text-lg my-6\">Biome can automatically convert your existing ESLint configuration:<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-bash whitespace-pre-wrap break-words text-gray-300\">npx biome migrate eslint --write\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\">This command:<\/p>\n<ol class=\"list-decimal ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Reads your <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">.eslintrc<\/code> file<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Converts equivalent ESLint rules to Biome rules<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Updates your <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">biome.json<\/code> automatically<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Saves the mapping for reference<\/p>\n<\/li>\n<\/ol>\n<p class=\" text-lg my-6\"><strong>What happens:<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\">Before<span class=\"hljs-punctuation\">:<\/span>\n- .eslintrc\n- .eslintignore\n- .prettierrc\n- eslint-config-prettier\n\nAfter<span class=\"hljs-punctuation\">:<\/span>\n- biome.json (with all settings converted)\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Option 2: Manual Migration<\/h3>\n<p class=\" text-lg my-6\">If automatic migration doesn&#8217;t work perfectly, migrate manually:<\/p>\n<p class=\" text-lg my-6\"><strong>Step 1: Identify your ESLint rules<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-javascript whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-comment\">\/\/ .eslintrc<\/span>\n{\n  <span class=\"hljs-string\">\"extends\"<\/span>: [<span class=\"hljs-string\">\"eslint:recommended\"<\/span>],\n  <span class=\"hljs-string\">\"rules\"<\/span>: {\n    <span class=\"hljs-string\">\"no-console\"<\/span>: <span class=\"hljs-string\">\"warn\"<\/span>,\n    <span class=\"hljs-string\">\"no-unused-vars\"<\/span>: <span class=\"hljs-string\">\"error\"<\/span>\n  }\n}\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>Step 2: Convert to Biome<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"linter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"rules\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n      <span class=\"hljs-attr\">\"recommended\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"suspicious\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"noConsole\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"warn\"<\/span>\n      <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"correctness\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"noUnusedVariables\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"error\"<\/span>\n      <span class=\"hljs-punctuation\">}<\/span>\n    <span class=\"hljs-punctuation\">}<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>Step 3: Test thoroughly<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-bash whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-comment\"># Run Biome on your entire codebase<\/span>\nnpx biome check .\n\n<span class=\"hljs-comment\"># Compare with your old tools<\/span>\nnpm run lint   <span class=\"hljs-comment\"># Old ESLint<\/span>\nnpx biome lint <span class=\"hljs-comment\"># New Biome<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<hr \/>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Handling Migration Errors<\/h3>\n<h4>Error: &#8220;Calling module was not recognized&#8221;<\/h4>\n<p class=\" text-lg my-6\">This common error occurs with Next.js projects:<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\">\u2716 Migration has encountered an error<span class=\"hljs-punctuation\">:<\/span> `node` was invoked to resolve...\nError<span class=\"hljs-punctuation\">:<\/span> Failed to patch ESLint because the calling module was not recognized.\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>Why it happens:<\/strong> Next.js patches ESLint with special module resolution logic.<\/p>\n<p class=\" text-lg my-6\"><strong>Solution:<\/strong><\/p>\n<ol class=\"list-decimal ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Open <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">node_modules\/eslint-config-next\/index.js<\/code><\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Find this line (usually near the top):<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-javascript whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-built_in\">require<\/span>(<span class=\"hljs-string\">'@rushstack\/eslint-patch\/modern-module-resolution'<\/span>)\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Comment it out temporarily:<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-javascript whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-comment\">\/\/ require('@rushstack\/eslint-patch\/modern-module-resolution')<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Run migration:<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-bash whitespace-pre-wrap break-words text-gray-300\">npx biome migrate eslint --write\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Uncomment the line (if you plan to keep ESLint)<\/p>\n<\/li>\n<\/ol>\n<hr \/>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Complete Migration Checklist<\/h3>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\">\u25a1 Install Biome<span class=\"hljs-punctuation\">:<\/span> npm install --save-dev @biomejs\/biome\n\u25a1 Initialize<span class=\"hljs-punctuation\">:<\/span> npx biome init\n\u25a1 Backup<span class=\"hljs-punctuation\">:<\/span> Save your .eslintrc and .prettierrc\n\u25a1 Migrate<span class=\"hljs-punctuation\">:<\/span> npx biome migrate eslint --write\n\u25a1 Test<span class=\"hljs-punctuation\">:<\/span> npx biome check . (should pass)\n\u25a1 Update scripts in package.json\n\u25a1 Remove old tools<span class=\"hljs-punctuation\">:<\/span> npm uninstall eslint prettier\n\u25a1 Update your CI\/CD to use Biome\n\u25a1 Commit and deploy\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">VS Code Setup<\/h2>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Install the Biome Extension<\/h3>\n<p class=\" text-lg my-6\">For the best development experience, install Biome&#8217;s VS Code extension:<\/p>\n<ol class=\"list-decimal ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Open VS Code<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Go to Extensions (Ctrl+Shift+X \/ Cmd+Shift+X)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Search for &#8220;Biome&#8221;<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Install the official extension by Biomejs<\/p>\n<\/li>\n<\/ol>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Configure VS Code Settings<\/h3>\n<p class=\" text-lg my-6\">Create a <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">.vscode\/settings.json<\/code> file in your project root:<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"editor.defaultFormatter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"biomejs.biome\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"editor.formatOnSave\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"editor.codeActionsOnSave\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"source.fixAll.biome\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"explicit\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"source.organizeImports.biome\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"explicit\"<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>What this does:<\/strong><\/p>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Sets Biome as your default formatter<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Automatically fixes code on save<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Organizes imports on save<\/p>\n<\/li>\n<\/ul>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Testing VS Code Integration<\/h3>\n<ol class=\"list-decimal ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Open a JavaScript file in VS Code<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Make a formatting mistake (extra spaces, wrong quotes, etc.)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Press Save (Ctrl+S \/ Cmd+S)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Watch Biome automatically fix it! \u2728<\/p>\n<\/li>\n<\/ol>\n<p class=\" text-lg my-6\"><strong>Before save:<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-javascript whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-keyword\">const<\/span> user={<span class=\"hljs-attr\">name<\/span>:<span class=\"hljs-string\">\"John\"<\/span>,<span class=\"hljs-attr\">age<\/span>:<span class=\"hljs-number\">30<\/span>}\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>After save:<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-javascript whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-keyword\">const<\/span> user = { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">\"John\"<\/span>, <span class=\"hljs-attr\">age<\/span>: <span class=\"hljs-number\">30<\/span> };\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">Production-Ready Configuration<\/h2>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Recommended biome.json for Production<\/h3>\n<p class=\" text-lg my-6\">Here&#8217;s a battle-tested configuration used in production React applications:<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"$schema\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"https:\/\/biomejs.dev\/schemas\/2.3.10\/schema.json\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"vcs\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"enabled\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"clientKind\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"git\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"useIgnoreFile\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span>\n  <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"files\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"ignoreUnknown\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">false<\/span><\/span>\n  <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"formatter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"enabled\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"indentStyle\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"space\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"indentWidth\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-number\">2<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"lineWidth\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-number\">100<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"lineEnding\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"lf\"<\/span>\n  <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"linter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"enabled\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"rules\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n      <span class=\"hljs-attr\">\"recommended\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"a11y\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"useValidAnchor\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"off\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n        <span class=\"hljs-attr\">\"noLabelWithoutControl\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"off\"<\/span>\n      <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"complexity\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"noUselessFragments\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"warn\"<\/span>\n      <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"style\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"noParameterAssign\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"off\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n        <span class=\"hljs-attr\">\"useNamingConvention\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"off\"<\/span>\n      <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"correctness\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"noUnusedVariables\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"warn\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n        <span class=\"hljs-attr\">\"noChildrenProp\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"off\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n        <span class=\"hljs-attr\">\"useExhaustiveDependencies\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"off\"<\/span>\n      <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"suspicious\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"noConsole\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"off\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n        <span class=\"hljs-attr\">\"noArrayIndexKey\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"off\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n        <span class=\"hljs-attr\">\"noDuplicateJsxProps\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"warn\"<\/span>\n      <span class=\"hljs-punctuation\">}<\/span>\n    <span class=\"hljs-punctuation\">}<\/span>\n  <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"assist\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"enabled\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"actions\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n      <span class=\"hljs-attr\">\"source\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"organizeImports\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"on\"<\/span>\n      <span class=\"hljs-punctuation\">}<\/span>\n    <span class=\"hljs-punctuation\">}<\/span>\n  <span class=\"hljs-punctuation\">}<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"javascript\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"formatter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n      <span class=\"hljs-attr\">\"quoteStyle\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"single\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"trailingCommas\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"es5\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"semicolons\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"always\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"arrowParentheses\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"always\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"bracketSpacing\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"bracketSameLine\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">false<\/span><\/span>\n    <span class=\"hljs-punctuation\">}<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Understanding Each Section<\/h3>\n<h4>VCS Configuration<\/h4>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-attr\">\"vcs\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"enabled\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"clientKind\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"git\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"useIgnoreFile\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>enabled<\/strong>: Biome respects your VCS (Git)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>clientKind<\/strong>: Uses Git (supports other VCS too)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>useIgnoreFile<\/strong>: Respects <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">.gitignore<\/code> file<\/p>\n<\/li>\n<\/ul>\n<p class=\" text-lg my-6\"><strong>Benefit:<\/strong> Biome won&#8217;t try to lint <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">node_modules\/<\/code> or other ignored files.<\/p>\n<h4>Formatter Configuration<\/h4>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-attr\">\"formatter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"enabled\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"indentStyle\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"space\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"indentWidth\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-number\">2<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"lineWidth\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-number\">100<\/span><span class=\"hljs-punctuation\">,<\/span>\n  <span class=\"hljs-attr\">\"lineEnding\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"lf\"<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>indentStyle<\/strong>: Use spaces (more compatible) instead of tabs<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>indentWidth<\/strong>: 2 spaces per indentation level (React standard)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>lineWidth<\/strong>: 100 characters per line (wider than default 80)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>lineEnding<\/strong>: Unix line endings (LF) for consistency across OS<\/p>\n<\/li>\n<\/ul>\n<h4>Linter Rules<\/h4>\n<p class=\" text-lg my-6\"><strong>&#8220;off&#8221; rules (disabled):<\/strong><\/p>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">noConsole<\/code>: Allows console logs (useful during development)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">useValidAnchor<\/code>: Less strict accessibility<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">noParameterAssign<\/code>: Allow modifying function parameters<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">noChildrenProp<\/code>: Allow passing children as props<\/p>\n<\/li>\n<\/ul>\n<p class=\" text-lg my-6\"><strong>&#8220;warn&#8221; rules (warnings, not errors):<\/strong><\/p>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">noUnusedVariables<\/code>: Warns about unused variables<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">noDuplicateJsxProps<\/code>: Warns about duplicate props in JSX<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">noUselessFragments<\/code>: Warns about unnecessary fragments<\/p>\n<\/li>\n<\/ul>\n<p class=\" text-lg my-6\">These are warnings because they&#8217;re helpful but not always critical.<\/p>\n<h4>JavaScript Formatter<\/h4>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-attr\">\"javascript\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"formatter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"quoteStyle\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"single\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"trailingCommas\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"es5\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"semicolons\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"always\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"arrowParentheses\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"always\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"bracketSpacing\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"bracketSameLine\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">false<\/span><\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>Visual examples:<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-javascript whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-comment\">\/\/ quoteStyle: \"single\"<\/span>\n<span class=\"hljs-keyword\">const<\/span> name = <span class=\"hljs-string\">'John'<\/span>;  <span class=\"hljs-comment\">\/\/ \u2713 Correct<\/span>\n\n<span class=\"hljs-comment\">\/\/ trailingCommas: \"es5\"<\/span>\n<span class=\"hljs-keyword\">const<\/span> items = [<span class=\"hljs-number\">1<\/span>, <span class=\"hljs-number\">2<\/span>, <span class=\"hljs-number\">3<\/span>,];  <span class=\"hljs-comment\">\/\/ \u2713 Added trailing comma<\/span>\n\n<span class=\"hljs-comment\">\/\/ semicolons: \"always\"<\/span>\n<span class=\"hljs-keyword\">const<\/span> x = <span class=\"hljs-number\">5<\/span>;  <span class=\"hljs-comment\">\/\/ \u2713 Semicolon added<\/span>\n\n<span class=\"hljs-comment\">\/\/ arrowParentheses: \"always\"<\/span>\n<span class=\"hljs-keyword\">const<\/span> <span class=\"hljs-title function_\">fn<\/span> = (<span class=\"hljs-params\">x<\/span>) =&gt; x * <span class=\"hljs-number\">2<\/span>;  <span class=\"hljs-comment\">\/\/ \u2713 Always includes parentheses<\/span>\n\n<span class=\"hljs-comment\">\/\/ bracketSpacing: true<\/span>\n<span class=\"hljs-keyword\">const<\/span> obj = { <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'John'<\/span> };  <span class=\"hljs-comment\">\/\/ \u2713 Spaces inside brackets<\/span>\n\n<span class=\"hljs-comment\">\/\/ bracketSameLine: false<\/span>\n<span class=\"hljs-keyword\">const<\/span> obj = {\n  <span class=\"hljs-attr\">name<\/span>: <span class=\"hljs-string\">'John'<\/span>\n};  <span class=\"hljs-comment\">\/\/ \u2713 Closing bracket on new line<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">Running Biome in Your Project<\/h2>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Update package.json Scripts<\/h3>\n<p class=\" text-lg my-6\">Replace your old linting and formatting scripts:<\/p>\n<p class=\" text-lg my-6\"><strong>Before (ESLint + Prettier):<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"scripts\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"lint\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"eslint .\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"lint:fix\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"eslint . --fix\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"format\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"prettier --write .\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"check\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"npm run lint &amp;&amp; npm run format\"<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>After (Biome):<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"scripts\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"lint\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"biome lint .\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"lint:fix\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"biome lint --apply .\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"format\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"biome format --write .\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"check\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"biome check --apply .\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"ci\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"biome ci .\"<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Common Commands<\/h3>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-bash whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-comment\"># Check for issues (don't fix)<\/span>\nnpm run check\n\n<span class=\"hljs-comment\"># Check and automatically fix issues<\/span>\nnpm run check -- --write\n\n<span class=\"hljs-comment\"># Just format code<\/span>\nnpm run format\n\n<span class=\"hljs-comment\"># Just lint code<\/span>\nnpm run lint\n\n<span class=\"hljs-comment\"># Lint and fix<\/span>\nnpm run lint:fix\n\n<span class=\"hljs-comment\"># Format specific file<\/span>\nbiome format --write src\/App.jsx\n\n<span class=\"hljs-comment\"># Format entire directory<\/span>\nbiome format --write src\/\n\n<span class=\"hljs-comment\"># Check a single file<\/span>\nbiome check src\/utils\/helpers.js\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<hr \/>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Setting Up Pre-commit Hooks<\/h3>\n<p class=\" text-lg my-6\">Use Husky to run Biome before each commit:<\/p>\n<p class=\" text-lg my-6\"><strong>Step 1: Install Husky<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-bash whitespace-pre-wrap break-words text-gray-300\">npm install husky --save-dev\nnpx husky install\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>Step 2: Create pre-commit hook<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-bash whitespace-pre-wrap break-words text-gray-300\">npx husky add .husky\/pre-commit <span class=\"hljs-string\">\"biome check --staged\"<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\">This runs Biome on only the files you&#8217;re committing, saving time.<\/p>\n<p class=\" text-lg my-6\"><strong>Step 3: Test it<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-bash whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-comment\"># Make changes to a file<\/span>\n<span class=\"hljs-built_in\">echo<\/span> <span class=\"hljs-string\">\"const x =    5\"<\/span> &gt; src\/test.js\n\n<span class=\"hljs-comment\"># Stage the change<\/span>\ngit add src\/test.js\n\n<span class=\"hljs-comment\"># Try to commit<\/span>\ngit commit -m <span class=\"hljs-string\">\"test\"<\/span>\n\n<span class=\"hljs-comment\"># Biome will check the file and potentially prevent commit if there are issues<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">CI\/CD Integration<\/h3>\n<p class=\" text-lg my-6\"><strong>GitHub Actions:<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-yaml whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-attr\">name:<\/span> <span class=\"hljs-string\">Code<\/span> <span class=\"hljs-string\">Quality<\/span>\n\n<span class=\"hljs-attr\">on:<\/span> [<span class=\"hljs-string\">push<\/span>, <span class=\"hljs-string\">pull_request<\/span>]\n\n<span class=\"hljs-attr\">jobs:<\/span>\n  <span class=\"hljs-attr\">biome:<\/span>\n    <span class=\"hljs-attr\">runs-on:<\/span> <span class=\"hljs-string\">ubuntu-latest<\/span>\n    <span class=\"hljs-attr\">steps:<\/span>\n      <span class=\"hljs-bullet\">-<\/span> <span class=\"hljs-attr\">uses:<\/span> <span class=\"hljs-string\">actions\/checkout@v4<\/span>\n      <span class=\"hljs-bullet\">-<\/span> <span class=\"hljs-attr\">uses:<\/span> <span class=\"hljs-string\">actions\/setup-node@v4<\/span>\n        <span class=\"hljs-attr\">with:<\/span>\n          <span class=\"hljs-attr\">node-version:<\/span> <span class=\"hljs-number\">18<\/span>\n      <span class=\"hljs-bullet\">-<\/span> <span class=\"hljs-attr\">run:<\/span> <span class=\"hljs-string\">npm<\/span> <span class=\"hljs-string\">install<\/span>\n      <span class=\"hljs-bullet\">-<\/span> <span class=\"hljs-attr\">run:<\/span> <span class=\"hljs-string\">npx<\/span> <span class=\"hljs-string\">biome<\/span> <span class=\"hljs-string\">ci<\/span> <span class=\"hljs-string\">.<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\"><strong>GitLab CI:<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-yaml whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-attr\">lint:<\/span>\n  <span class=\"hljs-attr\">image:<\/span> <span class=\"hljs-string\">node:18<\/span>\n  <span class=\"hljs-attr\">script:<\/span>\n    <span class=\"hljs-bullet\">-<\/span> <span class=\"hljs-string\">npm<\/span> <span class=\"hljs-string\">install<\/span>\n    <span class=\"hljs-bullet\">-<\/span> <span class=\"hljs-string\">npx<\/span> <span class=\"hljs-string\">biome<\/span> <span class=\"hljs-string\">ci<\/span> <span class=\"hljs-string\">.<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">FAQ and Troubleshooting<\/h2>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Q: Will Biome break my existing ESLint setup?<\/h3>\n<p class=\" text-lg my-6\"><strong>A:<\/strong> Only if you use ESLint plugins that Biome doesn&#8217;t support. Common plugins are supported:<\/p>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">eslint-plugin-react<\/code> \u2713<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">eslint-plugin-react-hooks<\/code> \u2713<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">@typescript-eslint<\/code> \u2713<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">eslint-plugin-next<\/code> \u2713<\/p>\n<\/li>\n<\/ul>\n<p class=\" text-lg my-6\">Niche plugins may need custom configuration.<\/p>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Q: Can I use Biome with my favorite ESLint plugin?<\/h3>\n<p class=\" text-lg my-6\"><strong>A:<\/strong> Biome doesn&#8217;t support all ESLint plugins (it doesn&#8217;t use the same plugin system). However:<\/p>\n<ol class=\"list-decimal ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Most common rules are built-in (410 rules total)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">You can disable Biome rules and keep ESLint for specific rules<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">The plugin ecosystem is constantly growing<\/p>\n<\/li>\n<\/ol>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Q: How do I disable specific Biome rules?<\/h3>\n<p class=\" text-lg my-6\"><strong>A:<\/strong> Set them to &#8220;off&#8221; in <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">biome.json<\/code>:<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"linter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"rules\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n      <span class=\"hljs-attr\">\"suspicious\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"noConsole\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"off\"<\/span>  <span class=\"hljs-comment\">\/\/ Disable this rule<\/span>\n      <span class=\"hljs-punctuation\">}<\/span>\n    <span class=\"hljs-punctuation\">}<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Q: Does Biome support CSS or HTML?<\/h3>\n<p class=\" text-lg my-6\"><strong>A:<\/strong> Partially:<\/p>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>CSS<\/strong>: Basic linting supported<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>HTML<\/strong>: Not yet (future roadmap)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>JSON<\/strong>: Full support \u2713<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>GraphQL<\/strong>: Full support \u2713<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>JSX\/TSX<\/strong>: Full support \u2713<\/p>\n<\/li>\n<\/ul>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Q: What about TypeScript support?<\/h3>\n<p class=\" text-lg my-6\"><strong>A:<\/strong> Full support! Biome automatically detects <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">.ts<\/code> and <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">.tsx<\/code> files and applies appropriate rules.<\/p>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Q: Can I gradually migrate to Biome?<\/h3>\n<p class=\" text-lg my-6\"><strong>A:<\/strong> Yes! You can run both tools side-by-side:<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"scripts\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"lint:old\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"eslint .\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"lint:new\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"biome check .\"<\/span><span class=\"hljs-punctuation\">,<\/span>\n    <span class=\"hljs-attr\">\"lint\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"npm run lint:new\"<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\">Run both to compare results, then fully switch when confident.<\/p>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Q: How do I suppress Biome warnings for a specific line?<\/h3>\n<p class=\" text-lg my-6\"><strong>A:<\/strong> Use inline comments:<\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-javascript whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-comment\">\/\/ Disable for one line<\/span>\n<span class=\"hljs-comment\">\/\/ biome-ignore lint\/suspicious\/noConsole: Debug info<\/span>\n<span class=\"hljs-variable language_\">console<\/span>.<span class=\"hljs-title function_\">log<\/span>(<span class=\"hljs-string\">\"Debug\"<\/span>);\n\n<span class=\"hljs-comment\">\/\/ Disable for a block<\/span>\n<span class=\"hljs-comment\">\/* biome-ignore lint *\/<\/span>\n<span class=\"hljs-keyword\">function<\/span> <span class=\"hljs-title function_\">legacyCode<\/span>() {\n  <span class=\"hljs-comment\">\/\/ Old code that violates modern rules<\/span>\n}\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Q: What if Biome doesn&#8217;t support my specific use case?<\/h3>\n<p class=\" text-lg my-6\"><strong>A:<\/strong> You have options:<\/p>\n<ol class=\"list-decimal ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Check Biome&#8217;s GitHub issues (might be planned)<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Use suppression comments<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Keep ESLint for that specific rule<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Request a feature<\/p>\n<\/li>\n<\/ol>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Q: Does Biome work with Next.js?<\/h3>\n<p class=\" text-lg my-6\"><strong>A:<\/strong> Absolutely! Next.js projects work great with Biome. Just handle the migration error mentioned earlier.<\/p>\n<p class=\" text-lg my-6\"><strong>Typical Next.js setup:<\/strong><\/p>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-json whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-punctuation\">{<\/span>\n  <span class=\"hljs-attr\">\"linter\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n    <span class=\"hljs-attr\">\"rules\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n      <span class=\"hljs-attr\">\"recommended\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-literal\"><span class=\"hljs-keyword\">true<\/span><\/span><span class=\"hljs-punctuation\">,<\/span>\n      <span class=\"hljs-attr\">\"correctness\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-punctuation\">{<\/span>\n        <span class=\"hljs-attr\">\"useExhaustiveDependencies\"<\/span><span class=\"hljs-punctuation\">:<\/span> <span class=\"hljs-string\">\"warn\"<\/span>\n      <span class=\"hljs-punctuation\">}<\/span>\n    <span class=\"hljs-punctuation\">}<\/span>\n  <span class=\"hljs-punctuation\">}<\/span>\n<span class=\"hljs-punctuation\">}<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Q: How do I update Biome to the latest version?<\/h3>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-bash whitespace-pre-wrap break-words text-gray-300\">npm install --save-dev @biomejs\/biome@latest\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<p class=\" text-lg my-6\">It&#8217;s important to use the <code class=\"break-words rounded bg-[#24292E] px-2 py-1 text-[#EEEEEE]\">--save-exact<\/code> flag initially to lock versions, but you can update when ready.<\/p>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">Conclusion<\/h2>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Summary<\/h3>\n<p class=\" text-lg my-6\">Biome represents a significant step forward in JavaScript tooling. By combining linting, formatting, and import organization into a single, blazingly-fast tool, it eliminates the configuration nightmare that has plagued JavaScript developers for years.<\/p>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Key Takeaways<\/h3>\n<ol class=\"list-decimal ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>Unified Tooling<\/strong>: One tool, one config file, infinite clarity<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>Incredible Speed<\/strong>: 10-20x faster than ESLint + Prettier<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>Zero Conflicts<\/strong>: No more fighting tools<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>Intelligent Defaults<\/strong>: Works great out of the box<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>Easy Migration<\/strong>: Existing projects can migrate in minutes<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>Modern Best Practices<\/strong>: Built with modern JavaScript in mind<\/p>\n<\/li>\n<\/ol>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Why You Should Try Biome<\/h3>\n<p class=\" text-lg my-6\"><strong>If you answer &#8220;yes&#8221; to any of these, Biome is for you:<\/strong><\/p>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Do you spend time configuring ESLint and Prettier?<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Does your CI\/CD pipeline waste time on linting?<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Do you get frustrated with tool conflicts?<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Do you want to improve developer experience?<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Are you starting a new JavaScript project?<\/p>\n<\/li>\n<\/ul>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Getting Started Today<\/h3>\n<div class=\"relative group\">\n<pre class=\"relative bg-[#1a1a1a] border border-gray-700 rounded-lg overflow-x-auto my-8 p-6\"><code class=\"hljs language-bash whitespace-pre-wrap break-words text-gray-300\"><span class=\"hljs-comment\"># 1. Install<\/span>\nnpm install --save-dev --save-exact @biomejs\/biome\n\n<span class=\"hljs-comment\"># 2. Initialize<\/span>\nnpx biome init\n\n<span class=\"hljs-comment\"># 3. Start linting and formatting<\/span>\nnpm run check\n\n<span class=\"hljs-comment\"># 4. Enjoy clean code with zero headaches \u2728<\/span>\n<\/code><\/pre>\n<p><button class=\"absolute top-4 cursor-pointer right-4 p-2 rounded-md bg-[#24292e] hover:bg-gray-700 border border-gray-600 opacity-0 group-hover:opacity-100 transition-opacity duration-200\" title=\"Copy code\"><\/button><\/div>\n<h3 class=\"text-2xl mt-10 mb-4 font-bold \">Next Steps<\/h3>\n<ol class=\"list-decimal ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Try Biome on a new project first<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Measure the performance improvements<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Migrate existing projects gradually<\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\">Share your feedback with the community<\/p>\n<\/li>\n<\/ol>\n<p class=\" text-lg my-6\">The JavaScript community is moving toward simpler, faster tooling. Biome is leading that charge. Don&#8217;t get left behind!<\/p>\n<hr \/>\n<h2 class=\"text-3xl font-semibold mt-14 mb-8 \">Resources<\/h2>\n<ul class=\"list-disc ml-6 my-6\">\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>Documentation<\/strong>: <a class=\"! !underline\" href=\"https:\/\/biomejs.dev\/\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/biomejs.dev<\/a><\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>GitHub Repository<\/strong>: <a class=\"! !underline\" href=\"https:\/\/github.com\/biomejs\/biome\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/github.com\/biomejs\/biome<\/a><\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>Configuration Reference<\/strong>: <a class=\"! !underline\" href=\"https:\/\/biomejs.dev\/reference\/configuration\" target=\"_blank\" rel=\"noopener noreferrer\">https:\/\/biomejs.dev\/reference\/configuration<\/a><\/p>\n<\/li>\n<li class=\" text-lg my-2\">\n<p class=\" text-lg my-6\"><strong>Community Discord<\/strong>: Join for help and discussions<\/p>\n<\/li>\n<\/ul>\n<hr \/>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<section class=\"pt-16 pb-25 relative overflow-hidden bg-[#1b1b1b] mt-0 mb-10\">\n<div class=\"max-w-[1396px] mx-auto flex flex-col px-4 md:px-8 items-center justify-center\"><\/div>\n<\/section>\n","protected":false},"excerpt":{"rendered":"<p>Introduction If you&#8217;re a JavaScript developer working with React, Next.js, or Vue projects, you&#8217;ve probably spent hours wrestling with ESLint and Prettier. They&#8217;re essential tools for maintaining code quality, but they often feel like they fight each other more than they help. Welcome to Biome \ud83d\ude80\u2014a modern alternative that simplifies your entire code quality setup&#8230;.<\/p>\n","protected":false},"author":1,"featured_media":4955,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[213],"tags":[214,220],"class_list":["post-4954","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-software-development","tag-mern","tag-web","th-blog blog-single has-post-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.softcolon.com\/blogs\/wp-json\/wp\/v2\/posts\/4954","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.softcolon.com\/blogs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.softcolon.com\/blogs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.softcolon.com\/blogs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.softcolon.com\/blogs\/wp-json\/wp\/v2\/comments?post=4954"}],"version-history":[{"count":2,"href":"https:\/\/www.softcolon.com\/blogs\/wp-json\/wp\/v2\/posts\/4954\/revisions"}],"predecessor-version":[{"id":4957,"href":"https:\/\/www.softcolon.com\/blogs\/wp-json\/wp\/v2\/posts\/4954\/revisions\/4957"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.softcolon.com\/blogs\/wp-json\/wp\/v2\/media\/4955"}],"wp:attachment":[{"href":"https:\/\/www.softcolon.com\/blogs\/wp-json\/wp\/v2\/media?parent=4954"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.softcolon.com\/blogs\/wp-json\/wp\/v2\/categories?post=4954"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.softcolon.com\/blogs\/wp-json\/wp\/v2\/tags?post=4954"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}