Was Sie für Einsteiger über EsLint wissen müssen

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’：关闭规则。 
1或’warn’：打开规则，并且作为一个警告（并不会导致检查不通过）。 
2或’error’：打开规则，并且作为一个错误 (退出码为1，检查不通过)。

参数说明： 
参数1 ： 错误等级 
参数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'为基础配置，但是大多数时候我们需要制定很多规则，在一个文件中写入会变得很臃肿，管理起来会很麻烦。

  新建一个文件比如eslint-config-public.js，在文件内容添加一两个规则。

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行却发现了5个空格，说明公共配置文件eslint-config-public.js已经生效了。

  除了这些基本的配置以外，在npm上有很多已经发布的ESLint配置，也可以通过安装使用。配置名字一般都是eslint-config-为前缀，一般我们用的eslint是全局安装的，那用的eslint-config-模块也必须是全局安装，不然没法载入。

在执行eslint检查的时候，我们会经常看到提示“--flx”选项，在执行eslint检查的时候添加该选项会自动修复部分报错部分（注意这里只是部分，并不是全部）

比如我们在规则中添加一条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}));

执行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.

然后我们在执行eslint index.js --fix就会自动修复，index.js那个多余的分号也就被修复消失不见了。

总结

以上是我在学习eslint整理的一些资料，不算太全面，对于像我这样的新手入门足够了

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

前端中排序算法实例详解

PromiseA+的实现步骤详解

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!