Chiunque abbia messo mano a del codice in maniera collaborativa con un collega o un amico sa quanto siano importanti le regole di linting e di formattazione per poter lavorare al meglio ed è proprio per questo motivo che vi voglio parlare di BiomeJS, un tool unico per gestire linting e formattazione
Benvenuti a OpenDev Explorer, la mia rubrica dedicata all’esplorazione del mondo Open Source che strizza un occhio alla developer experience. Io sono Riccardo (aka TheZal) e oggi vi parlerò di BiomeJS un tool che è andato a sostituire ESLint e Prettier nei progetti in Javscript!
Panoramica Generale
BiomeJS è un progetto open-source che si distingue per la sua versatilità e capacità di semplificare la configurazione e la gestione di più strumenti all’interno di un unico ambiente. La filosofia alla base di BiomeJS è ridurre la complessità per gli sviluppatori, rendendo il processo di sviluppo front-end più efficiente e produttivo. Con il supporto per TypeScript e JSX nativo, non richiede configurazioni particolari, rendendo l’onboarding di nuovi progetti immediato.
Manuale di istruzioni
Installazione
L’installazione di BiomeJS è semplice e immediata. Utilizzando npm o yarn, pnpm e bun puoi includere Biome nel tuo progetto:
usando npm
npm install @biomejs/cli --save-devCode language: CSS (css)usando yarn
yarn add @biomejs/cli --devCode language: CSS (css)usando pnpm
pnpm add --save-dev --save-exact @biomejs/biomeCode language: CSS (css)usando bun
bun add --dev --exact @biomejs/biomeCode language: CSS (css)BiomeJS supporta sia progetti basati su Node.js che ambienti web, rendendolo una soluzione versatile per molte tipologie di progetti.
Utilizzo
Per poter utilizzare Biome prima bisogna effettuare la sua configurazione tramite il comando per inizializzarlo. Questo comando andrà a creare un file biome.json o biome.jsonc con all’interno le regole che dovrà seguire il nostro nuovo tool preferito di linting.
Gli esempi che riporterò saranno con l’utilizzo di npm come package manager, ma nella documentazione sono presenti i comandi per il vostro package manager preferito
Per inizializzare il tool basta eseguire il seguente comando:
npx @biomejs/biome initCode language: CSS (css)Che andrà a creare un file json di questo tipo:
{
"$schema": "https://biomejs.dev/schemas/1.9.1/schema.json",
"vcs": {
"enabled": false,
"clientKind": "git",
"useIgnoreFile": false
},
"files": { "ignoreUnknown": false, "ignore": [] },
"formatter": { "enabled": true, "indentStyle": "tab" },
"organizeImports": { "enabled": true },
"linter": {
"enabled": true,
"rules": { "recommended": true }
},
"javascript": { "formatter": { "quoteStyle": "double" } }
}Code language: JSON / JSON with Comments (json)Una volta creato il file di configurazione basterà utilizzare il comando format per formattare, il comando lint per effettuare l’operazione di linting oppure il comando check per effettuare entrambe le operazioni
npx @biomejs/biome format --write
npx @biomejs/biome lint --write
npx @biomejs/biome check --write <files>Code language: HTML, XML (xml)La developer experience
La grande forza di BiomeJS risiede nella sua semplicità d’uso e nella possibilità di sostituire più strumenti con una singola soluzione. Grazie a un’interfaccia CLI chiara e ben documentata, gli sviluppatori possono beneficiare di tempi di setup ridotti e di un’esperienza di sviluppo senza intoppi. L’approccio “zero-config” è particolarmente apprezzato, soprattutto per team che vogliono concentrarsi più sullo sviluppo del prodotto e meno sulla configurazione di tool esterni.
BiomeJS si distingue anche per la sua elevata performance. A differenza di altre soluzioni che possono rallentare il processo di sviluppo, Biome è stato progettato per essere leggero e veloce, garantendo tempi di risposta immediati anche su progetti di grandi dimensioni.
L’extra mile
Per quanto l’extra mile di Biome potrebbe essere il fatto che è perfettamente compatibile come sostituto di prettier (infatti il progetto Biome ha vinto un concorso indetto proprio da prettier stesso che sfidava a creare un tool che potesse sostituirlo) il vero extra mile secondo me è dato dal fatto che è possibile integrarlo nella ci in maniera semplice.
Nella loro documentazione offrono diversi spunti, tra cui un esempio di configurazione di una github action già pronta e funzionante out of the box
name: Code quality
on:
push:
pull_request:
jobs:
quality:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v4
- name: Setup Biome
uses: biomejs/setup-biome@v2
with:
version: latest
- name: Run Biome
run: biome ci .Code language: HTTP (http)BiomeJs vs. ESLint, Prettier o Babel
Rispetto a tool consolidati come ESLint, Prettier o Babel, BiomeJS si pone come una scelta all-in-one diventando quindi “l’unico tool per domarli tutti”. Questa caratteristica lo rende particolarmente interessante per chi cerca di ridurre la complessità e i tempi di configurazione. Mentre altri strumenti richiedono spesso plugin o configurazioni personalizzate, BiomeJS integra tutto ciò di cui un progetto moderno ha bisogno in un solo pacchetto.
Inoltre, come menzionato prima, Biome è il sostituto perfetto di Prettier, come attestato da Prettier stessa.
BiomeJS: tiriamo le somme!
BiomeJS rappresenta un passo avanti per gli sviluppatori JavaScript che cercano una soluzione all-in-one estremamente veloce per migliorare la qualità del codice e semplificare la gestione dei tool di sviluppo. Grazie al suo approccio modulare e alla sua semplicità d’uso, BiomeJS è un’opzione da considerare seriamente per chi desidera ottimizzare il proprio workflow senza compromettere le funzionalità o la qualità del codice prodotto.
E voi darete una chance a Biome?
