Comment puis-je faire en sorte qu'Express produise un HTML bien formaté?

165

Lors de l'utilisation d'Express pour Node.js, j'ai remarqué qu'il génère le code HTML sans aucun caractère de nouvelle ligne ni tabulation. Bien qu'il puisse être plus efficace à télécharger, il n'est pas très lisible pendant le développement.

node.js express pug pretty-print Stephen
la source

313

Dans votre main app.jsou ce qui est à sa place:

Express 4.x

if (app.get('env') === 'development') {
  app.locals.pretty = true;
}

Express 3.x

app.configure('development', function(){
  app.use(express.errorHandler());
  app.locals.pretty = true;
});

Express 2.x

app.configure('development', function(){
  app.use(express.errorHandler());
  app.set('view options', { pretty: true });
});

J'ai mis la jolie impression developmentparce que vous voudrez plus d'efficacité avec le `` laid '' production. Assurez-vous de définir la variable d'environnement NODE_ENV=productionlorsque vous déployez en production. Cela peut être fait avec un shscript que vous utilisez dans le champ «script» de package.jsonet exécuté pour démarrer.

Express 3 a changé cela parce que:

Le paramètre «options d'affichage» n'est plus nécessaire, app.locals sont les variables locales fusionnées avec celles de res.render (), donc [app.locals.pretty = true équivaut à transmettre res.render (view, {pretty : vrai }).

EhevuTov
la source

1

Veuillez modifier la réponse acceptée car c'est la bonne réponse à ce jour.

Val

Cela a fonctionné, mais je devais installer un tas de dépendances supplémentaires, à savoir promise, uglify-js, csset lexical-scopeavant qu'elle ne se présenterait à nouveau (il construire, mais accident sur demande en premier). J'ai seulement ajouté cette ligne.

CWSpear

2

Comment faire cela dans Express 4.x?

Antonio Salvati

3

@AntonioSalvati tryapp.locals.pretty = true

Huei Tan

1

C'est une réponse géniale, exactement ce que je recherchais. C'est rafraîchissant de voir comment cela est fait pour différentes versions d'Express. J'ai recherché d'autres problèmes et trouvé des réponses qui ne mentionnaient pas la version d'Express pour laquelle il s'agissait.

SnowInferno

50

Pour une sortie HTML "joli format" dans Jade / Express:

app.set('view options', { pretty: true });

Jonathan Julian
la source

3

Excellente solution! Je souhaite qu'il corresponde également aux niveaux de retrait entre la mise en page / la page.

Stephen

34

Dépassé. Express 3 fonctionne un peu différemment, voir l'article écrit par EhevuTov.

7

Dans express 4.x, ajoutez ceci à votre app.js:

if (app.get('env') === 'development') {
  app.locals.pretty = true;
}

heureux
la source

J'ai travaillé ici - merci! Dans mon cas, je n'avais pas l'ensemble var 'env'. Vous pouvez l'ajouter au fichier .js principal avec cette seule ligne: process.env.NODE_ENV = 'development';

Gene Bo

Pourquoi donnez-vous cette réponse si d'autres réponses donnent déjà cette solution?

nbro

J'ai été le premier à donner cette réponse, l'autre réponse a été mise à jour par la suite.

disponible

6

Il existe une option "jolie" dans Jade lui-même:

var jade = require("jade");

var jade_string = [
    "!!! 5",
    "html",
    "    body",
    "        #foo  I am a foo div!"
].join("\n");

var fn = jade.compile(jade_string, { pretty: true });
console.log( fn() );

... vous obtient ceci:

<!DOCTYPE html>
<html>
  <body>
    <div id="foo">I am a foo div!
    </div>
  </body>
</html>

Je ne semble pas être très sophistiqué, mais pour ce que je recherche - la possibilité de déboguer le HTML produit par mes vues - c'est très bien.

Kevin Frost
la source

3

Si le débogage HTML est tout ce que vous recherchez, vous pouvez toujours simplement «inspecter» le HTML à l'aide de l'inspecteur Webkit ou Firebug. Cela génère toujours un arbre DOM parfaitement formaté.

Roshambo

@Roshambo vrai, mais naviguer dans l'arborescence prend du temps, quand vous pouvez simplement scanner la source plus rapidement (parfois)

Val

4

Si vous utilisez la console pour compiler, vous pouvez utiliser quelque chose comme ceci:

$ jade views/ --out html --pretty

Tom Sarduy
la source

0

Avez-vous vraiment besoin de HTML bien formaté? Même si vous essayez de produire quelque chose qui a l'air bien dans un éditeur, cela peut sembler étrange dans un autre. Certes, je ne sais pas pourquoi vous avez besoin du code HTML, mais j'essaierais d'utiliser les outils de développement Chrome ou Firebug pour Firefox. Ces outils vous donnent une bonne vue du DOM au lieu du html.

Si vous avez vraiment besoin d'un html bien formaté, essayez d'utiliser EJS au lieu de jade. Cela voudrait dire que vous devrez formater le html vous-même.

Oscar Kilhed
la source

J'aime mieux les ejs maintenant que je travaille dessus depuis un moment. Je suppose que je suis juste très particulier sur certaines choses.

Stephen

0

vous pouvez utiliser tidy

prenez par exemple ce fichier jade:

foo.jade

h1 MyTitle

p
  a(class='button', href='/users/') show users

table
  thead
    tr
      th Name
      th Email
  tbody
    - var items = [{name:'Foo',email:'foo@bar'}, {name:'Bar',email:'bar@bar'}]
    - each item in items
      tr
        td= item.name
        td= item.email

maintenant vous pouvez le traiter avec le nœud testjade.js foo.jade> output.html :

testjade.js

var jade = require('jade');
var jadeFile = process.argv[2];
jade.renderFile(__dirname + '/' + jadeFile, options, function(err, html){
    console.log(html);
});

vous donnera s.th. comme:

output.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>My Title</title><link rel="stylesheet" href="https://stackoverflow.com/stylesheets/style.css"/><script type="text/javascript" src="../js/jquery-1.4.4.min.js"></script></head><body><div id="main"><div ><h1>MyTitle</h1><p><a href="/users/" class="button">show users</a></p><table><thead><tr><th>Name</th><th>Email</th></tr></thead><tbody><tr><td>Foo</td><td>foo@bar</td></tr><tr><td>Bar</td><td>bar@bar</td></tr></tbody></table></div></div></body></html

puis l'exécuter via tidy avec tidy -m output.html entraînera:

output.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content=
"HTML Tidy for Linux (vers 25 March 2009), see www.w3.org" />
<title>My Title</title>
<link rel="stylesheet" href="/stylesheets/style.css" type=
"text/css" />
<script type="text/javascript" src="../js/jquery-1.4.4.min.js">
</script>
</head>
<body>
<div id="main">
<div>
<h1>MyTitle</h1>
<p><a href="/users/" class="button">show users</a></p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Foo</td>
<td>foo@bar</td>
</tr>
<tr>
<td>Bar</td>
<td>bar@bar</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>

oliver
la source

0

en s'appuyant sur la suggestion d'oliver, voici un moyen rapide et sale de voir le html embelli

1) télécharger tidy

2) ajoutez ceci à votre .bashrc

function tidyme() {
curl $1 | tidy -indent -quiet -output tidy.html ; open -a 'google chrome' tidy.html
}

3) courir

$ tidyme localhost:3000/path

la commande open ne fonctionne que sur les macs. J'espère que cela pourra aider!

ebaum
la source

ne connaissait pas l'option de retrait ... sympa! J'utilisais le formateur intégré de vim.

oliver

0

Dans express 4.x, ajoutez ceci à votre app.js:

app.locals.pretty = app.get('env') === 'development';

petkovic43
la source

Comment puis-je faire en sorte qu'Express produise un HTML bien formaté?

Réponses: