Prettier in un progetto Node.js con TypeScript e JavaScript: guida completa con esempi di configurazione

Contenuto generato dall’AI.

Quando si lavora su un progetto Node.js, sia esso scritto in JavaScript puro o in TypeScript, uno degli aspetti più importanti per mantenere il codice ordinato, leggibile e coerente nel tempo è la formattazione.

Ad - Web Hosting SiteGround - Creato per semplificare la gestione del sito. Clicca per scoprire di più.

In un team, ogni sviluppatore può avere abitudini diverse: qualcuno preferisce usare le virgolette singole, qualcun altro le doppie; c’è chi mette sempre il punto e virgola e chi lo evita; chi spezza le righe dopo 80 caratteri e chi preferisce righe più lunghe.

Queste differenze possono sembrare dettagli, ma nel tempo generano codice disomogeneo, pull request piene di modifiche inutili e discussioni poco produttive sullo stile. È qui che entra in gioco Prettier.

Prettier è uno strumento di formattazione automatica del codice. Il suo obiettivo è semplice: prendere il codice sorgente e riscriverlo secondo regole coerenti, eliminando quasi del tutto le discussioni sullo stile.

In questo articolo vedremo come utilizzare Prettier in un progetto Node.js, sia con TypeScript sia con JavaScript, con esempi pratici di configurazione, integrazione con npm scripts, ESLint, editor e workflow di sviluppo.

Che cos’è Prettier

Prettier è un code formatter opinabile, cioè uno strumento che applica automaticamente uno stile predefinito al codice.

Supporta diversi linguaggi e formati, tra cui:

JavaScript
TypeScript
JSON
Markdown
HTML
CSS
YAML
GraphQL
JSX
TSX

Nel contesto di un progetto Node.js, Prettier viene spesso usato per formattare file come:

.js
.ts
.jsx
.tsx
.json
.md
.yml
.yaml

A differenza di strumenti come ESLint, che si occupano soprattutto di qualità del codice, errori potenziali e regole sintattiche, Prettier si concentra principalmente sulla formattazione.

Perché usare Prettier in un progetto Node.js

In un progetto Node.js, soprattutto quando cresce nel tempo, Prettier offre diversi vantaggi.

1. Codice coerente

Tutti i file seguono lo stesso stile, indipendentemente da chi li scrive.

Questo è particolarmente utile nei team, ma anche nei progetti personali. Tornare su un progetto dopo mesi e trovare codice formattato in modo coerente rende la manutenzione molto più semplice.

2. Pull request più pulite

Senza Prettier, una pull request può contenere centinaia di modifiche dovute solo a spazi, indentazione o ritorni a capo.

Con Prettier, la formattazione viene standardizzata automaticamente, riducendo il rumore nelle revisioni del codice.

3. Meno discussioni sullo stile

Prettier riduce le discussioni del tipo:

“Meglio usare il punto e virgola?”
“Virgolette singole o doppie?”
“Quanti spazi per indentare?”
“Quanto deve essere lunga una riga?”

Il team decide una configurazione iniziale, oppure usa quella predefinita, e poi lascia che Prettier faccia il resto.

4. Migliore integrazione con editor e CI/CD

Prettier può essere eseguito:

manualmente da terminale
automaticamente al salvataggio del file
prima di un commit
durante una pipeline CI/CD

Questo lo rende molto flessibile.

Installare Prettier in un progetto Node.js

Supponiamo di avere un progetto Node.js già inizializzato.

Se non hai ancora un progetto, puoi crearne uno con:

mkdir my-node-project
cd my-node-project
npm init -y

A questo punto puoi installare Prettier come dipendenza di sviluppo:

npm install --save-dev prettier

Oppure, usando Yarn:

yarn add --dev prettier

Oppure, usando pnpm:

pnpm add -D prettier

Prettier viene installato come dev dependency perché non serve in produzione: viene usato durante lo sviluppo, non durante l’esecuzione dell’applicazione.

Primo utilizzo di Prettier

Immaginiamo di avere un file JavaScript poco formattato:

const user={name:"Paolo",age:35,skills:["node","typescript","javascript"]}

function printUser(user){console.log("User:",user.name,user.age)}
printUser(user)

