¿Debo usar la validación de JavaScript JSLint o JSHint? [cerrado]


454

Actualmente estoy validando mi JavaScript contra JSLint y avanzando, me está ayudando a escribir un mejor JavaScript, en particular al trabajar con la biblioteca Jquery.

Ahora me he encontrado con JSHint , un tenedor de JSLint .
Así que me pregunto por las aplicaciones web, que están basadas en JavaScript, que es la herramienta de validación mejor o más aplicable para trabajar:

  • JSLint o JSHint?

Quiero decidir ahora sobre un mecanismo de validación y seguir adelante, usar esto para la validación del lado del cliente.

¿Y la diferencia entre jshint y jslint? Por favor explique en un solo ejemplo de javascript.

Enlaces:

  1. jshint - http://www.jshint.com/

  2. jslint - http://jslint.com/


44
¿Qué tal ESLint ? Aunque es imperfecto: Combine this with the previous 'var' statement-> Do not mix 'require' and other declarations, paradoja.
nyuszika7h



No es un desarrollador de JS. Pero encontré JSHint muy útil durante nuestro proceso de revisión de código. Lo recomiendo.
Chetan Vashistth

Respuestas:


156

[EDITAR]
Esta respuesta ha sido editada. Dejo la respuesta original a continuación para el contexto (de lo contrario, los comentarios no tendrían sentido).

Cuando se hizo originalmente esta pregunta, JSLint fue la principal herramienta de enlace para JavaScript. JSHint era una nueva bifurcación de JSLint, pero aún no se había desviado mucho del original.

Desde entonces, JSLint se ha mantenido bastante estático, mientras que JSHint ha cambiado mucho: ha desechado muchas de las reglas más antagónicas de JSLint, ha agregado una carga completa de nuevas reglas y, en general, se ha vuelto más flexible. Además, ahora está disponible otra herramienta ESLint, que es aún más flexible y tiene más opciones de reglas.

En mi respuesta original, dije que no debes forzarte a seguir las reglas de JSLint; siempre y cuando haya entendido por qué estaba lanzando una advertencia, puede juzgar por sí mismo si debe cambiar el código para resolver la advertencia o no.

Con el conjunto de reglas ultra estricto de JSLint de 2011, este fue un consejo razonable: he visto muy pocos conjuntos de códigos JavaScript que podrían pasar una prueba de JSLint. Sin embargo, con las reglas más pragmáticas disponibles en las herramientas JSHint y ESLint de la actualidad, es una propuesta mucho más realista intentar que su código pase a través de ellas con cero advertencias.

En ocasiones, puede haber casos en los que un linter se quejará de algo que haya hecho intencionalmente; por ejemplo, sabe que siempre debe usarlo, ===pero solo esta vez tiene una buena razón para hacerlo ==. Pero incluso entonces, con ESLint tiene la opción de especificar eslint-disablealrededor de la línea en cuestión para que pueda tener una prueba de pelusa aprobada con cero advertencias, con el resto de su código obedeciendo la regla. (¡simplemente no hagas ese tipo de cosas con demasiada frecuencia!)


[RESPUESTA ORIGINAL SIGUE]

Por supuesto, use JSLint. Pero no se obsesione con los resultados y con la fijación de todo lo que advierte. Le ayudará a mejorar su código y le ayudará a encontrar posibles errores, pero no todo lo que JSLint se queja resulta ser un problema real, así que no sienta que tiene que completar el proceso con cero advertencias.

Casi cualquier código Javascript con una longitud o complejidad significativa producirá advertencias en JSLint, sin importar qué tan bien esté escrito. Si no me cree, intente ejecutar algunas bibliotecas populares como JQuery a través de él.

Algunas advertencias de JSLint son más valiosas que otras: aprenda cuáles hay que tener en cuenta y cuáles son menos importantes. Se debe considerar cada advertencia, pero no se sienta obligado a corregir su código para borrar cualquier advertencia dada; está perfectamente bien mirar el código y decidir que estás contento con él; Hay momentos en que las cosas que a JSlint no le gustan son en realidad lo correcto.


3
La mejor parte de jsHint es que tiene banderas para aceptar jQuery y no es molesto / estricto como jslint. Por ejemplo: for (i = 0; i < dontEnumsLength; i++)tira Unexpected '++'donde está bien. etc.
RaphaelDDL

2
Por favor, no ignore las reglas, esto es lo peor que podría hacer con linter. Simplemente configúrelo, o si no puede hacerlo, cámbielo. JSHint y CSJs combinación es fantástica
AuthorProxy

JSHint dice "Esperaba una asignación o llamada de función y en su lugar vio una expresión" a un ternario utilizado solo para operaciones. Documentación de Mozilla: dice "También puede usar evaluaciones ternarias en espacio libre para realizar diferentes operaciones". developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/… @AuthorProxy Voy por Mozilla e ignoro JSHint. Lo siento.
rocío

