Utilisation de la configuration eslint dans webpack (tutoriel détaillé)

Cet article présente principalement l'explication détaillée de la configuration eslint introduite par webpack. Maintenant, je la partage avec vous et la donne comme référence.

Utiliser eslint dans webpack

Tout d'abord, pour que webpack prenne en charge eslint, vous devez installer eslint-loader. La commande est la suivante :

npm install --save-dev eslint-loader

Ajoutez le code suivant à webpack.config.js :

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

Remarque : le formateur est par défaut élégant. Si vous souhaitez utiliser un tiers, vous pouvez installer le plug-in, comme eslint-friendly-formatter dans l'exemple ci-dessus.

Deuxièmement, si vous souhaitez que webpack ait des fonctionnalités eslint, vous devez installer eslint. La commande est la suivante :

npm install --save-dev eslint

Enfin, si le projet souhaite utiliser ces règles eslin, vous peut créer un fichier d'élément de configuration '.eslintrc.js', le code est le suivant :

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
  }
}

De cette façon, une simple introduction du webpack à eslint a été réalisée.

Ici, nous parlerons de la configuration et de l'utilisation d'eslintrc.js. Pour plus de détails, veuillez vous référer à http://eslint.cn/docs/user-guide

configuration d'eslint. items

1. root limite la portée d'utilisation du fichier de configuration

2. l'analyseur spécifie l'analyseur eslint

3. parserOptions définit l'analyse des options du serveur

4. extends spécifie la spécification eslint

5. les plugins font référence aux plug-ins tiers

6. env spécifie l'environnement hôte dans lequel le code s'exécute

7. règles Activer des règles supplémentaires ou remplacer les règles par défaut

8. globals Variables globales personnalisées déclarées dans le code

Lorsque nous utilisons eslint, les éléments de configuration des règles dans le fichier de configuration sont-ils indispensables ?

La réponse est oui. Cependant, nous n'avons pas besoin de personnaliser les règles. Nous pouvons utiliser des règles tierces. Ici, nous utiliserons l'élément de configuration extends.

extends

Nous pouvons utiliser ceux officiellement recommandés par eslint, ou ceux fournis par certaines grandes entreprises, telles que : aribnb, google, standard.

Nous faisons généralement appel à des tiers pour le développement.

Recommandation officielle

Ajoutez simplement le code suivant dans .eslintrc.js :

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

Pour plus de détails, veuillez vous référer au tableau des règles officielles

Non. Partage tiers

Pour utiliser le partage tiers, nous devons généralement installer le code du plug-in approprié comme suit :

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

Ajoutez le code suivant dans .eslintrc. js :

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

Lors de l'utilisation de ces extensions tierces, nous devons parfois mettre à jour certains plug-ins, comme le standard : eslint-plugin-import

Pas de panique, nous il suffit d'installer ces plug-ins étape par étape en fonction des invites d'erreur.

Bien que ces extensions tierces soient très bonnes, nous devons parfois définir des règles plus personnalisées et ajouter des éléments de configuration des règles.

Règles de configuration

Ajoutez des règles dans le fichier .eslintrc.js, le code est le suivant :

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

"semi" et "quotes" sont les noms de règles dans ESLint. La première valeur est le niveau d'erreur, qui peut être l'une des valeurs suivantes :

1. "off" ou 0 - désactive la règle

2. "warn" ou 1 - traite la règle comme un avertissement (n'affecte pas le code de sortie)

3. "erreur" ou 2 - traite la règle comme une erreur (le code de sortie est 1)

Ces règles sont généralement divisées en deux catégories :

1. Ajouter celles introuvables dans les bibliothèques par défaut ou tierces

2. Remplacer la bibliothèque par défaut ou la troisième

Il peut y avoir d'autres fichiers dans notre projet qui doivent également être formatés, tels que : html, vue, réagir, etc. Pour le traitement de ces fichiers, nous devons introduire des plug-ins tiers.

plugins (html)

Installez eslint-plugin-html, la commande est la suivante :

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

Ce plug-in rappellera scripts de module Émule le comportement du navigateur des variables globales partagées, car cela ne s'applique pas aux scripts de module.

Ce plug-in peut également étendre des fichiers, tels que : .vue, .jsx

.eslintrc.js, ajouter les éléments de configuration suivants :

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

Et pour cela, nous pouvons utiliser eslint --ext .html, .vue src pour détecter les fichiers étendus avec eslint-pulgin-html. Si nous voulons détecter lors de l'écriture pendant le développement, nous pouvons utiliser le chargeur du fichier correspondant à traiter. Exécutez ensuite npm run dev pour réaliser la fonction. La fonction de vérification lors de l'écriture.

En développement, parfois selon les besoins, nous pouvons utiliser différents fichiers .eslintrc.js dans différents répertoires du même projet. Dans ce cas, nous devons utiliser l'élément de configuration racine.

Limiter la portée d'utilisation (root : true)

Si nous voulons utiliser différents .eslintrc dans différents répertoires, nous devons ajouter ce qui suit au répertoire Configuration items :

{
  "root": true
}

Si nous ne le définissons pas, il continuera à rechercher jusqu'au répertoire mis à jour. Si le répertoire mis à jour a un fichier de configuration, il utilisera le répertoire racine, ce qui provoquera le répertoire actuel. configuration du répertoire de configuration Problème qui ne fonctionne pas.

En développement, nous devons utiliser différents analyseurs pour différentes situations, et celui que nous utilisons couramment est babel-eslint.

analyseur (préciser l'analyseur)

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如何实现重构多页面脚手架

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!