Ce que vous devez savoir sur EsLint pour les débutants

Cette fois, je vais vous apporter les instructions pour les débutants pour démarrer avec EsLint. Quelles sont les précautions pour les débutants pour démarrer avec EsLint. Voici des cas pratiques, examinons-les ensemble.

Introduction

 ESLint est un plug-in javascript outil de détection de code qui peut être utilisé pour l'inspection Les erreurs de code JavaScript courantes peuvent également être vérifiées pour le style de code, afin que nous puissions spécifier un ensemble de configuration ESLint selon nos propres préférences, puis l'appliquer aux projets sur lesquels nous écrivons. atteindre Aider à la mise en œuvre des normes de codage et contrôler efficacement la qualité du code du projet.

Installation

Installation ESLint : installation locale, installation globale

1. Installation locale

$ npm install eslint --save-dev

Générerfichier de configuration

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

Après cela, vous pouvez exécuter ESLint dans n'importe quel fichier ou répertoire comme suit :

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

index.js est le fichier js que vous devez tester. Tous les plugins ou configurations partagées que vous utilisez (doivent être installés localement pour fonctionner avec un ESLint installé localement).

2. Installation globale

Si vous souhaitez qu'ESLint soit disponible pour tous les projets, il est recommandé d'installer ESLint globalement.

$ npm install -g eslint

Après avoir généré le fichier de configuration

$ eslint --init

, vous pouvez exécuter ESLint dans n'importe quel fichier ou répertoire

$ eslint index.js

PS : eslint -- init Est le répertoire utilisé pour installer et configurer eslint pour chaque projet, et exécutera ESLint installé localement et ses plug-ins. Si vous préférez utiliser ESLint installé globalement, tous les plugins utilisés dans votre configuration doivent être installés globalement.

Utilisez

1. Générez un fichier package.json dans le répertoire racine du projet (Le projet qui configure ESLint doit avoir un fichier package.json. Sinon, vous peut utiliser npm init -y pour générer )

$ npm init -y

2. Installez eslint (La méthode d'installation est installée en fonction des besoins des projets personnels, ici nous utilisons l'installation globale )

$ npm install -g eslint

3. Créez le fichier index.js et écrivez-y une fonction.

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

Exécutez le nœud index.js, le résultat de sortie est { a : 123, b : 456 >

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

Utilisez eslint pour vérifier

$ 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

Le résultat de l'exécution est un échec car le fichier de configuration correspondant n'est pas trouvé. Personnellement, je pense que le plus important dans cet eslint est le problème de configuration.

Créer un nouveau fichier de configuration

  $ eslint --init

Pendant le processus de génération, vous devez sélectionner les règles de génération, l'environnement de support et d'autres contenus

<.>

? 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

Génération Le contenu est dans le fichier .eslintrc.js Le contenu du fichier est le suivant

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"
        ]
    }
};

 Cependant, il y a déjà certaines configurations dans ce fichier généré, supprimez donc la plupart. le contenu à l'intérieur. Laissez s'étendre et vous pouvez remplir le reste par vous-même

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

eslint : configuration recommandée, qui contient une série de règles de base et peut signaler certains problèmes courants.

Réexécutez eslint index.js, le résultat est le suivant

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

✖ 2 problems (2 errors, 0 warnings)

Instruction de console inattendue no-console --- La console ne peut pas être utilisée

'console' n'est pas définie no-undef -- - La variable de console n'est pas définie. Les variables non définies ne peuvent pas être utilisées
Résolvez-la une par une. Si vous ne pouvez pas utiliser l'invite de la console, nous pouvons simplement désactiver la non-console et ajouter des règles
.

 Les règles de configuration sont écrites dans l'objet Rules, la clé représente le nom de la règle et la valeur représente la configuration de la règle.

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

Ensuite, il y a la solution au no-undef : la raison de l'erreur est que JavaScript a de nombreux environnements d'exécution, tels que les navigateurs et Node.js. De plus, il existe de nombreux systèmes logiciels

qui utilisent JavaScript comme leurs scripts, les moteurs, tels que PostgreSQL, prennent en charge l'utilisation de JavaScript pour écrire des moteurs de stockage, et l'objet console peut ne pas exister dans ces environnements d'exploitation. De plus, il y aura un
objet fenêtre dans l'environnement du navigateur, mais pas dans Node.js ; il y aura un objet processus dans Node.js, mais pas dans l'environnement du navigateur. Nous devons donc également spécifier l'environnement cible du programme dans le fichier de configuration :
Lorsque la vérification est réexécutée, il n'y aura pas de sortie d'invite, indiquant que index.js a a complètement réussi le contrôle.

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

Configuration

Il existe deux méthodes de configuration : la méthode de configuration des fichiers et la méthode de configuration des commentaires de code (

Il est recommandé d'utiliser le formulaire de configuration des fichiers, qui est relativement indépendant et facile à maintenir

).

Utiliser la configuration du fichier : créez un nouveau fichier nommé .eslintrc dans le répertoire racine du projet et ajoutez quelques règles de vérification à ce fichier. Méthode de configuration de fichier

env : dans quel environnement votre script s'exécutera-t-il ?

L'environnement peut prédéfinir des variables globales pour d'autres environnements, tels que le navigateur, les variables d'environnement de nœud et les variables d'environnement es6. , variables d'environnement moka, etc.

globales : variables globales supplémentaires

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

règles : règles d'ouverture et niveau signalé lorsqu'une erreur se produit

Il existe trois niveaux d'erreur pour les règles :

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

Méthode de commentaire du code de configuration

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

参数说明： 
参数1 ： 错误等级 
参数2 ： 处理方式

Utiliser les commentaires JavaScript pour intégrer les informations de configuration directement dans un fichier

Exemple :

Configuration et règle contenu Il y en a quelques-uns. Les étudiants intéressés peuvent se référer ici : règles

.

使用共享的配置文件

  我们使用配置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+的实现步骤详解

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!