1
En este momento, parece que ESLint es la dirección general de la industria, junto con configuraciones populares como airbnb.
jinglesthula

369

tl; dr comida para llevar :

Si está buscando un estándar muy alto para usted o su equipo, JSLint. Pero no es necesariamente EL estándar, solo un estándar, algunos de los cuales nos llegan dogmáticamente de un dios javascript llamado Doug Crockford. Si quiere ser un poco más flexible, o tener algunos viejos profesionales en su equipo que no aceptan las opiniones de JSLint, o van y vienen entre JS y otros idiomas de la familia C de forma regular, pruebe JSHint.

versión larga :

El razonamiento detrás de la bifurcación explica bastante bien por qué existe JSHint:

http://badassjs.com/post/3364925033/jshint-an-community-driven-fork-of-jslint http://anton.kovalyov.net/2011/02/20/why-i-forked-jslint-to -jshint /

Así que supongo que la idea es que es "impulsado por la comunidad" en lugar de Crockford. En la práctica, JSHint es generalmente un poco más indulgente (o al menos configurable o agnóstico) en algunas "opiniones" sintácticas estilísticas y menores en las que JSLint es muy exigente.

Como ejemplo, si cree que tanto A como B a continuación están bien, o si desea escribir código con uno o más de los aspectos de A que no están disponibles en B, JSHint es para usted. Si crees que B es la única opción correcta ... JSLint. Estoy seguro de que hay otras diferencias, pero esto destaca algunas.

A) Pasa JSHint fuera de la caja - falla JSLint

(function() {
  "use strict";
  var x=0, y=2;
  function add(val1, val2){
    return val1 + val2;
  }
  var z;
  for (var i=0; i<2; i++){
    z = add(y, x+i);
  }
})();

B) Pasa tanto JSHint como JSLint

(function () {
    "use strict";
    var x = 0, y = 2, i, z;
    function add(val1, val2) {
       return val1 + val2;
    }
    for (i = 0; i < 2; i += 1) {
        z = add(y, x + i);
    }
}());

Personalmente, encuentro que el código JSLint es muy agradable de ver, y las únicas características duras con las que no estoy de acuerdo son su odio a más de una declaración var en una función y a var i = 0declaraciones for-loop , y algunos de los requisitos de espacios en blanco para declaraciones de funciones .

Creo que algunas de las cosas de espacios en blanco que aplica JSLint no son necesariamente malas, pero no están sincronizadas con algunas convenciones de espacios en blanco bastante estándar para otros idiomas de la familia (C, Java, Python, etc.), que a menudo son seguido como convenciones en Javascript también. Como estoy escribiendo en varios de estos idiomas durante todo el día y trabajando con miembros del equipo que no les gusta el espacio en blanco al estilo Lint en nuestro código, creo que JSHint es un buen equilibrio. Captura cosas que son un error legítimo o una forma realmente mala, pero no me ladra como lo hace JSLint (a veces, en formas que no puedo deshabilitar) por las opiniones estilísticas o nitpicks sintácticos que no me importan.

Muchas buenas bibliotecas no son Lint'able, lo que para mí demuestra que hay algo de verdad en la idea de que parte de JSLint se trata simplemente de impulsar 1 versión de "buen código" (que es, de hecho, buen código). Pero, de nuevo, las mismas bibliotecas (u otras buenas) probablemente tampoco sean insinuables, así que, touché.


