Dieses Mal bringe ich Ihnen die Anweisungen für den Einstieg in EsLint. Was sind die Vorsichtsma?nahmen für den Einstieg in EsLint? Hier sind praktische F?lle, schauen wir uns diese gemeinsam an.

Einführung

?ESLint ist ein Plug-in-Javascript-Codeerkennungstool, das zur Inspektion verwendet werden kann H?ufige JavaScript-Codefehler k?nnen auch auf den Codestil überprüft werden, sodass wir eine Reihe von ESLint-Konfigurationen entsprechend unseren eigenen Vorlieben angeben und diese dann auf die Projekte anwenden k?nnen, in die wir schreiben Helfen Sie bei der Implementierung von Codierungsstandards und kontrollieren Sie effektiv die Qualit?t des Projektcodes.

Installation

ESLint-Installation: lokale Installation, globale Installation

1. Lokale Installation

$?npm?install?eslint?--save-dev

ErstellenKonfigurationsdatei

$?./node_modules/.bin/eslint?--init

Danach k?nnen Sie ESLint in jeder Datei oder jedem Verzeichnis wie folgt ausführen:

$?./node_modules/.bin/eslint?index.js

index.js ist die js-Datei, die Sie testen müssen. Alle Plugins oder freigegebenen Konfigurationen, die Sie verwenden (müssen lokal installiert sein, um mit einem lokal installierten ESLint zu funktionieren).

2. Globale Installation

Wenn Sie m?chten, dass ESLint für alle Projekte verfügbar ist, wird empfohlen, ESLint global zu installieren.

$?npm?install?-g?eslint

Nach dem Generieren der Konfigurationsdatei

$?eslint?--init

k?nnen Sie ESLint in jeder Datei oder jedem Verzeichnis ausführen

$?eslint?index.js

PS: eslint --init wird für jedes Projekt verwendet Verzeichnis, das eslint einrichtet und konfiguriert und lokal installiertes ESLint und seine Plugins ausführt. Wenn Sie ESLint lieber global installieren m?chten, müssen alle in Ihrer Konfiguration verwendeten Plugins global installiert werden.

Verwenden Sie

1. Generieren Sie eine package.json-Datei im Projektstammverzeichnis (Das Projekt, das ESLint konfiguriert, muss über eine package.json-Datei verfügen. Wenn nicht, müssen Sie kann npm init -y verwenden, um )

$?npm?init?-y

2 zu generieren. Eslint installieren (Die Installationsmethode wird entsprechend den Anforderungen pers?nlicher Projekte installiert, hier verwenden wir die globale Installation )

$?npm?install?-g?eslint

3. Erstellen Sie eine Index-.js-Datei und schreiben Sie eine Funktion hinein.

function?merge?()?{
????var?ret?=?{};
????for?(var?i?in?arguments)?{
????????var?m?=?arguments[i];
????????for?(var?j?in?m)?ret[j]?=?m[j];
????}
????return?ret;
}

console.log(merge({a:?123},?{b:?456}));

führt node index.js aus und das Ausgabeergebnis ist { a: 123, b: 456 }

$?node?index.js
{?a:?123,?b:?456?}

Verwenden Sie eslint, um zu überprüfen

$?eslint?index.js

