Tutoriel d'introduction à ESLint

Introduction

ESLint est écrit par Nicholas C. Zakas, l'auteur du JavaScript Red Book, 2013 La première version a été publiée en an. L'initiative de NCZ n'était pas de créer une roue nouvelle, mais de faire un choix en cas de besoin réel non répondu par l'équipe JSHint : écrire un outil lint avec l'idée d'extensibilité, de règles indépendantes et de style de codage non intégré.

Adresse officielle : http://eslint.org/

ESLint nous aide à vérifier les erreurs de syntaxe lors de la programmation JavaScript. Par exemple : dans une application JavaScript, il est difficile de trouver les variables ou les méthodes que vous avez laissées de côté. ESLint peut nous aider à analyser le code JS, trouver des bugs et assurer une certaine exactitude de la syntaxe du code JavaScript.

ESLint est basé sur Esprima (l'architecture de parsing ECMAScript). Esprima prend en charge ES5.1Lui-même est écrit en ECMAScript, utilisé pour l'analyse polyvalente. ESLint ne fournit pas seulement certains règles par défaut (extensible), mais aussi des règles personnalisées par l'utilisateur pour restreindre le code JavaScript que nous écrivons.

ESLint offre le soutien suivant :

• ES6
• AngularJS
• JSX
• Vérification de style
• Erreurs et avertissements personnalisés
  

ESLint offre les types de vérification suivants :

• Vérification des erreurs de syntaxe
• Les points de suspension ou les points-virgules manquants ou perdus, comme les points-virgules
• Les blocs de code inaccessibles (les utilisateurs de WebStorm devraient comprendre)
• Les paramètres non utilisés sont rappelés
• Les caractères de fin manquants, comme }
• Assurez-vous que les règles de style sont uniformes, comme Sass ou Less
• Vérifiez le nom des variables
  

使用

一、安装

Npm install gulp-eslint –save-dev

Dans le répertoire de votre projet, exécutez : eslint –init pour générer un fichier .eslintrc, qui contient certaines règles de validation

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

dans lesquels "semi" et "quotes" sont les noms des règles. ESLint offre également des niveaux d'erreur, correspondant aux nombres, plus le nombre est élevé, plus l'erreur est signalée, comme 0 pour les erreurs de code sans avertissement,1représente un avertissement mais n'affecte pas la compilation existante,2error lève des erreurs.

"extends": "eslint:recommended"

Extends est la recommandation par défaut de ESLint, vous pouvez utiliser la configuration pour choisir哪些验证是你所需要的，可以登录npmjs.com查看

二、自定义EsLint配置

如前所述，你可以关闭所有EsLint默认的验证，自行添加所需的验证规则。为此，EsLint提供了2以下是一些设置方式：

1. 配置注释：在需要验证的文件中，直接使用JavaScript注释嵌套配置信息
2. 配置文件：使用JavaScript、JSON或YAML文件进行配置，例如前面提到的.eslintrc文件，当然你也可以在package.json文件中添加eslintConfig字段，EsLint会自动读取并进行验证。
   

开始介绍EsLint的用法

parserOptions

EsLint通过parserOptions，允许指定校验的ecma的版本，及ecma的一些特性

{
 "parserOptions": {
  "ecmaVersion": 6, //指定ECMAScript支持的版本，6为ES6
  "sourceType": "module", //指定来源的类型，有两种”script”或”module”
  "ecmaFeatures": {
   "jsx": true//启动JSX
  },
 }
}

Parser

EsLint默认使用esprima做脚本解析，当然你也切换他，比如切换成babel-eslint解析

{
 "parser": "esprima" //默认，可以设置成babel-eslint，支持jsx
}

Environments

Environment可以预设好的其他环境的全局变量，如brower、node环境变量、es6环境变量、mocha环境变量等

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

如果你想使用插件中的环境变量，你可以使用plugins指定，如下

{
 "plugins": ["example"],
 "env": {
  "example/custom": true
 }
}

Globals

指定你所要使用的全局变量，true代表允许重写、false代表不允许重写

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

Plugins

EsLint允许使用第三方插件

{
 "plugins": [
  "react" 
  ]
}

Rules

自定义规则，一般格式：”规则名称”:error级别系数。系数0为不提示(off)、1Pour les avertissements (warn),}}2Pour les erreurs (error), vous pouvez spécifier la gamme, comme [1,4]

peut inclure le mode Strict, peut être un rappel de code, comme des symboles, etc. Peut également être une vérification tierce, comme react.

Adresse de vérification par défaut http://eslint.org/docs/rules/

{
 "plugins": [
  "react"
 ],
 "rules": {
   //Vérification par défaut du code Javascript
  "eqeqeq": "off", //off = 0
  "curly": "error", //error = 2
  "quotes": ["warn", "double"], //warn = 1
   //Règles de vérification des plugins tiers
  "react/jsx-quotes": 0
 }
}

　　　　　　　　　　　 https://www.npmjs.com/package/eslint-plugin-react, ce lien est l'utilisation de l'eslint pour react

Troisième partie, utilisation de Gulp

var eslint = require('gulp-eslint');
gulp.task('validate-eslint',function(){
 return gulp.src(['app/**/*.js']) //Spécifiez le chemin de vérification
  .pipe(eslint({configFle:"./.eslintrc")) //Utilisez votre fichier de vérification eslint
  .pipe(eslint.format())
});

Résumé

C'est tout pour cet article. J'espère que le contenu de cet article peut vous aider dans vos études ou votre travail. Si vous avez des questions, vous pouvez laisser des commentaires pour échanger.