Possiamo eseguire Prettier da terminale:

npx prettier src/index.js

Questo comando stampa il codice formattato nel terminale, ma non modifica il file.

Per modificare direttamente il file, usiamo:

npx prettier src/index.js --write

Il risultato sarà simile a questo:

const user = {
    name: "Paolo",
    age: 35,
    skills: ["node", "typescript", "javascript"],
};

function printUser(user) {
    console.log("User:", user.name, user.age);
}

printUser(user);

Configurare Prettier con `.prettierrc`

Anche se Prettier funziona bene con la configurazione predefinita, nella maggior parte dei progetti è utile aggiungere un file di configurazione.

Puoi creare un file chiamato:

.prettierrc

E inserire una configurazione JSON, per esempio:

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "printWidth": 100,
    "trailingComma": "all",
    "arrowParens": "always"
}

Vediamo il significato delle opzioni principali.

Opzioni principali di Prettier

`semi`

Determina se Prettier deve aggiungere il punto e virgola alla fine delle istruzioni.

{
    "semi": true
}

Con semi: true:

const name = 'Paolo';
console.log(name);

Con semi: false:

const name = 'Paolo'
console.log(name)

Entrambi gli stili sono validi. La scelta dipende dalle preferenze del team.

`singleQuote`

Determina se usare virgolette singole invece delle doppie.

{
    "singleQuote": true
}

Con questa opzione, Prettier formatterà così:

const message = 'Hello world';

Invece di:

const message = "Hello world";

`tabWidth`

Definisce il numero di spazi per livello di indentazione.

{
    "tabWidth": 4
}

Con tabWidth: 4:

function sayHello() {
    console.log('Hello');
}

Con tabWidth: 2:

function sayHello() {
  console.log('Hello');
}

Nel mondo JavaScript e TypeScript è molto comune usare 2, ma molti team preferiscono 4 per leggibilità.

`printWidth`

Indica la lunghezza massima consigliata di una riga.

{
    "printWidth": 100
}

Prettier non la interpreta come una regola rigida assoluta, ma come una linea guida per decidere quando spezzare il codice su più righe.

Esempio:

const result = await userService.findUserByEmailAndIncludePermissionsAndPreferences(
    email,
    options,
);

`trailingComma`

Gestisce le virgole finali negli oggetti, array, parametri e altre strutture multilinea.

{
    "trailingComma": "all"
}

Esempio:

const user = {
    name: 'Paolo',
    role: 'admin',
    active: true,
};

Le trailing comma sono utili perché rendono i diff più puliti quando si aggiunge una nuova proprietà.

`arrowParens`

Determina se usare sempre le parentesi nelle arrow function.

{
    "arrowParens": "always"
}

Con always:

const double = (value) => value * 2;

Con avoid:

const double = value => value * 2;

Esempio di configurazione consigliata

Una configurazione equilibrata per molti progetti Node.js può essere questa:

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "printWidth": 100,
    "trailingComma": "all",
    "arrowParens": "always",
    "bracketSpacing": true,
    "endOfLine": "lf"
}

Questa configurazione:

usa il punto e virgola
preferisce virgolette singole
usa 4 spazi per indentazione
spezza le righe intorno ai 100 caratteri
mantiene virgole finali nelle strutture multilinea
usa sempre parentesi nelle arrow function
normalizza i fine riga in stile Unix/Linux

Usare un file `.prettierignore`

Non tutti i file devono essere formattati da Prettier.

Per escludere file e cartelle puoi creare un file:

.prettierignore

Esempio:

node_modules
dist
build
coverage
.env
package-lock.json
pnpm-lock.yaml
yarn.lock

In genere è consigliabile ignorare:

node_modules
cartelle di build
file generati automaticamente
file di coverage
lock file, se preferisci non modificarli automaticamente

Un esempio più completo:

node_modules
dist
build
coverage
.cache
.next
.nuxt
.env
.env.*
*.log
package-lock.json
yarn.lock
pnpm-lock.yaml

Aggiungere script npm per Prettier

Per semplificare l’utilizzo di Prettier, conviene aggiungere alcuni script nel file package.json.

Esempio:

{
    "scripts": {
        "format": "prettier . --write",
        "format:check": "prettier . --check"
    }
}

A questo punto puoi eseguire:

npm run format

per formattare tutto il progetto.

Oppure:

npm run format:check

per controllare se ci sono file non formattati, senza modificarli.

Lo script format:check è particolarmente utile nelle pipeline CI/CD, perché permette di bloccare una build se il codice non è formattato correttamente.

Usare Prettier in un progetto JavaScript Node.js

Vediamo un esempio pratico con JavaScript puro.

Struttura del progetto:

my-node-app/
├── src/
│   ├── index.js
│   └── services/
│       └── user.service.js
├── package.json
├── .prettierrc
└── .prettierignore

File src/index.js prima della formattazione:

const {getUserById}=require("./services/user.service")

async function main(){
const user=await getUserById(1)
console.log("User found:",user)
}

main()

File src/services/user.service.js:

async function getUserById(id){return {id:id,name:"Paolo",email:"paolo@example.com",active:true}}

module.exports={getUserById}

Con questa configurazione .prettierrc:

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "printWidth": 100,
    "trailingComma": "all"
}

Dopo aver eseguito:

npm run format

il file src/index.js diventa:

const { getUserById } = require('./services/user.service');

async function main() {
    const user = await getUserById(1);
    console.log('User found:', user);
}

main();

E src/services/user.service.js diventa:

async function getUserById(id) {
    return {
        id: id,
        name: 'Paolo',
        email: 'paolo@example.com',
        active: true,
    };
}

module.exports = { getUserById };

Prettier non cambia la logica del codice, ma rende la struttura molto più leggibile.

Usare Prettier in un progetto Node.js con TypeScript

In un progetto TypeScript, Prettier è ancora più utile perché il codice tende ad avere più annotazioni, interfacce, tipi generici e strutture complesse.

Per prima cosa installiamo TypeScript e Prettier:

npm install --save-dev typescript prettier

Inizializziamo TypeScript:

npx tsc --init

Una possibile struttura del progetto:

my-typescript-app/
├── src/
│   ├── index.ts
│   ├── types/
│   │   └── user.ts
│   └── services/
│       └── user.service.ts
├── package.json
├── tsconfig.json
├── .prettierrc
└── .prettierignore

File src/types/user.ts prima della formattazione:

export interface User{id:number;name:string;email:string;active:boolean;roles:string[]}

File src/services/user.service.ts:

Typescript

import {User} from "../types/user"

export async function getUserById(id:number):Promise<User>{return {id,name:"Paolo",email:"paolo@example.com",active:true,roles:["admin","editor"]}}

File src/index.ts:

import {getUserById} from "./services/user.service"

async function main():Promise<void>{
const user=await getUserById(1)
console.log("User:",user)
}

main()

Dopo Prettier, otteniamo:

export interface User {
    id: number;
    name: string;
    email: string;
    active: boolean;
    roles: string[];
}

import { User } from '../types/user';

export async function getUserById(id: number): Promise<User> {
    return {
        id,
        name: 'Paolo',
        email: 'paolo@example.com',
        active: true,
        roles: ['admin', 'editor'],
    };
}

import { getUserById } from './services/user.service';

async function main(): Promise<void> {
    const user = await getUserById(1);
    console.log('User:', user);
}

main();

Il codice è identico dal punto di vista funzionale, ma molto più chiaro.

Configurazione Prettier per TypeScript

La configurazione non cambia molto rispetto a JavaScript.

Esempio:

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "printWidth": 100,
    "trailingComma": "all",
    "arrowParens": "always",
    "bracketSpacing": true,
    "endOfLine": "lf"
}

Prettier riconosce automaticamente i file .ts e .tsx, quindi non è necessario installare plugin aggiuntivi per TypeScript nella maggior parte dei casi.

Prettier con file JSON

Prettier può formattare anche i file JSON, come package.json o file di configurazione.

Esempio prima:

{"name":"my-app","version":"1.0.0","scripts":{"start":"node src/index.js","format":"prettier . --write"}}

Dopo Prettier:

{
    "name": "my-app",
    "version": "1.0.0",
    "scripts": {
        "start": "node src/index.js",
        "format": "prettier . --write"
    }
}

