Wie kann ich Express dazu bringen, gut formatiertes HTML auszugeben?

165

Bei der Verwendung von Express für Node.js habe ich festgestellt, dass der HTML-Code ohne Zeilenumbruchzeichen oder Tabulatoren ausgegeben wird. Obwohl das Herunterladen möglicherweise effizienter ist, ist es während der Entwicklung nicht sehr gut lesbar.

node.js express pug pretty-print Stephen
quelle

313

In Ihrer Haupt- app.jsoder was ist an seiner Stelle:

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 });
});

Ich habe den hübschen Druck eingefügt, developmentweil Sie mit dem 'hässlichen' mehr Effizienz erzielen möchten production. Stellen Sie sicher, dass Sie die Umgebungsvariable festlegen, NODE_ENV=productionwenn Sie in der Produktion bereitstellen. Dies kann mit einem shSkript erfolgen, das Sie im Feld 'Skript' von verwenden package.jsonund zum Starten ausführen.

Express 3 hat dies geändert, weil:

Die Einstellung "Ansichtsoptionen" ist nicht mehr erforderlich. App.locals sind die lokalen Variablen, die mit res.render () zusammengeführt werden. [App.locals.pretty = true ist also dasselbe wie das Übergeben von res.render (view, {pretty : wahr }).

EhevuTov
quelle

1

Bitte ändern Sie die akzeptierte Antwort in diese, da dies die richtige Antwort ist.

Val

Das funktionierte, aber ich hatte ein paar zusätzliche Abhängigkeiten zu installieren, nämlich promise, uglify-js, cssund lexical-scopebevor es wieder laufen würde (es wäre zu bauen, aber Absturz auf erster Anfrage). Ich habe nur diese eine Zeile hinzugefügt.

CWSpear

2

Wie geht das in Express 4.x?

Antonio Salvati

3

@ AntonioSalvati versuchenapp.locals.pretty = true

Huei Tan

1

Dies ist eine großartige Antwort, genau das, wonach ich gesucht habe. Es ist erfrischend zu sehen, wie dies für verschiedene Express-Versionen gemacht wird. Ich habe nach anderen Problemen gesucht und Antworten gefunden, in denen nicht erwähnt wurde, für welche Express-Version es sich handelt.

SnowInferno

50

Zur "hübschen Formatierung" der HTML-Ausgabe in Jade / Express:

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

Jonathan Julian
quelle

3

Tolle Lösung! Ich wünschte, es würde auch den Einrückungsstufen zwischen Layout / Seite entsprechen.

Stephen

34

Veraltet. Express 3 funktioniert etwas anders, siehe Beitrag von EhevuTov.

7

Fügen Sie dies in Express 4.x zu Ihrer app.js hinzu:

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

alarive
quelle

Arbeitete hier - danke! In meinem Fall hatte ich das 'env'-Var-Set nicht. Sie können es mit dieser einen Zeile zur Hauptdatei .js hinzufügen: process.env.NODE_ENV = 'development';

Gene Bo

Warum geben Sie diese Antwort, wenn andere Antworten diese Lösung bereits geben?

nbro

Ich war der erste, der diese Antwort gab, die andere Antwort wurde danach aktualisiert.

Alarive

6

In Jade selbst gibt es eine "hübsche" Option:

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() );

... bringt dir das:

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

Ich scheine nicht sehr raffiniert zu sein, aber für das, was ich suche - die Fähigkeit, den von meinen Ansichten erzeugten HTML-Code tatsächlich zu debuggen - ist das in Ordnung.

Kevin Frost
quelle

3

Wenn Sie nur nach dem Debuggen von HTML suchen, können Sie das HTML jederzeit mit dem Webkit oder dem Firebug-Inspektor überprüfen. Dadurch wird immer ein perfekt formatierter DOM-Baum generiert.

Roshambo

@ Roshambo wahr, aber das Navigieren durch den Baum ist zeitaufwändig, wenn Sie nur die Quelle schneller (manchmal) scannen können

Val

4

Wenn Sie die Konsole zum Kompilieren verwenden, können Sie Folgendes verwenden:

$ jade views/ --out html --pretty

Tom Sarduy
quelle

0

Benötigen Sie wirklich gut formatiertes HTML? Selbst wenn Sie versuchen, etwas auszugeben, das in einem Editor gut aussieht, kann es in einem anderen Editor seltsam aussehen. Zugegeben, ich weiß nicht, wofür Sie HTML benötigen, aber ich würde versuchen, die Chrome-Entwicklungstools oder den Firebug für Firefox zu verwenden. Mit diesen Tools erhalten Sie eine gute Ansicht des DOM anstelle des HTML-Codes.

Wenn Sie wirklich gut formatiertes HTML benötigen, verwenden Sie EJS anstelle von Jade. Das würde bedeuten, dass Sie das HTML selbst formatieren müssten.

Oscar Kilhed
quelle

Ich mag ejs jetzt besser, da ich eine Weile damit gearbeitet habe. Ich denke, ich bin nur sehr speziell in einigen Dingen.

Stephen

0

Sie können ordentlich verwenden

Nehmen Sie zum Beispiel diese Jade-Datei:

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

Jetzt können Sie es mit dem Knoten testjade.js foo.jade> output.html verarbeiten :

testjade.js

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

wird dir s.th. mögen:

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

Wenn Sie es dann mit tidy -m output.html durch tidy laufen lassen, erhalten Sie :

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
quelle

0

Aufbauend auf Olivers Vorschlag ist hier eine schnelle und schmutzige Möglichkeit, verschönertes HTML anzuzeigen

1) ordentlich herunterladen

2) Fügen Sie dies Ihrer .bashrc hinzu

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

3) laufen

$ tidyme localhost:3000/path

Der Befehl open funktioniert nur auf Macs. hoffentlich hilft das!

ebaum
quelle

wusste nicht über die Einrückungsoption ... schön! Ich habe den eingebauten Formatierer von vim verwendet.

Oliver

0

Fügen Sie dies in Express 4.x zu Ihrer app.js hinzu:

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

petkovic43
quelle

Wie kann ich Express dazu bringen, gut formatiertes HTML auszugeben?

Antworten: