Tutorial de inicio de ESLint

Introducción

ESLint fue escrito por Nicholas C. Zakas, autor del JavaScript Red Book, 2013 publicó la primera versión en el año. La intención de NCZ no era reinventar la rueda, sino que fue una elección hecha cuando no se recibió respuesta del equipo JSHint en las necesidades prácticas: escribir una herramienta de lint con la filosofía de expansibilidad, reglas independientes y sin estilo de codificación integrado.

Dirección oficial: http://eslint.org/

ESLint nos ayuda a verificar errores de sintaxis en la programación de JavaScript. Por ejemplo: en aplicaciones JavaScript, es difícil encontrar variables o métodos que hayamos perdido. ESLint nos ayuda a analizar el código JS, encontrar errores y asegurar una cierta程度的 correctitud en la escritura de JS.

ESLint se basa en Esprima (arquitectura de análisis ECMAScript). Esprima admite ES5.1, también está escrito en ECMAScript, utilizado para análisis multifuncional. ESLint no solo proporciona algunas reglas predeterminadas (expandibles), sino que también proporciona reglas personalizadas para restringir el código JavaScript que escribimos.

ESLint proporciona la siguiente compatibilidad:

• ES6
• AngularJS
• JSX
• Revisión de estilo
• Error y recordatorio personalizados
  

ESLint proporciona las siguientes validaciones:

• Validación de errores de sintaxis
• Puntos y comas no importantes o perdidos, como punto y coma
• Bloques de código que no se pueden ejecutar (los que han utilizado WebStorm deben entenderlo)
• Recordatorio de parámetros no utilizados
• Los símbolos de cierre faltantes, como}
• Asegúrate de que las reglas de estilo sean uniformes, como Sass o Less
• Revisa el nombre de las variables
  

Uso

1. Instalación

Npm install gulp-eslint –save-dev

En el directorio de tu proyecto, ejecuta: eslint –init para generar un archivo .eslintrc, que contiene algunas reglas de validación

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

donde "semi" y "quotes" son los nombres de las reglas. ESLint también proporciona niveles de error, que corresponden a números, y el número más alto indica un nivel de advertencia más alto, como 0 para errores de código sin advertencia,1representa una advertencia de recordatorio sin afectar la compilación actual,2error lanzará un error.

"extends": "eslint:recommended"

Extends es la recomendación predeterminada de ESLint, puedes usar la configuración para seleccionar qué validaciones necesitas, puedes ingresarnpmjs.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

自定义规则，一般格式：”规则名称”:系数级别。系数0为不提示(off)、1为警告(warn)、2为错误抛出(error)，可指定范围，如[1,4]

可以包括Strict模式、也可以是code的方式提醒，如符号等。还可以是第三方的校验，如react。

默认校验的地址http://eslint.org/docs/rules/

{
 "plugins": [
  "react"
 ],
 "rules": {
   //Javascript code 默认校验
  "eqeqeq": "off", //off = 0
  "curly": "error", //error = 2
  "quotes": ["warn", "double"], //warn = 1
   //使用第三方插件的校验规则
  "react/jsx-quotes": 0
 }
}

　　　　　　　　　　　 https://www.npmjs.com/package/eslint-plugin-react ， 此链接是react的eslint使用

三、Gulp中使用

var eslint = require('gulp-eslint');
-eslint
 return gulp.src(['app/**/*.js']) //Ruta de validación especificada
  .pipe(eslint({configFile:"."/.eslintrc"))) //Usa tu archivo de validación eslint
  .pipe(eslint.format())
});

Resumen

Este es el contenido completo de este artículo, espero que el contenido de este artículo pueda ayudar a todos en su aprendizaje o trabajo. Si tienen alguna pregunta, pueden dejar comentarios para intercambiar.