No hay nada de malo en usar $ en variables. No lo haría a propósito en cada variable, pero sigue siendo una sintaxis válida. jQuery es uno de los ejemplos donde $ se usa como nombre de variable. También es por eso que «Chrome dev tools no siempre ve que esto es un error de Javascript», porque no hay ningún error en primer lugar.
Si tienes miedo de escribir código como:
var demo = function demo() { var a = 123; ... $a = 456; // A new variable is created in global scope.}entonces tienes que usar un comprobador de estilo, como JSLint, JSHint o Google Closure Linter. ¿Cuál de esos? Depende de ti tomar una decisión. Para ayudarte con eso, aquí hay algunas notas:
Style
Google Closure Linter sigue la Guía de estilo JavaScript de Google, conocida por ser inteligentemente hecha. Usar un estilo conocido para JavaScript o cualquiera de los otros seis idiomas es una buena idea: cuando compartes tu código o contratas a un nuevo desarrollador, es probable que ya esté familiarizado con este estilo.
Muchos desarrolladores también están familiarizados con el estilo Douglas Crockford. Este estilo se explica en detalle en JavaScript: The Good Parts, un libro que vale la pena comprar cualquiera que trabaje con JavaScript.
En cuanto a JSHint, realmente no puedo encontrar qué convenciones se usan, y el sitio web en sí parece evitar hablar de ese tema. Tal vez me perdí algo.
Soporte por IDEs
Tanto JSLint como JSHint son compatibles con PhpStorm. Este es también el caso de Google Closure Linter.
Entorno
Google Closure Linter es una de una serie de herramientas. Si ya está utilizando el Compilador de cierre de Google o la biblioteca de cierre de Google, sería preferible elegir Closure Linter por encima de otras herramientas.
Rigor
JSLint es conocido por ser estricto. JSHint es más permisivo, lo que no siempre es bueno. Por ejemplo, una de las razones para bifurcar JSLint para JSHint se explica en un artículo que muestra código defectuoso que producirá un error en JSLint, pero no en JSHint:
/*global jQuery */// Example taken from jQuery 1.4.2 sourcejQuery.extend({ /* ... */ isEmptyObject: function( obj ) { for ( var name in obj ) { return false; } return true; } /* ... */});El código es malo, porque parece que JavaScript tiene un alcance de bloque, mientras que no lo tiene. Vea JavaScript: Las partes buenas, p. 102, Apéndice A: Partes horribles, Mira Telescópica. En otras palabras, mirando el código sin conocer el idioma, esperamos que name no sea visible fuera del bucle, mientras que permanecerá visible.
En cuanto a Google Closure Linter, creo que está en algún lugar entre JSLint y JSHint, pero no tengo suficiente información para respaldar eso.
Conclusión
Evitaría JSHint: es demasiado permisivo, lo que significa que no encontraría errores potenciales que otros linters detectarían. La guía de estilo que se utiliza es difícil de encontrar.
Entre JSLint y Google Closure Linter, la elección no es obvia. Ambos están escritos por expertos, ambos siguen una guía de estilo estricta y bien descrita que ya han seguido miles de desarrolladores. Use ambos durante algún tiempo, luego elija uno que sea más práctico para usted.
