Je valide actuellement mon JavaScript par rapport à JSLint et je progresse, cela m'aide à écrire un meilleur JavaScript - en particulier en travaillant avec la bibliothèque Jquery.

Je suis maintenant tombé sur JSHint , un fork de JSLint .
Je me demande donc pour les applications Web, qui sont très largement pilotées par JavaScript, qui est l'outil de validation le meilleur ou le plus applicable contre lequel travailler:

• JSLint ou JSHint?

Je veux décider maintenant d'un mécanisme de validation et aller de l'avant, l'utiliser pour la validation côté client.

Et la différence entre jshint et jslint? Veuillez expliquer dans un seul exemple javascript.

Liens:

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

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

[MODIFIER]
Cette réponse a été modifiée. Je laisse la réponse originale ci-dessous pour le contexte (sinon les commentaires n'auraient pas de sens).

Lorsque cette question a été posée à l'origine, JSLint était le principal outil de linting pour JavaScript. JSHint était une nouvelle fourche de JSLint, mais n'avait pas encore beaucoup divergé de l'original.

Depuis lors, JSLint est resté à peu près statique, tandis que JSHint a beaucoup changé - il a jeté de nombreuses règles plus antagonistes de JSLint, a ajouté toute une série de nouvelles règles et est généralement devenu plus flexible. De plus, un autre outil ESLint est maintenant disponible, qui est encore plus flexible et propose plus d'options de règles.

Dans ma réponse originale, j'ai dit que vous ne devriez pas vous forcer à vous en tenir aux règles de JSLint; tant que vous comprenez pourquoi il lance un avertissement, vous pouvez vous-même décider si vous souhaitez modifier le code pour résoudre l'avertissement ou non.

Avec l'ensemble de règles ultra-strict de JSLint de 2011, c'était un conseil raisonnable - j'ai vu très peu de jeux de codes JavaScript qui pouvaient passer un test JSLint. Cependant, avec les règles plus pragmatiques disponibles dans les outils JSHint et ESLint d'aujourd'hui, il est beaucoup plus réaliste d'essayer de faire passer votre code à travers eux sans aucun avertissement.

Il peut parfois y avoir des cas où un linter se plaindra de quelque chose que vous avez fait intentionnellement - par exemple, vous savez que vous devez toujours utiliser, ===mais juste cette fois, vous avez une bonne raison d'utiliser ==. Mais même dans ce cas, avec ESLint, vous avez la possibilité de spécifier eslint-disableautour de la ligne en question afin que vous puissiez toujours passer un test de charpie avec zéro avertissements, le reste de votre code obéissant à la règle. (ne faites pas ce genre de chose trop souvent!)

[RÉPONSE ORIGINALE SUIT]

Utilisez par tous les moyens JSLint. Mais ne vous attardez pas sur les résultats et sur la correction de tout ce qui met en garde. Cela vous aidera à améliorer votre code et vous aidera à trouver des bogues potentiels, mais tout ce dont JSLint se plaint ne se révèle pas être un vrai problème, alors ne vous sentez pas obligé de terminer le processus sans aucun avertissement.

À peu près n'importe quel code Javascript avec une longueur ou une complexité significative produira des avertissements dans JSLint, quelle que soit sa qualité d'écriture. Si vous ne me croyez pas, essayez d'exécuter quelques bibliothèques populaires comme JQuery.

Certains avertissements JSLint ont plus de valeur que d'autres: découvrez ceux à surveiller et ceux qui sont moins importants. Chaque avertissement doit être pris en compte, mais ne vous sentez pas obligé de corriger votre code pour effacer un avertissement donné; il est tout à fait correct de regarder le code et de décider que vous en êtes satisfait; il y a des moments où les choses que JSlint n'aime pas sont en fait la bonne chose à faire.

tl; dr à emporter :

Si vous recherchez un niveau très élevé pour vous-même ou votre équipe, JSLint. Mais ce n'est pas nécessairement LA norme, juste une norme, dont certaines nous viennent dogmatiquement d'un dieu javascript nommé Doug Crockford. Si vous voulez être un peu plus flexible, ou avoir de vieux pros dans votre équipe qui n'acceptent pas les opinions de JSLint, ou qui font régulièrement des allers-retours entre JS et d'autres langages de la famille C, essayez JSHint.

version longue :

Le raisonnement derrière la fourche explique assez bien pourquoi JSHint existe:

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 /

Donc, je suppose que l'idée est que c'est «axé sur la communauté» plutôt que sur Crockford. Dans la pratique, JSHint est généralement un peu plus indulgent (ou au moins configurable ou agnostique) sur quelques "opinions" stylistiques et syntaxiques mineures sur lesquelles JSLint est tenace.

Par exemple, si vous pensez que les deux A et B ci-dessous sont bien, ou si vous voulez écrire du code avec un ou plusieurs des aspects de A qui ne sont pas disponibles dans B, JSHint est pour vous. Si vous pensez que B est la seule option correcte ... JSLint. Je suis sûr qu'il existe d'autres différences, mais cela en souligne quelques-unes.

A) réussit JSHint hors de la boîte - échoue 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) passe à la fois JSHint et 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);
    }
}());