Questo rende più leggibili anche i file di configurazione.

Prettier con Markdown

Un altro vantaggio spesso sottovalutato è la formattazione dei file Markdown.

Per esempio, Prettier può sistemare file come:

README.md
CHANGELOG.md
CONTRIBUTING.md

Esempio prima:

# My Project
Questo progetto usa Node.js, TypeScript e Prettier.

-Installazione
-Configurazione
-Avvio

Dopo Prettier:

# My Project

Questo progetto usa Node.js, TypeScript e Prettier.

- Installazione
- Configurazione
- Avvio

In un progetto ben documentato, avere anche la documentazione formattata in modo coerente è un grande vantaggio.

Integrare Prettier con ESLint

In molti progetti Node.js moderni, Prettier viene usato insieme a ESLint.

La distinzione è importante:

Prettier formatta il codice
ESLint analizza il codice e segnala problemi, errori o pattern non desiderati

Per esempio, ESLint può dirti che hai dichiarato una variabile non usata. Prettier, invece, non si occupa di questo tipo di controllo.

Installazione base ESLint con TypeScript

In un progetto TypeScript puoi installare:

npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Poi puoi creare un file eslint.config.js, usando la configurazione moderna di ESLint.

Esempio semplificato:

import js from '@eslint/js';
import tseslint from 'typescript-eslint';

export default [
    js.configs recommended,
    ...tseslint.configs.recommended,
];

Tuttavia, a seconda della versione di ESLint e della configurazione scelta, la sintassi può cambiare.

Per evitare conflitti tra ESLint e Prettier, è comune installare:

npm install --save-dev eslint-config-prettier

Questo pacchetto disattiva le regole ESLint che potrebbero entrare in conflitto con Prettier.

Una configurazione moderna potrebbe essere simile a questa:

import js from '@eslint/js';
import tseslint from 'typescript-eslint';
import prettier from 'eslint-config-prettier';

export default [
    js.configs.recommended,
    ...tseslint.configs.recommended,
    prettier,
];

In questo modo ESLint si occupa della qualità del codice, mentre Prettier si occupa della formattazione.

Script npm per ESLint e Prettier

Un package.json tipico potrebbe contenere:

{
    "scripts": {
        "dev": "tsx watch src/index.ts",
        "build": "tsc",
        "start": "node dist/index.js",
        "lint": "eslint .",
        "format": "prettier . --write",
        "format:check": "prettier . --check"
    },
    "devDependencies": {
        "@typescript-eslint/eslint-plugin": "^8.0.0",
        "@typescript-eslint/parser": "^8.0.0",
        "eslint": "^9.0.0",
        "eslint-config-prettier": "^9.0.0",
        "prettier": "^3.0.0",
        "typescript": "^5.0.0"
    }
}

Con questi script puoi eseguire:

npm run lint
npm run format
npm run format:check

In una pipeline CI, potresti usare:

npm run lint
npm run format:check
npm run build

Così controlli:

qualità del codice
formattazione
compilazione TypeScript

Formattazione automatica al salvataggio

Uno dei modi migliori per usare Prettier è configurarlo nell’editor, ad esempio Visual Studio Code.

In VS Code puoi installare l’estensione:

Prettier - Code formatter

Poi puoi configurare il file settings.json dell’editor:

{
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
}

In questo modo ogni volta che salvi un file, Prettier lo formatta automaticamente.

Per progetti JavaScript e TypeScript, puoi anche specificare il formatter solo per alcuni linguaggi:

