Guida di introduzione a EsLint

Introduzione

ESLint è stato scritto da Nicholas C. Zakas, l'autore del JavaScript Red Book, e pubblicato per la prima volta nel 2013. L'obiettivo iniziale di NCZ non era di reinventare la ruota, ma di fare una scelta in risposta alla mancanza di risposta della squadra JSHint: scrivere uno strumento di lint in modo estensibile, con regole indipendenti e senza incorporare uno stile di codifica predefinito.

Indirizzo ufficiale: http://eslint.org/

ESLint ci aiuta a controllare gli errori di sintassi durante la programmazione JavaScript. Ad esempio: è difficile trovare le variabili o i metodi persi in un'applicazione JavaScript. ESLint ci aiuta ad analizzare il codice JS, trovare bug e garantire una certa correttezza della scrittura del codice JavaScript.

ESLint è basato sul framework Esprima (architettura di parsing ECMAScript). Esprima supporta ES5.1 e viene scritto anche in ECMAScript, utilizzato per analisi multi-piattaforma. ESLint non solo fornisce alcune regole predefinite (estensibili), ma anche regole personalizzate per vincolare il codice JavaScript che scriviamo.

ESLint fornisce il seguente supporto:

• ES6
• AngularJS
• JSX
• Controllo dello stile
• Errori e avvisi personalizzati
  

ESLint fornisce i seguenti tipi di convalida:

• Convalida degli errori di sintassi
• Punti di punteggiatura non importanti o persi, come i punti e virgola
• Blocchi di codice non eseguiti (i ragazzi che hanno utilizzato WebStorm dovrebbero sapere)
• Parametri non utilizzati avvisati
• Simboli di fine mancanti, come}
• Assicurati che le regole di stile siano uniformi, come Sass o Less
• Controlla il nome delle variabili
  

Utilizzo

Primo, installazione

Npm install gulp-eslint –save-dev

Sotto la directory del tuo progetto, esegui: eslint –init verrà creato un file .eslintrc, il contenuto del file include alcune regole di convalida

{
 "rules": {
  "semi": ["error", "always"],
  "quotes": ["error", "double"]
 }
}

Tra cui "semi" e "quotes" sono i nomi delle regole. ESLint fornisce anche livelli di errore, corrispondenti a numeri, più alti i numeri più alta è la segnalazione degli errori, come 0 per errori di codice senza segnalazione, 1 per avvisi che non influenzano la compilazione esistente, 2 per errori che lanciano un errore.

"extends": "eslint:recommended"

Extends è la convalida consigliata predefinita di ESLint, puoi utilizzare la configurazione per selezionare quali verifiche ti servono, puoi accederenpmjs.comVisualizza

Secondo, configurazione personalizzata di ESLint

In precedenza è stato menzionato che puoi disattivare tutte le convalidhe predefinite di ESLint e aggiungere le regole di convalida necessarie. Per questo ESLint fornisce 2 modi per configurare:

1. Commenti di configurazione: Utilizzare direttamente i commenti JavaScript per inserire le informazioni di configurazione nei file da verificare
2. File di configurazione: Utilizzare file JavaScript, JSON o YAML, come il file .eslintrc menzionato in precedenza, ovviamente puoi anche aggiungere il campo eslintConfig nel file package.json, EsLint lo leggerà automaticamente e lo verificherà.
   

Iniziamo a presentare l'uso di EsLint

parserOptions

EsLint permette di specificare la versione di ecma da verificare tramite parserOptions, nonché alcune caratteristiche di ecma

{
 "parserOptions": {
  "ecmaVersion": 6, //specifica la versione supportata da ECMAScript, 6 rappresenta ES6
  "sourceType": "module", //specifica il tipo di origine, ci sono due tipi "script" o "module"
  "ecmaFeatures": {
   "jsx": true//attiva JSX
  }
 }
}

Parser

EsLint utilizza predefinitamente esprima per la解析 script, ovviamente puoi cambiarlo, ad esempio cambiare a babel-eslint per la解析

{
 "parser": "esprima" //predefinito, può essere impostato su babel-eslint, supporta JSX
}

Environments

Le variabili globali di altri ambienti predefiniti possono essere configurate, come variabili di ambiente brower, node, variabili di ambiente es6, variabili di ambiente mocha, ecc.

{
 "env": {
  "browser": true,
  "node": true
 }
}

Se si desidera utilizzare le variabili d'ambiente del plugin, è possibile specificare tramite plugins, come segue

{
 "plugins": ["example"],
 "env": {
  "example/custom": true
 }
}

Globals

Specificare le variabili globali che si desidera utilizzare, true rappresenta l'abilità di sovrascrivere, false rappresenta l'impossibilità di sovrascrivere

{
 "globals": {
  "var1": true,
  "var2": false
 }
}

Plugins

EsLint consente l'uso di plugin di terze parti

{
 "plugins": [
  "react" 
  ]
}

Rules

Regole personalizzate, formato generale: "NomeRegola": coefficiente di livello di errore. Il coefficiente 0 indica non avvisare (off), 1 indica avviso (warn), 2 indica errore lanciato (error). È possibile specificare un intervallo, ad esempio [1,4]

Può includere la modalità Strict o può essere un modo di avviso come i simboli. Può anche essere una verifica di terze parti, come React.

Indirizzo di verifica predefinito http://eslint.org/docs/rules/

{
 "plugins": [
  "react"
 ],
 "rules": {
   // Verifica predefinita del codice JavaScript
  "eqeqeq": "off", // off = 0
  "curly": "error", // error = 2
  "quotes": ["warn", "double"], // warn = 1
   // Regole di verifica di terze parti
  "react/jsx-quotes": 0
 }
}

　　　　　　　　　　　 https://www.npmjs.com/package/eslint-plugin-react, questo link è per l'uso di ESLint con React

Terza sezione: utilizzo in Gulp

var eslint = require('gulp-eslint');
gulp.task('validate-eslint',function(){
 return gulp.src(['app/**/*.js']) // Percorso di verifica specificato
  .pipe(eslint({configFile:"./.eslintrc"})) // Utilizza il file di configurazione ESLint
  .pipe(eslint.format())
});

Conclusione

Questo è tutto il contenuto dell'articolo, spero che il contenuto di questo articolo possa essere di aiuto per il vostro studio o lavoro. Se avete domande, potete lasciare un commento per discuterle.