Personnellement, je trouve le code JSLint très agréable à regarder, et les seules caractéristiques importantes avec lesquelles je ne suis pas d'accord sont sa haine de plus d'une déclaration var dans une fonction et des var i = 0déclarations for-loop , et certaines des mises en œuvre d'espaces blancs pour les déclarations de fonction .

Je trouve que certains des espaces blancs que JSLint applique ne sont pas nécessairement mauvais, mais pas synchronisés avec certaines conventions d'espaces assez standard pour d'autres langages de la famille (C, Java, Python, etc ...), qui sont souvent suivi comme conventions en Javascript aussi. Étant donné que j'écris dans plusieurs de ces langues tout au long de la journée et que je travaille avec des membres de l'équipe qui n'aiment pas les espaces blancs de style Lint dans notre code, je trouve que JSHint est un bon équilibre. Il attrape des choses qui sont un bug légitime ou une très mauvaise forme, mais ne m'aboie pas comme le fait JSLint (parfois, d'une manière que je ne peux pas désactiver) pour les opinions stylistiques ou les astuces syntaxiques dont je ne me soucie pas.

Beaucoup de bonnes bibliothèques ne sont pas Lint'able, ce qui pour moi démontre qu'il y a du vrai dans l'idée que certains de JSLint consistent simplement à pousser 1 version de "bon code" (qui est, en effet, un bon code). Mais là encore, les mêmes bibliothèques (ou d'autres bonnes) ne sont probablement pas non plus Hint'able, donc, touché.

Il y a un autre "joueur" mature et activement développé sur le devant du linting javascript - ESLint:

ESLint est un outil pour identifier et signaler les modèles trouvés dans le code ECMAScript / JavaScript. À bien des égards, il est similaire à JSLint et JSHint à quelques exceptions près:

• ESLint utilise Esprima pour l'analyse JavaScript.
• ESLint utilise un AST pour évaluer les modèles dans le code.
• ESLint est complètement enfichable, chaque règle est un plugin et vous pouvez en ajouter d'autres au moment de l'exécution.

Ce qui compte vraiment ici, c'est qu'il est extensible via des plugins / règles personnalisés . Il existe déjà plusieurs plugins écrits à des fins différentes. Entre autres , il y a:

• eslint-plugin-angular (applique certaines des directives du guide de style angulaire de John Papa )
• eslint-plugin-jasmine
• eslint-plugin-backbone

Et, bien sûr, vous pouvez utiliser l'outil de construction de votre choix pour exécuter ESLint:

• grunt-eslint
• gulp-eslint

J'avais la même question il y a quelques semaines et j'évaluais JSLint et JSHint.

Contrairement aux réponses à cette question, ma conclusion n'était pas:

Utilisez par tous les moyens JSLint.

Ou:

Si vous recherchez un niveau très élevé pour vous-même ou votre équipe, JSLint.

Comme vous pouvez configurer presque les mêmes règles dans JSHint que dans JSLint. Je dirais donc qu'il n'y a pas beaucoup de différence dans les règles que vous pourriez atteindre.

Les raisons de choisir l'une plutôt que l'autre sont donc plus politiques que techniques.

Nous avons finalement décidé d'utiliser JSHint pour les raisons suivantes:

• Semble être plus configurable que JSLint.
• Il semble nettement plus axé sur la communauté plutôt que sur une exposition individuelle (peu importe à quel point The Man est cool ).
• JSHint correspondait mieux à notre style de code OOTB que JSLint.