{
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[typescript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "[json]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.formatOnSave": true
}

Questa configurazione aiuta a mantenere il codice ordinato senza dover ricordare ogni volta di eseguire il comando da terminale.

Usare Prettier prima dei commit con Husky e lint-staged

In un team, affidarsi solo alla formattazione manuale o al salvataggio dell’editor può non essere sufficiente. Alcuni sviluppatori potrebbero non avere l’editor configurato correttamente, oppure potrebbero dimenticare di eseguire npm run format.

Una soluzione molto usata è eseguire Prettier automaticamente prima di ogni commit.

Per farlo si possono usare:

Husky
lint-staged

Installazione:

npm install --save-dev husky lint-staged

Poi puoi inizializzare Husky:

npx husky init

Nel package.json puoi aggiungere:

Json

{
    "lint-staged": {
        "*.{js,ts,jsx,tsx,json,md,yml,yaml}": "prettier --write"
    }
}

Poi nel file di hook pre-commit puoi eseguire:

npx lint-staged

In questo modo, prima di ogni commit, Prettier formatterà solo i file modificati.

Questo approccio è molto efficiente perché evita di formattare l’intero progetto a ogni commit.

Esempio completo per progetto JavaScript

Ecco una configurazione completa per un progetto Node.js in JavaScript.

`package.json`

{
    "name": "node-js-prettier-example",
    "version": "1.0.0",
    "private": true,
    "scripts": {
        "start": "node src/index.js",
        "format": "prettier . --write",
        "format:check": "prettier . --check"
    },
    "devDependencies": {
        "prettier": "^3.0.0"
    }
}

`.prettierrc`

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "printWidth": 100,
    "trailingComma": "all",
    "arrowParens": "always",
    "endOfLine": "lf"
}

`.prettierignore`

node_modules
dist
build
coverage
.env
*.log
package-lock.json

`src/index.js`

const users = [
    {
        id: 1,
        name: 'Paolo',
        role: 'admin',
    },
    {
        id: 2,
        name: 'Laura',
        role: 'editor',
    },
];

function findUserByRole(users, role) {
    return users.filter((user) => user.role === role);
}

console.log(findUserByRole(users, 'admin'));

Esempio completo per progetto TypeScript

Ora vediamo una configurazione completa per TypeScript.

`package.json`

{
    "name": "node-typescript-prettier-example",
    "version": "1.0.0",
    "private": true,
    "scripts": {
        "dev": "tsx watch src/index.ts",
        "build": "tsc",
        "start": "node dist/index.js",
        "format": "prettier . --write",
        "format:check": "prettier . --check"
    },
    "devDependencies": {
        "prettier": "^3.0.0",
        "tsx": "^4.0.0",
        "typescript": "^5.0.0"
    }
}

`.prettierrc`

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "printWidth": 100,
    "trailingComma": "all",
    "arrowParens": "always",
    "endOfLine": "lf"
}

`.prettierignore`

node_modules
dist
build
coverage
.env
*.log
package-lock.json

`tsconfig.json`

{
    "compilerOptions": {
        "target": "ES2022",
        "module": "NodeNext",
        "moduleResolution": "NodeNext",
        "outDir": "dist",
        "rootDir": "src",
        "strict": true,
        "esModuleInterop": true,
        "skipLibCheck": true
    },
    "include": ["src"]
}

`src/types/user.ts`

export interface User {
    id: number;
    name: string;
    email: string;
    role: 'admin' | 'editor' | 'user';
    active: boolean;
}

`src/services/user.service.ts`

import { User } from '../types/user';

const users: User[] = [
    {
        id: 1,
        name: 'Paolo',
        email: 'paolo@example.com',
        role: 'admin',
        active: true,
    },
    {
        id: 2,
        name: 'Laura',
        email: 'laura@example.com',
        role: 'editor',
        active: true,
    },
];

export async function getActiveUsers(): Promise<User[]> {
    return users.filter((user) => user.active);
}

`src/index.ts`

import { getActiveUsers } from './services/user.service';

async function main(): Promise<void> {
    const users = await getActiveUsers();

    for (const user of users) {
        console.log(`${user.name} - ${user.role}`);
    }
}

main();

Prettier in progetti misti JavaScript e TypeScript

Non è raro avere progetti che contengono sia JavaScript sia TypeScript.

Per esempio:

project/
├── scripts/
│   └── seed.js
├── src/
│   ├── index.ts
│   └── config.ts
├── package.json
├── tsconfig.json
└── .prettierrc

Prettier può formattare entrambi senza problemi.

Uno script come questo:

{
    "scripts": {
        "format": "prettier \"**/*.{js,ts,json,md}\" --write"
    }
}

formatta solo i file con estensioni specifiche.

In alternativa:

{
    "scripts": {
        "format": "prettier . --write"
    }
}