Oops!?Something?went?wrong!?:(

ESLint:?4.19.1.
ESLint?couldn't?find?a?configuration?file.?To?set?up?a?configuration?file?for?this?project,?please?run:

????eslint?--init

ESLint?looked?for?configuration?files?in?E:\website\demo5\js?and?its?ancestors.?If?it?found?none,?it?then?looked?in?your?home?directory.

If?you?think?you?already?have?a?configuration?file?or?if?you?need?more?help,?please?stop?by?the?ESLint?chat?room:?https://gitter.im/eslint/eslint

Das Ausführungsergebnis ist ein Fehler Da die entsprechende Konfigurationsdatei nicht gefunden wurde, denke ich pers?nlich, dass das Wichtigste an diesem Eslint das Konfigurationsproblem ist.

Erstellen Sie eine neue Konfigurationsdatei

??$?eslint?--init

W?hrend des Generierungsprozesses müssen Sie die Generierungsregeln, die Supportumgebung und andere Inhalte ausw?hlen. Hier sind einige meiner Generierungsoptionen

??How?would?you?like?to?configure?ESLint??Answer?questions?about?your?style
??Are?you?using?ECMAScript?6?features??Yes
??Are?you?using?ES6?modules??Yes
??Where?will?your?code?run??Browser
??Do?you?use?CommonJS??Yes
??Do?you?use?JSX??No
??What?style?of?indentation?do?you?use??Tabs
??What?quotes?do?you?use?for?strings??Single
??What?line?endings?do?you?use??Windows
??Do?you?require?semicolons??No
??What?format?do?you?want?your?config?file?to?be?in??JavaScript

Der generierte Inhalt befindet sich in. In der Datei eslintrc.js lautet der Inhalt der Datei wie folgt:

module.exports?=?{
????"env":?{
????????"browser":?true,
????????"commonjs":?true,
????????"es6":?true
????},
????"extends":?"eslint:recommended",
????"parserOptions":?{
????????"sourceType":?"module"
????},
????"rules":?{
????????"indent":?[
????????????"error",
????????????"tab"
????????],
????????"linebreak-style":?[
????????????"error",
????????????"windows"
????????],
????????"quotes":?[
????????????"error",
????????????"single"
????????],
????????"semi":?[
????????????"error",
????????????"never"
????????]
????}
};

??Diese generierte Datei enth?lt jedoch bereits einige Konfigurationen. L?schen Sie daher den gr??ten Teil des darin enthaltenen Inhalts. Lassen Sie ?extends“ und füllen Sie den Rest selbst aus

?module.exports?=?{
??????"extends":?"eslint:recommended"
??};

eslint:empfohlene Konfiguration, die eine Reihe von Kernregeln enth?lt und einige h?ufige Probleme melden kann.

eslint index.js erneut ausführen, die Ausgabe ist wie folgt

??10:1??error??Unexpected?console?statement??no-console
??10:1??error??'console'?is?not?defined??????no-undef

??2?problems?(2?errors,?0?warnings)

Unerwartete Konsolenanweisung no-console --- Konsole kann nicht verwendet werden
'console' ist nicht definiert no- undef --- Konsolenvariablen sind nicht definiert.
L?sen Sie sie einzeln auf. Wenn Sie die Konsoleneingabe nicht verwenden k?nnen, k?nnen Sie einfach die Nicht-Konsolenvariablen deaktivieren und Regeln hinzufügen

module.exports?=?{
????extends:?'eslint:recommended',
????rules:?{
????????'no-console':?'off',
????},
};

in der Konfigurationsdatei werden Konfigurationsregeln geschrieben. Im Regelobjekt stellt der Schlüssel den Regelnamen und der Wert die Regelkonfiguration dar.
Dann gibt es noch die L?sung für no-undef: Der Grund für den Fehler ist, dass JavaScript über viele laufende Umgebungen wie Browser und Node.js verfügt. Darüber hinaus gibt es viele Softwaresysteme , die JavaScript verwenden Da ihre Skript-Engines wie PostgreSQL die Verwendung von JavaScript zum Schreiben von Speicher-Engines unterstützen, ist das Konsolenobjekt in diesen Betriebsumgebungen m?glicherweise nicht vorhanden. Darüber hinaus wird es ein Fensterobjekt in der Browserumgebung geben, aber nicht in Node.js; es wird ein Prozessobjekt in Node.js geben, aber nicht in der Browserumgebung.
Deshalb müssen wir auch die Zielumgebung des Programms in der Konfigurationsdatei angeben:

module.exports?=?{
????extends:?'eslint:recommended',
????env:?{
????????node:?true,
????},
????rules:?{
????????'no-console':?'off',
????}
};

Wenn die Prüfung erneut ausgeführt wird, erfolgt keine Eingabeaufforderung, was darauf hinweist, dass index.js die Prüfung vollst?ndig bestanden hat überprüfen.

Konfiguration

Es gibt zwei Konfigurationsmethoden: Dateikonfigurationsmethode und Codekommentar-Konfigurationsmethode (Es wird empfohlen, das Dateikonfigurationsformular zu verwenden, das relativ unabh?ngig und einfach zu warten ist).
Dateikonfiguration verwenden: Erstellen Sie eine neue Datei mit dem Namen .eslintrc im Stammverzeichnis des Projekts und fügen Sie dieser Datei einige Prüfregeln hinzu.

Dateikonfigurationsmethode

env: In welcher Umgebung wird Ihr Skript ausgeführt?
Umgebung kann globale Variablen für andere Umgebungen voreinstellen, z. B. Browser-, Knotenumgebungsvariablen und ES6-Umgebungsvariablen , Mocha-Umgebungsvariablen usw.

'env':?{
????'browser':?true,
????'commonjs':?true,
????'es6':?true
},

globals: zus?tzliche globale Variablen

globals:?{
????vue:?true,
????wx:?true
},

Regeln: offene Regeln und die Ebene, die gemeldet wird, wenn ein Fehler auftritt
Es gibt drei Fehlerebenen für Regeln:

0或’off’：關閉規(guī)則。?
1或’warn’：打開規(guī)則，并且作為一個警告（并不會導致檢查不通過）。?
2或’error’：打開規(guī)則，并且作為一個錯誤?(退出碼為1，檢查不通過)。

參數(shù)說明：?
參數(shù)1?：?錯誤等級?
參數(shù)2?：?處理方式

Konfigurationscode-Kommentarmethode

Verwenden Sie JavaScript-Kommentare, um Konfigurationsinformationen direkt in eine Datei einzubetten
Beispiel:

忽略?no-undef?檢查?
/*?eslint-disable?no-undef?*/

忽略?no-new?檢查?
/*?eslint-disable?no-new?*/

設置檢查?
/*eslint?eqeqeq:?off*/?
/*eslint?eqeqeq:?0*/

Es gibt viele Konfigurations- und Regelinhalte, interessiert Schüler k?nnen hier nachschlagen: Regeln

使用共享的配置文件

??我們使用配置js文件是以extends: 'eslint:recommended'為基礎配置，但是大多數(shù)時候我們需要制定很多規(guī)則，在一個文件中寫入會變得很臃腫，管理起來會很麻煩。

??新建一個文件比如eslint-config-public.js，在文件內容添加一兩個規(guī)則。

module.exports?=?{
????extends:?'eslint:recommended',
????env:?{
????????node:?true,
????},
????rules:?{
????????'no-console':?'off',
????????'indent':?[?'error',?4?],
????????'quotes':?[?'error',?'single'?],
????},
};

然后原來的.eslintrc.js文件內容稍微變化下，刪掉所有的配置，留下一個extends。

module.exports?=?{
????extends:?'./eslint-config-public.js',
};

??這個要測試的是啥呢，就是看看限定縮進是4個空格和使用單引號的字符串等，然后測試下，運行eslint index.js，得到的結果是沒有問題的，但是如果在index.js中的var ret = {};前面加個空格啥的，結果就立馬不一樣了。

2:1??error??Expected?indentation?of?4?spaces?but?found?5??indent

??1?problem?(1?error,?0?warnings)
??1?error,?0?warnings?potentially?fixable?with?the?`--fix`?option.

??這時候提示第2行的是縮進應該是4個空格，而文件的第2行卻發(fā)現(xiàn)了5個空格，說明公共配置文件eslint-config-public.js已經(jīng)生效了。

??除了這些基本的配置以外，在npm上有很多已經(jīng)發(fā)布的ESLint配置，也可以通過安裝使用。配置名字一般都是eslint-config-為前綴，一般我們用的eslint是全局安裝的，那用的eslint-config-模塊也必須是全局安裝，不然沒法載入。

在執(zhí)行eslint檢查的時候，我們會經(jīng)?？吹教崾尽?-flx”選項，在執(zhí)行eslint檢查的時候添加該選項會自動修復部分報錯部分（注意這里只是部分，并不是全部）

比如我們在規(guī)則中添加一條no-extra-semi: 禁止不必要的分號。

'no-extra-semi':'error'

然后，我們在index.js最后多添加一個分號

function?merge?()?{
????var?ret?=?{};
????for?(var?i?in?arguments)?{
????????var?m?=?arguments[i];
????????for?(var?j?in?m)?ret[j]?=?m[j];
????}
????return?ret;;
}

console.log(merge({a:?123},?{b:?456}));

執(zhí)行eslint index.js，得到結果如下：

??7:16??error??Unnecessary?semicolon??no-extra-semi
??7:16??error??Unreachable?code???????no-unreachable

??2?problems?(2?errors,?0?warnings)
??1?error,?0?warnings?potentially?fixable?with?the?`--fix`?option.

然后我們在執(zhí)行eslint index.js --fix就會自動修復，index.js那個多余的分號也就被修復消失不見了。

總結

以上是我在學習eslint整理的一些資料，不算太全面，對于像我這樣的新手入門足夠了

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關注php中文網(wǎng)其它相關文章！

推薦閱讀：

前端中排序算法實例詳解

PromiseA+的實現(xiàn)步驟詳解

Das obige ist der detaillierte Inhalt vonWas Sie für Einsteiger über EsLint wissen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!