ESLint

Questo strumento aiuta il programmatore ad individuare problemi nel codice sorgente.

• ES è l’abbreviazione di ECMA Script
• Lint in inglese significa peluria, lanuggine.

Si suggerisce di leggere anche due articoli collegati:

Debug con log

Emacs (6) con eglot

Si suggerisce di usare il solito template per il proprio progetto¹ , qui allegato per comodità

Per la sua installazione nel progetto viene suggerito di non usare l’installazione globale.:

$ nvm use node
$ npm install --save-dev eslint 
$ npm install --save-dev @react-native-community/eslint-config

La configurazione è consentita in due formati, sia in formato .js che in formato .json

file nascosto .eslintrc.js

module.exports = {
  root: true,
  extends: '@react-native-community',
};

Per eseguire il lint è conveniente aggiungere una riga alla configurazione del progetto, nel file package.json:

{  
  "name": "progetto",
  "scripts": {
    "lint": "eslint ."
  }
..
..

Per eseguire il controllo sul codice sorgente, basta eseguire

$ npm run lint *.js

Ad esempio, nel caso di un semplice progetto composto dai seguenti file:

+ .
+ ── android
+ ── ios
+ ── node_modules
+ ── src
|     ├─── Components
|     |     └─── Section.js
|     └─── App.js
├─── index.js
└─── package.json

Vediamo un esempio di output con qualche errore da correggere

$ npm run lint *.js

> progetto@0.0.1 lint
> eslint . index.js

/home/user/progetto/src/components/Section.js
  11:9  error  Replace `⏎··StyleSheet,⏎··Text,⏎··useColorScheme,⏎··View,⏎` with `StyleSheet,·Text,·useColorScheme,·View`  prettier/prettier
  18:9  error  Replace `⏎··Colors,⏎` with `Colors`                                                                        prettier/prettier

✖ 2 problems (2 errors, 0 warnings)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

Si può leggere che nel file Section.js sono presenti due errori (riga 11 e riga 18) e viene suggerito di eliminare il ritorno a capo (invio), e di scrivere tutto il codice indicato in una sola riga.

Possono essere segnalate anche variabili dichiarate e poi non utilizzate (never unused)

1. https://www.cancellino.org/2023/01/react-native-template-4/ [↩]