formatta tutti i file supportati da Prettier nel progetto, rispettando .prettierignore.

Prettier e CI/CD

In un ambiente professionale, è utile verificare la formattazione anche nella pipeline.

Per esempio, in GitHub Actions:

name: Code quality

on:
    pull_request:
    push:
        branches:
            - main

jobs:
    quality:
        runs-on: ubuntu-latest

        steps:
            - name: Checkout repository
              uses: actions/checkout@v4

            - name: Setup Node.js
              uses: actions/setup-node@v4
              with:
                  node-version: 20

            - name: Install dependencies
              run: npm ci

            - name: Check formatting
              run: npm run format:check

            - name: Run lint
              run: npm run lint

            - name: Build
              run: npm run build

In questo modo, se qualcuno invia codice non formattato, la pipeline fallisce e segnala il problema.

Questo non sostituisce il format automatico locale, ma aggiunge un controllo di sicurezza importante.

Prettier non sostituisce ESLint

È importante ribadirlo: Prettier non è un linter.

Prettier non serve principalmente a trovare bug, codice morto, variabili inutilizzate o problemi di sicurezza.

Per esempio, questo codice può essere formattato perfettamente da Prettier:

const userName = 'Paolo';
const unusedValue = 123;

console.log(userName);

Prettier non segnalerà necessariamente che unusedValue non viene usata.

ESLint invece può farlo.

Per questo motivo, in un progetto Node.js ben configurato, spesso si usano entrambi:

Prettier → formattazione
ESLint   → qualità e regole del codice
TypeScript → controllo statico dei tipi

Prettier e TypeScript: cosa non fa

Anche in TypeScript, Prettier non controlla i tipi.

Se scriviamo:

const age: number = '35';

Prettier può formattare il codice, ma non correggerà l’errore di tipo.

Il controllo viene fatto da TypeScript:

npx tsc --noEmit

Oppure, se hai uno script:

{
    "scripts": {
        "typecheck": "tsc --noEmit"
    }
}

puoi eseguire:

npm run typecheck

Una buona pipeline per TypeScript può quindi includere:

npm run format:check
npm run lint
npm run typecheck
npm run build

Prettier nei monorepo

Prettier funziona bene anche nei monorepo.

Per esempio:

repo/
├── apps/
│   ├── api/
│   └── web/
├── packages/
│   ├── config/
│   └── utils/
├── package.json
├── .prettierrc
└── .prettierignore

Puoi avere una configurazione Prettier unica alla radice:

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "printWidth": 100,
    "trailingComma": "all"
}

E uno script:

{
    "scripts": {
        "format": "prettier . --write",
        "format:check": "prettier . --check"
    }
}

Questo permette di avere uno stile uniforme tra applicazioni e pacchetti condivisi.

Errori comuni nell’utilizzo di Prettier

1. Non aggiungere `.prettierignore`

Senza .prettierignore, Prettier potrebbe provare a formattare file non necessari, rallentando il comando o modificando file generati.

2. Usare Prettier ed ESLint con regole in conflitto

Se ESLint impone uno stile diverso da Prettier, si crea un ciclo fastidioso:

Prettier formatta in un modo
ESLint segnala errore
Si corregge ESLint
Prettier cambia di nuovo il codice

Per questo è utile eslint-config-prettier.

3. Non configurare l’editor

Se Prettier viene eseguito solo manualmente, prima o poi qualcuno dimenticherà di usarlo.

La formattazione al salvataggio riduce molto questo problema.

4. Formattare file generati

Cartelle come dist, build o coverage non dovrebbero essere formattate. Sono output generati, non codice sorgente.

5. Pensare che Prettier migliori la logica del codice

Prettier migliora la forma, non il contenuto logico. Un codice sbagliato rimane sbagliato, semplicemente più leggibile.

Configurazione consigliata per un team

Per un team che lavora su Node.js, JavaScript e TypeScript, una buona configurazione minima può essere:

`.prettierrc`

{
    "semi": true,
    "singleQuote": true,
    "tabWidth": 4,
    "printWidth": 100,
    "trailingComma": "all",
    "arrowParens": "always",
    "endOfLine": "lf"
}

`.prettierignore`

node_modules
dist
build
coverage
.cache
.env
.env.*
*.log
package-lock.json
yarn.lock
pnpm-lock.yaml

`package.json`

{
    "scripts": {
        "format": "prettier . --write",
        "format:check": "prettier . --check"
    }
}

Questa configurazione è semplice, leggibile e adatta alla maggior parte dei progetti.

Conclusione

Prettier è uno degli strumenti più utili da introdurre in un progetto Node.js, sia JavaScript sia TypeScript.

La sua forza sta nella semplicità: installi il pacchetto, definisci poche regole, aggiungi uno script npm e lasci che sia lui a occuparsi della formattazione.

In un progetto piccolo, Prettier aiuta a mantenere il codice ordinato. In un progetto grande, diventa quasi indispensabile per garantire coerenza, ridurre conflitti e rendere le revisioni più pulite.

La configurazione ideale dipende dalle preferenze del team, ma l’obiettivo rimane sempre lo stesso: togliere la formattazione dalle discussioni quotidiane e concentrarsi su ciò che conta davvero, cioè la qualità del codice e il valore dell’applicazione.

Una buona combinazione per un progetto Node.js moderno è:

Prettier per la formattazione
ESLint per la qualità del codice
TypeScript per la sicurezza dei tipi
Husky e lint-staged per automatizzare i controlli prima dei commit
CI/CD per garantire coerenza anche nelle pull request

Con pochi file di configurazione e qualche script ben scelto, Prettier può diventare una parte naturale del workflow di sviluppo, migliorando la produttività individuale e la collaborazione all’interno del team.

Commenti

Prettier in un progetto Node.js con TypeScript e JavaScript: guida completa con esempi di configurazione

Che cos’è Prettier

Perché usare Prettier in un progetto Node.js

1. Codice coerente

2. Pull request più pulite

3. Meno discussioni sullo stile

4. Migliore integrazione con editor e CI/CD

Installare Prettier in un progetto Node.js

Primo utilizzo di Prettier

Configurare Prettier con .prettierrc

Opzioni principali di Prettier

semi

singleQuote

tabWidth

printWidth

trailingComma

arrowParens

Esempio di configurazione consigliata

Usare un file .prettierignore

Aggiungere script npm per Prettier

Usare Prettier in un progetto JavaScript Node.js

Usare Prettier in un progetto Node.js con TypeScript

Typescript

Configurazione Prettier per TypeScript

Prettier con file JSON

Prettier con Markdown

Integrare Prettier con ESLint

Installazione base ESLint con TypeScript

Script npm per ESLint e Prettier

Formattazione automatica al salvataggio

Usare Prettier prima dei commit con Husky e lint-staged

Json

Esempio completo per progetto JavaScript

package.json

.prettierrc

.prettierignore

src/index.js

Esempio completo per progetto TypeScript

package.json

.prettierrc

.prettierignore

tsconfig.json

src/types/user.ts

src/services/user.service.ts

src/index.ts

Prettier in progetti misti JavaScript e TypeScript

Prettier e CI/CD

Prettier non sostituisce ESLint

Prettier e TypeScript: cosa non fa

Prettier nei monorepo

Errori comuni nell’utilizzo di Prettier

1. Non aggiungere .prettierignore

2. Usare Prettier ed ESLint con regole in conflitto

3. Non configurare l’editor

4. Formattare file generati

5. Pensare che Prettier migliori la logica del codice

Configurazione consigliata per un team

.prettierrc

.prettierignore

package.json

Conclusione

Condividi:

Correlati

About The Author

Related Posts

Fammi sapere cosa ne pensi :)Annulla risposta

Seguimi su Facebook :)

Articoli recenti

Categorie

Configurare Prettier con `.prettierrc`

`semi`

`singleQuote`

`tabWidth`

`printWidth`

`trailingComma`

`arrowParens`

Usare un file `.prettierignore`

`package.json`

`.prettierrc`

`.prettierignore`

`src/index.js`

`package.json`

`.prettierrc`

`.prettierignore`

`tsconfig.json`

`src/types/user.ts`

`src/services/user.service.ts`

`src/index.ts`

1. Non aggiungere `.prettierignore`

`.prettierrc`

`.prettierignore`

`package.json`