11
... Debo admitir que me ha decepcionado la calidad poco profesional de los consejos que recientemente he visto proliferar con respecto a los estilos de codificación para JS (y CSS, por cierto). Es como si el enamoramiento con un idioma específico hubiera anulado las necesidades de los profesionales no expertos (es decir, el público objetivo). Es una lástima teniendo en cuenta que necesitan buenos consejos, y seguirán ciegamente y perpetuarán lo que se promocione como la mejor práctica, sin saber nada mejor. A menudo es incompatible con otros estándares adoptados por comunidades de usuarios más establecidas para otros idiomas. :(
Lee Kowalkowski

67
@LeeKowalkowski La razón por la que JSLint desalienta for (var i = 0; ...; i++)es porque no hace que el ciclo sea autónomo. El alcance de ies la función. Parece que la sintaxis está creando un alcance de bloque, pero no lo es y eso lleva a los programadores de JavaScript menos experimentados y a las personas que escriben en varios idiomas a entender mal el alcance de una variable y eso puede provocar errores sutiles. Puede que a muchos de nosotros (incluido yo mismo) no nos guste cómo se ve poner todas las declaraciones en la parte superior, pero es un buen recordatorio de que JavaScript no tiene alcance de bloque.
Mark Evans

25
@MarkEvans Es independiente de la vista que si movió solo el bucle a otra función, ino se volverá global de forma accidental. El hecho de que el iámbito de la función no sea el ámbito de bloque no es una razón suficiente para declarar variables en la parte superior, las variables siempre deben declararse lo más cerca posible del lugar donde se usan ( programmers.stackexchange.com/questions/56585/… ).
Lee Kowalkowski

17
@ MarkEvans Creo que te estás centrando demasiado en los detalles de implementación del lenguaje. Los estándares de programación deben ser para humanos, no para compiladores. La confianza en una herramienta de análisis de código estático para detectar dificultades comunes no es un reemplazo para adoptar buenos hábitos que los eviten en primer lugar. No puedo entender una razón por la cual una variable iteradora para un bucle simple debe declararse a cualquier distancia del bucle que lo requiere. Muchos estándares de codificación para otros idiomas dicen declarar variables lo más cerca posible de dónde se usan, para facilitar la lectura. No he visto una buena razón para no hacer esto en JS.
Lee Kowalkowski

11
El uso de una variable iteradora fuera de un bucle es lo que un linter debe verificar.
Lee Kowalkowski

61

Hay otro "jugador" maduro y desarrollado activamente en el frente de linux de javascript ESLint:

ESLint es una herramienta para identificar e informar sobre patrones encontrados en el código ECMAScript / JavaScript. En muchos sentidos, es similar a JSLint y JSHint con algunas excepciones:

  • ESLint usa Esprima para el análisis de JavaScript.
  • ESLint usa un AST para evaluar patrones en el código.
  • ESLint es completamente conectable, cada regla es un complemento y puede agregar más en tiempo de ejecución.

Lo que realmente importa aquí es que es extensible a través de complementos / reglas personalizados . Ya hay varios complementos escritos para diferentes propósitos. Entre otros , hay:

Y, por supuesto, puede usar la herramienta de compilación que prefiera para ejecutar ESLint:


1
El valor de tener un linter que se ejecuta en su editor mientras escribe no puede ser subestimado. ESLint se usa de esta manera ampliamente. Nunca he oído hablar de JSLint o JSHint editor de soporte (1 punto de datos anecdóticos).
jinglesthula

17

Tuve la misma pregunta hace un par de semanas y estaba evaluando tanto JSLint como JSHint.

Contrariamente a las respuestas en esta pregunta, mi conclusión no fue:

Por supuesto, use JSLint.

O:

Si está buscando un estándar muy alto para usted o su equipo, JSLint.

Como puede configurar casi las mismas reglas en JSHint que en JSLint. Por lo tanto, diría que no hay mucha diferencia en las reglas que podrías lograr.

Entonces, las razones para elegir una sobre otra son más políticas que técnicas.

Finalmente hemos decidido ir con JSHint por las siguientes razones:

  • Parece ser más configurable que JSLint.
  • Parece definitivamente más impulsado por la comunidad en lugar de un espectáculo de un solo hombre (no importa cuán genial sea The Man ).
  • JSHint coincidió con nuestro estilo de código OOTB mejor que JSLint.

1
Gracias por una respuesta breve y concisa. Esto resolvió mis espacios en blanco sobre el problema.
akauppi

13

Haría una tercera sugerencia, Google Closure Compiler (y también Closure Linter ). Puedes probarlo en línea aquí .

El compilador de cierre es una herramienta para hacer que JavaScript se descargue y se ejecute más rápido. Es un verdadero compilador para JavaScript. En lugar de compilar desde un lenguaje fuente a un código de máquina, compila desde JavaScript para mejorar JavaScript. Analiza tu JavaScript, lo analiza, elimina el código muerto y reescribe y minimiza lo que queda. También verifica la sintaxis, las referencias de variables y los tipos, y advierte sobre los errores comunes de JavaScript.


44
¿Qué recoge el compilador de cierre que el linter no?
James McMahon

44
No veo una sola advertencia generada por esta herramienta, cuando seguramente debería. JSLint y JSHint producen tantas advertencias para la misma entrada, que ambas dan "demasiados errores".
wallyk

66
Usamos el cierre en un proyecto reciente y no lo volveríamos a hacer. el linter no se puede configurar para desactivar ciertas comprobaciones (muchas de las cuales son cosas que no le interesarán) y el compilador realmente solo paga si trabaja exclusivamente con bibliotecas amigables para el cierre (de las cuales realmente no hay cualquiera fuera de google's).
Robert Levy

44
Esto no se refiere a Google Closure Comepiler per se, pero las herramientas de Google siempre deben considerarse con un grano de sal. Están diseñados para resolver los objetivos particulares de Google, y pueden no coincidir con sus objetivos.
Pacerier

@RobertLevy gracias por comentar sobre su experiencia que tuvo ... Estaba leyendo la guía de estilo de google para javascript y me recomendó el compilador de cierre como su programa de pelusa. pero ahora veo que hay otros como jslint y jshint
Trevor Boyd Smith

13

Prefacio: Bueno, eso se intensificó rápidamente. Pero decidió sacarlo adelante. Que esta respuesta sea útil para usted y otros lectores.

Me dejé llevar un poco aquí

Sugerencia de código

Si bien JSLint y JSHint son buenas herramientas para usar, a lo largo de los años he llegado a apreciar lo que mi amigo @ugly_syntax llama:

Espacio de diseño más pequeño .

Este es un principio general, al igual que un "monje zen", que limita las elecciones que uno tiene que hacer, uno puede ser más productivo y creativo.

Por lo tanto, mi estilo de código JS de configuración cero favorito actual:

StandardJS .

ACTUALIZACIÓN :

El flujo ha mejorado mucho. Con él, puede agregar tipos a su JS con lo que le ayudará a prevenir muchos errores. Pero también puede mantenerse fuera de su camino, por ejemplo, cuando se interconecta JS sin tipo. ¡Darle una oportunidad!

Inicio rápido / TL; DR

Agregar standardcomo dependencia a su proyecto

npm install --save standard

Luego package.json, agregue el siguiente script de prueba:

"scripts": {
    "test": "node_modules/.bin/standard && echo put further tests here"
},

Para la salida snazzier mientras que el desarrollo, npm install --global snazzyy ejecutarlo en lugar de npm test.

Nota: Verificación de tipo versus Heurística

Mi amigo cuando mencionó el espacio de diseño se refirió a Elm y le animo a que pruebe ese idioma.

¿Por qué? De hecho, JS está inspirado en LISP, que es una clase especial de idiomas, que no tiene tipo . Lenguajes como Elm o Purescript son lenguajes de programación funcional escritos .

Escriba restringir su libertad para que el compilador pueda verificar y guiarlo cuando termine violando el lenguaje o las reglas de su propio programa; independientemente del tamaño (LOC) de su programa.

Recientemente, un colega junior implementó una interfaz reactiva dos veces: una vez en Elm, una vez en React; Eche un vistazo para tener una idea de lo que estoy hablando.

Compare Main.elm(escrito) ⇔ index.js(sin tipo, sin pruebas)

(Nota: el código React no es idiomático y podría mejorarse)

Un comentario final

La realidad es que JS no está tipificado. ¿Quién soy para sugerirte programación escrita ?

Verá, con JS estamos en un dominio diferente: liberados de los tipos, podemos expresar fácilmente cosas que son difíciles o imposibles de dar a un tipo adecuado (lo que ciertamente puede ser una ventaja).

Pero sin tipos hay poco para mantener nuestros programas bajo control, por lo que nos vemos obligados a introducir pruebas y (en menor medida) estilos de código.

Le recomiendo que mire LISP (por ejemplo, ClojureScript ) en busca de inspiración e invierta en probar sus códigos. Lea El camino del subgrupo para hacerse una idea.

Paz.


¿Por qué el voto negativo? Ciertamente no me importa, pero como OP escribió "me está ayudando a escribir mejor JavaScript" ¿Creo que esta es una respuesta útil? ¿Qué piensas?
cables el

1
no está relacionado con los votos negativos, pero sus enlaces Main.elm e index.js son 404s
cs01 el

1
La pregunta era claramente jslint o jshint, sin pedir alternativas.
jzacharuk

1
El gif merece un voto a favor.
sr9yar

8

Bueno, en lugar de hacer configuraciones manuales de pelusa, podemos incluir todas las configuraciones de pelusa en la parte superior de nuestro archivo JS, por ejemplo

Declare todas las var globales en ese archivo como:

/*global require,dojo,dojoConfig,alert */

Declare todos los ajustes de pelusa como:

/*jslint browser:true,sloppy:true,nomen:true,unparam:true,plusplus:true,indent:4 */

Espero que esto te ayudará :)


1

También hay otra alternativa desarrollada activamente: JSCS : estilo de código JavaScript :

JSCS es una interfaz de estilo de código para imponer mediante programación su guía de estilo. Puede configurar JSCS para su proyecto en detalle utilizando más de 150 reglas de validación, que incluyen ajustes preestablecidos de guías de estilo populares como jQuery, Airbnb, Google y más.

Viene con múltiples ajustes preestablecidos entre los que puede elegir simplemente especificando preseten el .jscsrcarchivo de configuración y personalizarlo: anular, habilitar o deshabilitar cualquier regla:

{
    "preset": "jquery",
    "requireCurlyBraces": null
}

También hay complementos y extensiones creados para editores populares.

Ver también:

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.