Coloration en fonction de la portée des variables,
une alternative à la coloration syntaxique

On connait tous la coloration syntaxique liée à la syntaxe du langage afin d'améliorer la lisibilité de notre code pour mieux l'appréhender.
Mais parfois, ne serait-il pas mieux de surligner le code en fonction de la portée des variables plutôt que de mettre en valeur la syntaxe ?

C'est une idée proposée à la base par Douglas Crockford (JSON, JSLint) via un post sur Google+. C'est d'ores et déjà intégré à JSLint (plus de détails sur l'utilisation dans le post de D. Crockford) et Daniel Lamb (un ingénieur Front-End) propose une mise en application.

Voici un exemple avec quatre niveaux d'imbrications.

Coloration syntaxique :
Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
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
var monNameSpace = (function () {
  var maVar;
  maVar = "scope 1";
 
  var direBonjour = function() {
    console.log(maVar);
  };
 
  return {
    setMaVar: function(valeur){
      maVar = valeur;
    },
 
    getMaVar: function(){
      return maVar;
    },
 
    log: function() {
      var autreVar = "Hello";
      function direBonjourComment(methode) {
        console.log(methode);
      }
      direBonjourComment(autreVar);
      direBonjour();
    }
  };
 
})();
 
monNameSpace.log();

Coloration en fonction de la portée :


Si vous utilisez Vim, cela serait actuellement en cours d'intégration.

Sources :
Google+ de Paul Irish
Exemples sur GitHub