Je ferais une troisième suggestion, Google Closure Compiler (et aussi le Closure Linter ). Vous pouvez l'essayer en ligne ici .

Le compilateur de fermeture est un outil permettant d'accélérer le téléchargement et l'exécution de JavaScript. C'est un vrai compilateur pour JavaScript. Au lieu de compiler à partir d'un langage source vers du code machine, il compile à partir de JavaScript vers un meilleur JavaScript. Il analyse votre JavaScript, l'analyse, supprime le code mort et réécrit et minimise ce qui reste. Il vérifie également la syntaxe, les références de variables et les types, et met en garde contre les pièges JavaScript courants.

Avant-propos: Eh bien, cela a rapidement dégénéré. Mais j'ai décidé de passer au travers. Puisse cette réponse vous être utile, ainsi qu'à d'autres lecteurs.

Code Hinting

Bien que JSLint et JSHint soient de bons outils à utiliser, au fil des ans, j'ai appris ce que mon ami @ugly_syntax appelle:

espace de conception plus petit .

C'est un principe général, un peu comme un "moine zen", limitant les choix que l'on doit faire, on peut être plus productif et créatif.

Par conséquent, mon style de code JS zéro-configuration préféré actuel:

StandardJS .

MISE À JOUR :

Le débit s'est beaucoup amélioré. Avec lui, vous pouvez ajouter des types à votre JS avec vous aidera à éviter de nombreux bugs. Mais il peut également rester à l'écart, par exemple lors de l'interfaçage de JS non typé. Essaie!

Démarrage rapide / TL; DR

Ajouter en standardtant que dépendance à votre projet

npm install --save standard

Ensuite package.json, ajoutez le script de test suivant:

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

Pour une sortie plus brillante pendant le développement, npm install --global snazzyet exécutez-le à la place de npm test.

Remarque: vérification de type et heuristique

Mon ami en mentionnant Elm Design a fait référence à Elm et je vous encourage à essayer cette langue.

Pourquoi? JS est en fait inspiré par LISP, qui est une classe spéciale de langages, qui se trouve être non typé . Des langages tels que Elm ou Purescript sont des langages de programmation fonctionnels typés .

Tapez restreindre votre liberté afin que le compilateur puisse vérifier et vous guider lorsque vous finissez par violer la langue ou les règles de votre propre programme; quelle que soit la taille (LOC) de votre programme.

Un collègue junior a récemment implémenté une interface réactive à deux reprises: une fois dans Elm, une fois dans React; jetez un oeil pour avoir une idée de ce dont je parle.

Comparer Main.elm(tapé) ⇔ index.js(non typé, aucun test)

(ps. notez que le code React n'est pas idiomatique et pourrait être amélioré)

Une dernière remarque,

la réalité est que JS n'est pas typé. Qui suis-je pour vous proposer une programmation dactylographiée ?

Voyez, avec JS, nous sommes dans un domaine différent: libéré des types, nous pouvons facilement exprimer des choses difficiles ou impossibles à donner un type approprié (ce qui peut certainement être un avantage).

Mais sans types, il y a peu de choses à contrôler nos programmes, nous sommes donc obligés d'introduire des tests et (dans une moindre mesure) des styles de code.

Je vous recommande de vous inspirer de LISP (par exemple ClojureScript ) et d'investir dans le test de vos codes. Lire le chemin de la sous-pile pour se faire une idée.

Paix.

Eh bien, au lieu de faire des réglages manuels de charpie, nous pouvons inclure tous les réglages de charpie en haut de notre fichier JS lui-même, par exemple

Déclarez tous les var globaux dans ce fichier comme:

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

Déclarez tous les paramètres de peluches comme:

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

J'espère que cela vous aidera :)

Il existe également une autre alternative développée activement - JSCS - Style de code JavaScript :

JSCS est un linter de style de code pour appliquer par programme votre guide de style. Vous pouvez configurer JSCS pour votre projet en détail à l'aide de plus de 150 règles de validation, y compris des préréglages de guides de style populaires comme jQuery, Airbnb, Google, etc.

Il est livré avec plusieurs préréglages parmi lesquels vous pouvez choisir en spécifiant simplement le presetdans le .jscsrcfichier de configuration et en le personnalisant - remplacez, activez ou désactivez toutes les règles:

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

Il existe également des plugins et des extensions conçus pour les éditeurs populaires.

Regarde aussi:

• Code parfait, aucun effort