Biome, toolchain of the web Skip to content Biome Docs Enterprise Playground Search Ctrl K Cancel Discord GitHub Mastodon Open Collective YouTube BlueSky RSS Blog Select theme Dark Light Auto Select language English Español Français 日本語 简体中文 Polski Português Українська Русский Version v1.x v2.x next More than 500 lint rules with Biome v2.5! One toolchain for your web project Format, lint, and more in a fraction of a second. Get started View on GitHub Format code like Prettier, save time Biome is a fast formatter for JavaScript , TypeScript , JSX , TSX , JSON , HTML , CSS and GraphQL that scores 97% compatibility with Prettier (see known limitations ), saving CI and developer time . Biome can even format malformed code as you write it in your favorite editor . CODE 1 function HelloWorld ( { greeting = " hello " , greeted = ' "World" ' , silent = false , onMouseOver , } ) { 2 3 if ( ! greeting ){ return null }; 4 5 // TODO: Don't use random in render 6 let num = Math . floor ( Math . random () * 1E+7 ) . toString () . replace ( / . d + / ig , "" ) 7 8 return < div className = ' HelloWorld ' title = { ` You are visitor number ${ num } ` } onMouseOver = { onMouseOver } > 9 10 < strong > { greeting . slice ( 0 , 1 ) . toUpperCase () + greeting . slice ( 1 ) . toLowerCase () } </ strong > 11 { greeting . endsWith ( " , " ) ? " " : < span style = { {color: ' grey ' } } > ", " </ span > } 12 < em > 13 { greeted } 14 </ em > 15 { ( silent ) 16 ? " . " 17 : " ! " } 18 19 </ div > ; 20 } { greeting.slice( 0, 1 ).toUpperCase() + greeting.slice(1).toLowerCase() } {greeting.endsWith(",") ? " " : ", " } { greeted } { (silent) ? "." : "!"} ;}"> OUTPUT 1 function HelloWorld ( { 2 greeting = " hello " , 3 greeted = ' "World" ' , 4 silent = false , 5 onMouseOver , 6 } ) { 7 if ( ! greeting ) { 8 return null ; 9 } 10 11 // TODO: Don't use random in render 12 let num = Math . floor ( Math . random () * 1E+7 ) 13 . toString () 14 . replace ( / . d + / gi , "" ); 15 16 return ( 17 < div 18 className = " HelloWorld " 19 title = { ` You are visitor number ${ num } ` } 20 onMouseOver = { onMouseOver } 21 > 22 < strong > 23 { greeting . slice ( 0 , 1 ) . toUpperCase () + greeting . slice ( 1 ) . toLowerCase () } 24 </ strong > 25 { greeting . endsWith ( " , " ) ? ( 26 " " 27 ) : ( 28 < span style = { { color: " grey " } } > ", " </ span > 29 ) } 30 < em > { greeted } </ em > 31 { silent ? " . " : " ! " } 32 </ div > 33 ); 34 } {greeting.slice(0, 1).toUpperCase() + greeting.slice(1).toLowerCase()} {greeting.endsWith(",") ? ( " " ) : ( ", " )} {greeted} {silent ? "." : "!"} );}"> PERFORMANCE Biome 0.00 s Prettier 0.00 s ~35x Faster than Prettier when formatting 171,127 lines of code in 2,104 files with an Intel Core i7 1270P. Try the Biome formatter on the playground or directly on your project: Terminal window 1 npm i -D --save-exact @biomejs/biome 2 npx @biomejs/biome format --write ./src Fix problems, learn best practice Biome is a performant linter for JavaScript , TypeScript , JSX , CSS and GraphQL that features 511 rules from ESLint, TypeScript ESLint, and other sources . Biome outputs detailed and contextualized diagnostics that help you to improve your code and become a better programmer! complexity/useFlatMap.js:2:1 lint/complexity/useFlatMap FIXABLE ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ✖ The call chain .map().flat() can be replaced with a single .flatMap() call. 1 │ const array = ["split", "the text", "into words"]; > 2 │ array.map(sentence => sentence.split(' ')).flat(); │ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ ^ 3 │ ℹ Safe fix : Replace the chain with .flatMap() . 1 1 │ const array = ["split", "the text", "into words"]; 2 │ - a r r a y . m a p ( s e n t e n c e · = > · s e n t e n c e . s p l i t ( ' · ' ) ) . f l a t ( ) ; 2 │ + a r r a y . f l a t M a p ( s e n t e n c e · = > · s e n t e n c e . s p l i t ( ' · ' ) ) ; 3 3 │ Try the Biome linter on the playground or directly on your project: Terminal window 1 npm i -D --save-exact @biomejs/biome 2 npx @biomejs/biome lint --write ./src Everything all at once Not only can you format and lint your code separately, you can do it all at once with a single command ! Every tool integrates seamlessly with others to create a cohesive toolchain for web projects. Run all tools with the check command: Terminal window 1 npm i -D --save-exact @biomejs/biome 2 npx @biomejs/biome check --write ./src Fast Built with Rust and an innovative architecture inspired by rust-analyzer. Simple Zero configuration needed to get started. Extensive options available for when you need them. Scalable Designed to handle codebases of any size. Focus on growing product instead of your tools. Actionable & Informative Avoid obscure error messages, when we tell you something is wrong, we tell you exactly where the problem is and how to fix it. Batteries Included Out of the box support for all the language features you use today. First class support for TypeScript and JSX. Enterprise Support We offer commercial support to organizations that need it through our community of contributors. Try Biome Install Biome using your preferred package manager AND integrate it in your editor. Install with package manager Integrate Biome in your editor Trusted by leading organizations Join thousands of developers and companies using Biome in production Astro AWS Canonical Cloudflare Coinbase Comcast Discord Google Microsoft n8n Node.js Slack Socket Uniswap Vercel View all users Community Powered by our open-source contributors Discord GitHub BlueSky Mastodon Sponsors Sponsored by Copyright (c) 2023-present Biome Developers and Contributors.