validador setup script jshintrc eslinter javascript jslint jshint

setup - ¿Debo usar la validación de JSLint o JSHint JavaScript?



setup eslint (8)

Bueno, en lugar de hacer ajustes manuales de pelusas, podemos incluir todos los ajustes de pelusas en la parte superior de nuestro propio archivo JS, por ejemplo:

Declara todas las variantes globales en ese archivo como:

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

Declara todos los ajustes de pelusa como:

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

Espero que esto te ayudará :)

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

Ahora me he encontrado con JSHint , una bifurcación de JSLint .
Así que me pregunto por las aplicaciones web, que son muchas de las aplicaciones de JavaScript, que es la herramienta de validación mejor o más aplicable contra la cual 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 javascript.

Campo de golf:

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

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

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

Closure Compiler es una herramienta para realizar descargas de JavaScript y ejecutarlas más rápido. Es un verdadero compilador para JavaScript. En lugar de compilar desde un código fuente a código de máquina, se compila de JavaScript a JavaScript mejor. Analiza su JavaScript, lo analiza, elimina el código muerto y vuelve a escribir y minimiza lo que queda. También verifica la sintaxis, las referencias de variables y los tipos, y advierte sobre las fallas comunes de JavaScript.

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

ESLint es una herramienta para identificar y reportar 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 utiliza 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 se puede extender a través de complementos / reglas personalizados . Ya hay múltiples complementos escritos para diferentes propósitos. Entre others , hay:

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

Prólogo: Bueno, eso se intensificó rápidamente. Pero decidí sacarlo a través. Que esta respuesta sea de ayuda para usted y otros lectores.

Indicación 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, muy parecido a 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 actual:

StandardJS .

ACTUALIZACIÓN :

Flow 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

Añade standard como dependencia a tu proyecto.

npm install --save standard

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

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

Para una salida más deslumbrante durante el desarrollo, npm install --global snazzy y ejecuta en lugar de la npm test de npm test .

Nota: Tipo de verificación versus Heurística

Mi amigo al mencionar el espacio de diseño referido a Elm y lo invito a probar ese idioma.

¿Por qué? De hecho, JS está inspirado en LISP, que es una clase especial de idiomas, que pasa a ser untyped . Los lenguajes como Elm o Purescript son lenguajes de programación funcionales escritos .

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

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

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

(ps. note que el código React no es idiomático y podría mejorarse)

Una observación final,

La realidad es que JS está desvinculado. ¿Quién soy yo para sugerirte la programación mecanografiada ?

Vea, 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 consulte LISP (por ejemplo, ClojureScript ) para inspirarse e invierta en probar sus códigos. Lee el camino de la subestaca para tener una idea.

Paz.

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

JSCS es una guía de estilo de código para aplicar 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, incluidos ajustes preestablecidos de populares guías de estilo como jQuery, Airbnb, Google y más.

Viene con varios presets que puede elegir al simplemente especificar el preset en el archivo de configuración .jscsrc y personalizarlo: anule, habilite o inhabilite cualquier regla:

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

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

Ver también:

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

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

Por todos los medios usar JSLint.

O:

Si estás buscando un estándar muy alto para ti o para tu 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.

Así que las razones para elegir uno sobre otro son más políticas que técnicas.

Finalmente hemos decidido ir con JSHint debido a las siguientes razones:

  • Parece ser más configurable que JSLint.
  • Se ve definitivamente más orientado a la comunidad en lugar de un espectáculo de un solo hombre (no importa cuán bueno sea The Man ).
  • JSHint combinó nuestro estilo de código OOTB mejor que JSLint.

tl; dr takeaway :

Si estás buscando un estándar muy alto para ti o para tu equipo, JSLint. Pero no es necesariamente EL estándar, solo un estándar, algunos de los cuales nos llegan dogmáticamente de un dios de javascript llamado Doug Crockford. Si quiere ser un poco más flexible, o tener algunos profesionales antiguos en su equipo que no se adhieran a las opiniones de JSLint, o que vayan y vengan entre JS y otros lenguajes de la familia C de forma regular, intente 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 impulsado por 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 menores y estilísticas en las que JSLint es un factor de enredo.

Como ejemplo, si cree que tanto la A como la B de abajo 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 resalta 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 JSHint y 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, el código JSLint es muy agradable de ver, y las únicas características difíciles con las que no estoy de acuerdo son su odio de más de una declaración var en una función y de las declaraciones var i = 0 del bucle for , y algunos de los espacios en blanco. Cumplimientos de declaraciones de funciones.

Algunas de las cosas de espacio en blanco que JSLint aplica, no necesariamente son malas, sino que están desincronizadas con algunas convenciones de espacio en blanco bastante estándar para otros idiomas de la familia (C, Java, Python, etc.), que a menudo son Siguió como convenciones en Javascript también. Desde que escribo en varios de estos idiomas a lo largo del día, y trabajando con miembros del equipo a quienes no les gustan los espacios en blanco de estilo Lint en nuestro código, considero que JSHint es un buen equilibrio. Atrapa cosas que son un error legítimo o una forma realmente mala, pero no me ladran como JSLint (a veces, en formas que no puedo deshabilitar) para las opiniones estilísticas o los punzones sintácticos que no me interesan.

Muchas bibliotecas buenas no son Lint''able, lo que para mí demuestra que hay algo de cierto en la idea de que algunas de JSLint son simplemente para empujar una versión de "buen código" (que es, de hecho, un buen código). Pero, de nuevo, las mismas bibliotecas (u otras buenas) probablemente tampoco sean recomendables, así que, toque.

[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 esta pregunta originalmente, JSLint era la principal herramienta de alineación de JavaScript. JSHint era una nueva bifurcación de JSLint, pero todavía no se había apartado mucho del original.

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

En mi respuesta original, dije que no debería obligarse a cumplir las reglas de JSLint; Siempre que haya entendido por qué estaba emitiendo una advertencia, podría decidir si cambiar el código para resolver la advertencia o no.

Con el conjunto de reglas ultra estrictas 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 hoy, es una propuesta mucho más realista tratar de que su código pase a través de ellas con cero advertencias.

Es posible que, ocasionalmente, haya casos en los que un interlocutor se queje de algo que haya hecho intencionalmente, por ejemplo, sabe que siempre debe usar === pero solo esta vez tiene una buena razón para usar == . Pero incluso entonces, con ESLint tiene la opción de especificar eslint-disable alrededor de la línea en cuestión para que pueda pasar la prueba de pelusa con cero advertencias, y el resto de su código obedece a la regla. (¡No hagas eso con demasiada frecuencia!)

[RESPUESTA ORIGINAL SIGUE]

Por todos los medios usar JSLint. Pero no se obsesione con los resultados ni con arreglar todo lo que advierte. Le ayudará a mejorar su código y lo ayudará a encontrar posibles errores, pero no todo lo que JSLint reclama resulta ser un problema real, así que no sienta que debe completar el proceso sin advertencias.

Casi cualquier código Javascript con una longitud o complejidad significativa producirá advertencias en JSLint, sin importar qué tan bien escrito esté. 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: descubra cuáles deben vigilarse y cuáles son menos importantes. Se deben tener en cuenta todas las advertencias, pero no se sienta obligado a corregir su código para eliminar cualquier advertencia; 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.