Verwenden der Eslint-Konfiguration im Webpack (ausführliches Tutorial)

In diesem Artikel wird hauptsächlich die detaillierte Erklärung der von Webpack eingeführten Eslint-Konfiguration vorgestellt. Jetzt werde ich sie mit Ihnen teilen und Ihnen eine Referenz geben.

Eslint im Webpack verwenden

Damit Webpack eslint unterstützt, müssen Sie zunächst eslint-loader installieren. Der Befehl lautet wie folgt:

npm install --save-dev eslint-loader

Fügen Sie im Webpack den folgenden Code zu .config.js hinzu:

{
  test: /\.js$/,
  loader: 'eslint-loader',
  enforce: "pre",
  include: [path.resolve(__dirname, 'src')], // 指定检查的目录
  options: { // 这里的配置项参数将会被传递到 eslint 的 CLIEngine 
    formatter: require('eslint-friendly-formatter') // 指定错误报告的格式规范
  }
}

Hinweis: Der Standardformatierer ist stilvoll. Wenn Sie einen Drittanbieter verwenden möchten, können Sie das Plug-in installieren, z der eslint-freundliche Formatierer im obigen Beispiel.

Zweitens, wenn Sie möchten, dass das Webpack über Eslint-Funktionen verfügt, müssen Sie eslint installieren. Der Befehl lautet wie folgt:

npm install --save-dev eslint

Wenn das Projekt schließlich diese Eslin-Regeln verwenden möchte, können Sie es erstellen Eine Konfigurationsdatei '.eslintrc .js', der Code lautet wie folgt:

module.exports = {
  root: true,  
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  rules: {
    "indent": ["error", 2],
    "quotes": ["error", "double"],
    "semi": ["error", "always"],
    "no-console": "error",
    "arrow-parens": 0
  }
}

Auf diese Weise wurde eine einfache Webpack-Einführung in eslint abgeschlossen.

Hier werden wir über die Konfiguration und Verwendung von eslintrc.js sprechen. Weitere Informationen finden Sie unter http://eslint.cn/docs/user-guide

eslint-Konfiguration Elemente

1. root begrenzt den Verwendungsbereich der Konfigurationsdatei

2. Parser gibt den Eslint-Parser an

3. parserOptions legt Parsing-Serveroptionen fest

4. extends gibt die Eslint-Spezifikation an

5. Plugins bezieht sich auf Plug-ins von Drittanbietern

6. env gibt die Hostumgebung an, in der der Code ausgeführt wird

7. Regeln Aktivieren Sie zusätzliche Regeln oder überschreiben Sie die Standardregeln

8. globals Benutzerdefinierte globale Variablen im Code deklariert

Sind die Regelkonfigurationselemente in der Konfigurationsdatei unverzichtbar, wenn wir eslint verwenden?

Die Antwort ist ja. Wir müssen jedoch keine Regeln anpassen. Wir können Regeln von Drittanbietern verwenden. Hier verwenden wir das erweiterte Konfigurationselement.

erweitert

Wir können die offiziell von eslint empfohlenen oder die von einigen großen Unternehmen bereitgestellten verwenden, wie zum Beispiel: aribnb, google, standard.

Wir nutzen bei der Entwicklung grundsätzlich Dritte.

Offizielle Empfehlung

Fügen Sie einfach den folgenden Code in .eslintrc.js hinzu:

extends: 'eslint:recommended',
extends: 'eslint:all',

Einzelheiten finden Sie in der offiziellen Regeltabelle

Dritter- Party-Sharing

Um die Drittanbieter-Freigabe zu nutzen, müssen wir im Allgemeinen den entsprechenden Plug-in-Code wie folgt installieren:

npm install --save-dev eslint-config-airbnb // bnb
npm install --save-dev eslint-config-standard // standard

Fügen Sie den folgenden Code in .eslintrc.js hinzu:

extends: 'eslint:google',
// or
extends: 'eslint:standard',

Um diese Erweiterungen von Drittanbietern verwenden zu können, müssen wir manchmal einige Plug-Ins aktualisieren, z. B. Standard: eslint-plugin-import

Keine Panik, wir müssen nur diese Plug-Ins installieren Schritt für Schritt entsprechend den Fehlermeldungen.

Obwohl diese Erweiterungen von Drittanbietern sehr gut sind, müssen wir manchmal einige personalisiertere Regeln definieren und Regelkonfigurationselemente hinzufügen.

