Jak sprawić, by Express wyświetlał ładnie sformatowany HTML?

165

Korzystając z Express for Node.js, zauważyłem, że generuje kod HTML bez żadnych znaków nowej linii ani tabulatorów. Chociaż pobieranie może być bardziej wydajne, nie jest zbyt czytelne podczas programowania.

node.js express pug pretty-print Stephen
źródło

313

W twoim głównym app.jslub na swoim miejscu:

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

Włożyłem ładny wydruk, developmentponieważ będziesz chciał większej wydajności z „brzydkim” production. Pamiętaj, aby ustawić zmienną środowiskową NODE_ENV=productionpodczas wdrażania w środowisku produkcyjnym. Można to zrobić za pomocą shskryptu, którego używasz w polu „skrypt” programu package.jsoni uruchamiasz go, aby rozpocząć.

Express 3 zmienił to, ponieważ:

Ustawienie "opcje widoku" nie jest już potrzebne, app.locals to zmienne lokalne scalone z res.render (), więc [app.locals.pretty = true jest tym samym, co przekazanie res.render (view, {pretty : prawdziwe }).

EhevuTov
źródło

1

Zmień zaakceptowaną odpowiedź na to pytanie, ponieważ do tej pory jest to prawidłowa odpowiedź.

Val

To działało, ale musiałem zainstalować kilka dodatkowych zależności, a mianowicie promise, uglify-js, cssi lexical-scopezanim będzie go uruchomić ponownie (to będzie budować, ale krach na pierwsze żądanie). Dodałem tylko jedną linię.

CWSpear,

2

Jak to zrobić w Express 4.x?

Antonio Salvati

3

@AntonioSalvati tryapp.locals.pretty = true

Huei Tan

1

To niesamowita odpowiedź, dokładnie to, czego szukałem. Odświeżające jest zobaczenie, jak to się robi w różnych wersjach Express. Szukałem innych problemów i znalazłem odpowiedzi, w których nie wspomniałem, do której wersji Express jest przeznaczony.

SnowInferno

50

Aby wyświetlić dane wyjściowe HTML w „ładnym formacie” w Jade / Express:

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

Jonathan Julian
źródło

3

Świetne rozwiązanie! Chciałbym, żeby pasował również do poziomów wcięć między układem / stroną.

Stephen

34

Przestarzały. Express 3 działa trochę inaczej, zobacz post napisany przez EhevuTov.

7

W express 4.x dodaj to do swojego app.js:

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

żywy
źródło

Pracowałem tutaj - dzięki! W moim przypadku nie miałem zestawu zmiennej „env”. Możesz dodać go do głównego pliku .js za pomocą tej jednej linii: process.env.NODE_ENV = 'development';

Gene Bo

Dlaczego podajesz tę odpowiedź, jeśli inne odpowiedzi już dają to rozwiązanie?

nbro

Byłem pierwszym, który udzielił tej odpowiedzi, druga odpowiedź została później zaktualizowana.

żyje

6

W samym Jade istnieje opcja „ładna”:

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

... dostajesz to:

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

Nie wydaje mi się, żebym był zbyt wyrafinowany, ale ze względu na to, czego szukam - możliwość debugowania kodu HTML, który generują moje widoki - jest w porządku.

Kevin Frost
źródło

3

Jeśli debugowanie HTML jest wszystkim, czego szukasz, zawsze możesz po prostu „sprawdzić” HTML za pomocą inspektora Webkit lub Firebug. To zawsze generuje doskonale sformatowane drzewo DOM.

Roshambo

@Roshambo prawda, ale poruszanie się po drzewie jest czasochłonne, kiedy można po prostu przeskanować źródło szybciej (czasami)

Val

4

Jeśli używasz konsoli do kompilacji, możesz użyć czegoś takiego:

$ jade views/ --out html --pretty

Tom Sarduy
źródło

0

Czy naprawdę potrzebujesz ładnie sformatowanego html? Nawet jeśli spróbujesz wydrukować coś, co wygląda ładnie w jednym edytorze, może to wyglądać dziwnie w innym. To prawda, nie wiem, do czego potrzebujesz html, ale spróbuję użyć narzędzi programistycznych Chrome lub firebuga dla Firefoksa. Te narzędzia dają dobry widok na DOM zamiast HTML.

Jeśli naprawdę potrzebujesz ładnie sformatowanego kodu HTML, spróbuj użyć EJS zamiast jade. Oznaczałoby to jednak, że musiałbyś samodzielnie sformatować kod HTML.

Oscar Kilhed
źródło

Lubię ejs bardziej teraz, kiedy pracowałem z nim przez jakiś czas. Myślę, że jestem bardzo drobiazgowy w niektórych sprawach.

Stephen

0

możesz użyć schludnego

Weźmy na przykład ten plik 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

teraz możesz to przetworzyć za pomocą węzła 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);
});

da ci s.th. lubić:

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

następnie uruchomienie go przez tidy z tidy -m output.html spowoduje:

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
źródło

0

Opierając się na sugestii Olivera, oto szybki i brudny sposób na wyświetlenie upiększonego html

1) pobierz schludnie

2) dodaj to do swojego .bashrc

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

3) biegać

$ tidyme localhost:3000/path

polecenie open działa tylko na komputerach Mac. mam nadzieję, że to pomoże!

ebaum
źródło

nie wiedziałem o opcji wcięcia ... fajnie! Używałem wbudowanego formatu Vima.

oliver

0

W express 4.x dodaj to do swojego app.js:

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

petkovic43
źródło

Jak sprawić, by Express wyświetlał ładnie sformatowany HTML?

Odpowiedzi: