0Pricing
JavaScript Academy · Lezione

Linting con ESLint e formattazione con Prettier

Individui i problemi comuni con ESLint e formatti automaticamente con Prettier. Mantieni configurazioni minime ed esegui tutto tramite gli script npm.

Linting con ESLint e formattazione con Prettier è una lezione JavaScript Academy gratuita su CoddyKit. Questa è la lezione 2 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento JavaScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso JavaScript Academy include 3 lezioni in totale.

Perché lint e formattazione?

Obiettivo: mantenga il codice pulito e coerente.

  • ESLint → rileva i problemi
  • Prettier → formatta il codice
  • Configurazioni minime; esegua tutto tramite gli npm scripts
  • Impostazioni predefinite adatte a chi è alle prime armi
Linting con ESLint e formattazione con Prettier — illustrazione 1

ESLint: rilevare i problemi

ESLint applica regole per rilevare gli errori e migliorare lo stile; qui simuleremo alcuni semplici controlli.

// Tiny "lint" demo: simple checks on a string of code
const sample = "const x=1; console.log(x)";

function lint(code) {
  const issues = [];
  if (code.includes("console.log")) {
    issues.push("no-console: avoid console.log in production code");
  }
  if (code.includes("=1;")) {
    issues.push("spacing: add spaces around = for readability");
  }
  if (!code.trim().endsWith(";")) {
    issues.push("semi: missing semicolon");
  }
  return issues;
}

console.log("lint issues:", lint(sample));
Linting con ESLint e formattazione con Prettier — illustrazione 2

Prettier: layout coerente

Prettier si concentra sulla formattazione automatica, così tutti condividono lo stesso layout senza discussioni.

// Tiny "format" demo: normalize spaces and add semicolon
function format(code) {
  // Very naive formatting just for demo
  const spaced = code.replaceAll("=1;", " = 1;");
  const withSemi = spaced.trim().endsWith(";") ? spaced.trim() : spaced.trim() + ";";
  return withSemi;
}

const ugly = "const x=1\nconsole.log( x )";
console.log("formatted:", format(ugly));
Linting con ESLint e formattazione con Prettier — illustrazione 3

Configurazione ESLint minima

Inizi con eslint:recommended, poi aggiunga una o due regole. La mantenga essenziale per chi è alle prime armi.

// Example .eslintrc.json (printed lines)
const eslintrc = [
  "{",
  "  \"env\": { \"es2022\": true, \"node\": true },",
  "  \"extends\": [\"eslint:recommended\"],",
  "  \"rules\": {",
  "    \"no-console\": \"warn\",",
  "    \"semi\": [\"error\", \"always\"]",
  "  }",
  "}"
];

for (const l of eslintrc) console.log(l);
Linting con ESLint e formattazione con Prettier — illustrazione 4

Prettier minimo e script

Aggiunga semplici script format e lint, così il team può eseguirli facilmente.

// Example .prettierrc (printed lines)
const prettierrc = [
  "{",
  "  \"semi\": true,",
  "  \"singleQuote\": true,",
  "  \"tabWidth\": 2",
  "}"
];

for (const l of prettierrc) console.log(l);

// Example npm scripts (printed)
const scripts = [
  "\"scripts\": {",
  "  \"lint\": \"eslint .\",",
  "  \"format\": \"prettier --write .\"",
  "}"
];

for (const l of scripts) console.log(l);
Linting con ESLint e formattazione con Prettier — illustrazione 5

Flusso di lavoro quotidiano

Suggerimenti:

  • Esegua format prima dei commit.
  • Mantenga poche regole ESLint, chiare.
  • Usi eslint:recommended e un file .prettierrc essenziale.
  • Aggiunga uno script rapido come npm run fix per la correzione automatica.
Linting con ESLint e formattazione con Prettier — illustrazione 6

Quiz: Prettier o ESLint

Verifica rapida: strumento di formattazione.

Linting con ESLint e formattazione con Prettier — illustrazione 7

Riepilogo

Riepilogo: usi ESLint per rilevare i problemi e Prettier per formattare il codice. Mantenga le configurazioni essenziali ed esegua entrambi tramite gli npm scripts per un flusso di lavoro del team più semplice.

Linting con ESLint e formattazione con Prettier — illustrazione 8

Domande Frequenti

La lezione «Linting con ESLint e formattazione con Prettier» è gratuita?

Sì — il testo completo di «Linting con ESLint e formattazione con Prettier» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso JavaScript Academy, passa a CoddyKit PRO. Il corso JavaScript Academy include 3 lezioni in totale.

Cosa imparerò in «Linting con ESLint e formattazione con Prettier»?

Individui i problemi comuni con ESLint e formatti automaticamente con Prettier. Mantieni configurazioni minime ed esegui tutto tramite gli script npm. Eserciti JavaScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare JavaScript Academy?

Non è richiesta alcuna esperienza precedente. JavaScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 3.

Quanto tempo richiede la lezione «Linting con ESLint e formattazione con Prettier»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione JavaScript Academy?

Sì. Ogni lezione JavaScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Mentalità del testing — asserzioni minime, AAA, rosso→verde→refactoring
  2. Linting con ESLint e formattazione con Prettier
  3. Basi della CI — eseguire lint e test a ogni push
← Torna a JavaScript Academy