Introducción

Me imagino que la mayoría conoce Sublime Text por lo que les voy a comentar la magia que trae ESlint a nuestro workflow de desarrollo.

ESLint es una herramienta que identifica y reporta patrones y errores en código ECMAScript/JavaScript. es similar a JS-Lint y JSHint con algunas diferencias:

  • ESLint usa Espree para analizar JavaScript.
  • ESLint usa un AST para evaluar patrones en código.
  • ESLint soporta plugins, cada regla es un plugin y puedes agregar más en desarrollo.

Instalación

Para instalar eslint globalmente usamos npm(además instalaremos un plugin de Babel).

$ npm install -g eslint babel-eslint

Pero recomiendo hacerlo localmente en cada proyecto como dev dependencia.

$ npm install --save-dev [email protected] [email protected]

Luego creamos un archivo .eslintrc en el directorio raíz de nuestro proyecto.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
// ¡Quiero usar babel-eslint para el análisis!
"parser": "babel-eslint",
"env": {
// El código es para un browser
"browser": true,
// En CommonJS
"node": true
},
// Ejemplo de reglas para encontrar errores:
"rules": {
"quotes": [2, "single"],
"eol-last": [0],
"no-mixed-requires": [0],
"no-underscore-dangle": [0]
}
}

Y agregamos el siguiente script a package.json para correr el lint mediante npm.

1
2
3
"scripts": {
"lint": "eslint src"
},

Configurando Sublime

Lo primero es instalar Package Control a través de las instrucciones de la web oficial.

Mediante package control instalas SublimeLinter, por defecto este no incluye linters para ningún lenguaje, por lo que instalaremos SublimeLinter-contrib-eslint (desinstala otros linters si es que los tenias).

Luego le enseñaremos a sublime a reconocer ES6 instalando el paquete babel-sublime. Posteriormente elige este paquete como la sintaxis por defecto para archivos .js y .jsx.

Solo nos falta definir en sublime-linter que sublime-babel es una variación de javascript. Para esto vamos a SublimeLinter Settings — User en el menu de comandos.

SublimeLinter Settings — User

y agregamos javascript (babel) al syntax_map

Syntax Map

¡¡Listo!! solo reinicia sublime y cada vez que grabes analizara tu código. Si quieres cambiar esto para que te avise en mientras escribes. Configuralo en Choose Lint Mode

Choose Lint Mode

Extra

Si estas desarrollando en react, puedes agregar el plugin de react.

$ npm install --save-dev [email protected]

y modificar el archivo .eslintrc más o menos así:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
{
// Soporte a jsx
"ecmaFeatures": {
"jsx": true,
"modules": true
},
// ¡Quiero usar babel-eslint para el análisis!
"parser": "babel-eslint",
"env": {
// El código es para un browser
"browser": true,
// En CommonJS
"node": true
},
// Ejemplo de reglas para encontrar errores:
"rules": {
"quotes": [2, "single"],
"eol-last": [0],
"no-mixed-requires": [0],
"no-underscore-dangle": [0],
"strict": [2, "never"],
"react/jsx-uses-react": 2,
"react/jsx-uses-vars": 2,
"react/react-in-jsx-scope": 2
},
// Agregamos el plugin
"plugins": [
"react"
]
}