Come configurare ESLint in Atom in modo da poter contribuire all'Open Source

Se vuoi contribuire a progetti open source come freeCodeCamp, prima devi configurare linting.

La maggior parte dei progetti ha i propri standard di stile per JavaScript e questi verranno applicati automaticamente da strumenti di linting come ESLint .

Configuriamo ESLint per l'esecuzione in Atom, uno dei più popolari editor di codice.

Prima di iniziare, ecco un rapido avvertimento che faccio alcune ipotesi:

  • Hai seguito le linee guida per i contributi di Free Code Camp fino alla parte che recita Setup Linting.
  • E così hai installato i prerequisiti necessari (in particolare Node.js e npm).
  • Hai almeno una conoscenza di base dell'uso della riga di comando e di git .
  • Stai utilizzando Atom come editor di testo (sebbene questo articolo dovrebbe essere utile anche se non lo sei, dovresti solo controllare la documentazione del tuo editor di testo per le istruzioni relative a ESLint)

Cos'è esattamente il linting?

" Linting è il processo di esecuzione di un programma che analizzerà il codice per potenziali errori." - Oded su Stack Overflow

Ed ESLint è uno strumento di linting specifico per il codice JavaScript. Si utilizza ESLint per trovare codice problematico ("errori") scritto in JavaScript.

A proposito, "ES" nel nome di ESLint deriva da "ECMAScript", che è il nome ufficiale del linguaggio JavaScript principale.

Immagina ESLint come tua nonna che ti dice come vivere la tua vita. Sottolinea i tuoi errori e ti dice di ripulirli. Ascolti la nonna, perché la nonna lo sa.

Questi "errori" possono essere oggettivi , il che significa che sono causati da codice che non è conforme, ad esempio, alla sintassi di JavaScript (o qualunque linguaggio di programmazione tu stia lintando). In questo modo, diresti che il linter sta rilevando errori di sintassi.

Dico "errori oggettivi" perché questi errori sono inerenti a JavaScript stesso. Se si omette un punto e virgola alla fine di una dichiarazione di variabile, questo è oggettivamente un errore secondo gli autori di JavaScript, anche se non interrompe l'esecuzione del programma (vedere inserimento automatico del punto e virgola).

Oppure questi errori possono essere soggettivi , il che significa che tu (non il Comitato tecnico 39, il corpo degli standard di ECMAScript) hai definito una serie di regole che il tuo codice dovrebbe seguire. Queste regole di codifica sono comunemente riassunte in una guida di stile JavaScript , che è un documento che dichiara una sorta di best practice di codifica. Free Code Camp, tra molti altri progetti software, utilizza guide di stile.

La guida di stile JavaScript di Airbnb è una delle più popolari per gli sviluppatori JavaScript e la guida di stile di Free Code Camp si basa su di essa.

Lo scopo di seguire una guida di stile è quello di avere uno "standard di scrittura" che gli sviluppatori del progetto seguono per mantenere il codice pulito, semplice e coerente. Questo è simile al concetto di AP Stylebooki giornalisti seguono. L'unica differenza è che l'AP Stylebook è una guida di stile per la grammatica inglese, mentre la guida di stile di Airbnb è per JavaScript.

Una volta chiarito come scrivere il codice per il tuo progetto software (ovvero, hai scelto una guida di stile o ne hai creato uno tuo), sei pronto per impostare le tue regole di linting per ESLint.

Il modo in cui funziona ESLint è che tu gli dici quali regole (cioè, prendi le regole della tua guida di stile e le converti in regole di linting ) dovrebbe sapere e cosa dovrebbe cercare, così ESLint può toccarti sulla spalla e farti sapere quando scrivi codice problematico.

Per comunicare a ESLint le tue regole di linting, configurale in un file di configurazione chiamato .eslintrcor eslintConfigor package.json, che ESLint cercherà e leggerà automaticamente. E durante lo sviluppo, ESLint ti avviserà del codice di errore che non obbedisce a queste regole in modo che tu possa apportare revisioni, mentre stai codificando. È come avere con te il programma di coppia della nonna.

Dove brilla ESLint è che è " progettato per essere completamente configurabile, il che significa che puoi disattivare ogni regola ed eseguire solo con la convalida della sintassi di base, o mescolare e abbinare le regole in bundle e le tue regole personalizzate per rendere ESLint perfetto per il tuo progetto ". In altre parole puoi mescolare e abbinare regole oggettive e soggettive.

Hai delle opzioni quando si tratta di strumenti di linting JavaScript, ma in questo articolo ci concentriamo su ESLint perché Free Code Camp lo specifica nelle sue linee guida per i contributi. Ed è ampiamente utilizzato altrove.

Hai anche delle opzioni quando si tratta di guide di stile JavaScript. Airbnb è utile per familiarizzare perché ha oltre 45.000 stelle su GitHub al momento della stesura di questo articolo e sta crescendo nell'utilizzo.

Imposta Linting per freeCodeCamp

Esistono due modi per installare ESLint: a livello globale e locale. Ci concentreremo sull'installazione locale , il che significa per la tua directory di lavoro locale, cioè il tuo repository clonato di Free Code Camp.

1: Apri il tuo clone di Free Code Camp nel tuo editor di testo (questo presume che tu abbia effettivamente clonato Free Code Camp sul tuo computer)

2: In Terminal, cd(cambia directory) nella directory di Free Code Camp

3: digitare npm install eslint --save-devnel terminale

4: Nell'editor di testo Atom, vai su Preferenze > ;> Insta ll> & g t; e digita li nter-eslint nella casella di ricerca Cerca pacchetti

Nota: puoi anche installare i pacchetti Atom dalla riga di comando utilizzando il apmcomando. Vedere queste istruzioni per un esempio.

5: Installare linter-eslint e linter .

6: Nella tua directory di Free Code Camp, chiudi qualsiasi file gt;.js files and and then re-open

And now the next time you write JavaScript you should see ESLint working!

Original text


Note: I’ve left out an important step: configuring ESLint, that is, the part where you customize ESLint and tell it about your linting rules. I did so because when you clone Free Code Camp’s repository, it already comes with ESLint configuration files, for example, see eslintrc and package.json. And so you don’t need to do any configuration of your own.

In the event you work on a project where you need to configure ESLint, I point you to the following links:

  • Configuring ESLint.
  • Get Started with ESLint v1.0
  • npm, eslint
  • Airbnb’s extensible shared ESLint config

To wrap up:

  1. Linting is the process of checking for problematic code.
  2. ESLint is one such tool that performs linting.
  3. ESLint can be a great learning tool because it forces you to write clean, consistent code and develop good coding habits.
  4. Many open source projects ask you to run ESLint.
  5. You should have ESLint set up in your text editor to contribute to Free Code Camp.
  6. If you’re not using Atom, check your text editor’s docs for how to install ESLint.
  7. Stay the course.

If you have questions, you can tweet me at @gilbertginsberg or find me at GilbertIndex.