Konfigurationsregeln

Fügen Sie Regeln in der Datei .eslintrc.js hinzu. Der Code lautet wie folgt:

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

„semi“ und „quotes“ sind die Namen der Regeln in ESLint. Der erste Wert ist die Fehlerstufe, die einer der folgenden Werte sein kann:

1. „off“ oder 0 – schaltet die Regel aus

2. „warn“ oder 1 – behandelt die Regel als Warnung (hat keinen Einfluss auf den Exit-Code)

3. „error“ oder 2 – behandelt die Regel als Fehler (der Exit-Code ist 1)

Diese Regeln sind im Allgemeinen in zwei Kategorien unterteilt:

1. Fügen Sie diejenigen hinzu, die nicht in den Standard- oder Drittanbieterbibliotheken gefunden werden

2. Überschreiben Sie die Standard- oder Drittbibliothek

Möglicherweise gibt es in unserem Projekt noch einige andere Dateien, die ebenfalls formatiert werden müssen, wie zum Beispiel: html, vue, reagieren usw. Für die Verarbeitung dieser Dateien müssen wir Plug-Ins von Drittanbietern einführen.

plugins (html)

Installieren Sie eslint-plugin-html. Der Befehl lautet wie folgt:

npm install --save-dev eslint-plugin-html

Dieses Plug-in erinnert an Modulskripte um das Durchsuchen zu simulieren. Dies gilt nicht für Modulskripte, da dies nicht für gemeinsam genutzte globale Variablen gilt.

Dieses Plug-in kann auch Dateien erweitern, wie zum Beispiel: .vue, .jsx

.eslintrc.js, fügen Sie die folgenden Konfigurationselemente hinzu:

settings: {
  'html/html-extensions': ['.html', '.vue'],
  'html/indent': '+2',
},

Für diese Verwendung eslint Wir können eslint --ext .html, .vue src verwenden, um Dateien mit der Erweiterung -pulgin-html zu erkennen. Wenn wir sie während des Schreibens erkennen möchten, können wir den Loader der entsprechenden Datei zur Verarbeitung verwenden. Führen Sie dann npm run dev aus, um die Funktion auszuführen. Die Funktion der Überprüfung beim Schreiben.

In der Entwicklung können wir je nach Bedarf unterschiedliche .eslintrc.js-Dateien in verschiedenen Verzeichnissen desselben Projekts verwenden. In diesem Fall müssen wir das Stammverzeichnis des Konfigurationselements verwenden.

Nutzungsumfang einschränken (root: true)

Wenn wir unterschiedliche .eslintrc in verschiedenen Verzeichnissen verwenden möchten, müssen wir Folgendes zum Verzeichnis „Configuration“ hinzufügen item:

{
  "root": true
}

Wenn wir es nicht festlegen, wird die Suche fortgesetzt, bis das aktualisierte Verzeichnis eine Konfigurationsdatei hat, das Stammverzeichnis wird verwendet, wodurch die aktuelle Konfiguration des Verzeichnisses erfolgt Funktionsproblem.

In der Entwicklung müssen wir unterschiedliche Parser für unterschiedliche Situationen verwenden, und der, den wir am häufigsten verwenden, ist babel-eslint.

Parser (Parser angeben)

babel-eslint 解析器是一种使用频率很高的解析器，因为现在很多公司的很多项目目前都使用了es6，为了兼容性考虑基本都使用babel插件对代码进行编译。而用babel编译后的代码使用 babel-eslint 这款解析器可以避免不必要的麻烦。

babel-eslint 安装命令：

npm install --save-dev babel-eslint

在 .eslintrc.js 配置文件中添加如下配置项代码：

parser: 'babel-eslint',

如果你使用的默认解析器的话，且在代码中使用了浏览器有兼容性的问题的js新特性，使用webpack编译就会出现问题，这时我们一般装最新的eslint或者安装是使用 babel-eslint 来解决问题。

env（环境）

在 .eslintrc.js 中添加如下代码：

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

指定了环境，你就可以放心的使用它们的全局变量和属性。

global

指定全局变量。

在 .eslintrc.js 中添加如下代码：

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在JS中如何改变单物体透明度

在JS中如何实现通过拖拽改变物体大小

在vue中使用cli如何实现重构多页面脚手架

Das obige ist der detaillierte Inhalt vonVerwenden der Eslint-Konfiguration im Webpack (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!