Bagaimana saya bisa mendapatkan Express to output HTML diformat dengan baik?

165

Saat menggunakan Express untuk Node.js, saya perhatikan bahwa itu mengeluarkan kode HTML tanpa karakter atau tab baris baru. Meskipun mungkin lebih efisien untuk mengunduh, itu tidak terlalu mudah dibaca selama pengembangan.

node.js express pug pretty-print Stephen
sumber

313

Di main Anda app.jsatau apa yang ada di tempatnya:

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

Ekspresikan 2.x

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

Saya menaruh cetakan cantik di developmentkarena Anda ingin efisiensi lebih dengan 'jelek' production. Pastikan untuk mengatur variabel lingkungan NODE_ENV=productionsaat Anda menggunakan produksi. Ini dapat dilakukan dengan shskrip yang Anda gunakan di bidang 'skrip' package.jsondan dijalankan untuk memulai.

Express 3 mengubah ini karena:

Pengaturan "opsi tampilan" tidak lagi diperlukan, app.locals adalah variabel lokal yang digabungkan dengan res.render (), jadi [app.locals.pretty = true sama dengan mengirimkan res.render (view, {pretty : true}).

EhevuTov
sumber

1

Ubah jawaban yang diterima untuk ini karena ini adalah jawaban yang tepat untuk saat ini.

Val

Ini bekerja, tapi aku harus menginstal sekelompok dependensi ekstra, yaitu promise, uglify-js, cssdan lexical-scopesebelum itu akan berjalan lagi (itu akan membangun, tetapi kecelakaan pada permintaan pertama). Saya hanya menambahkan satu baris.

CWSpear

2

Bagaimana cara melakukannya di Express 4.x?

Antonio Salvati

3

@AntonioSalvati tryapp.locals.pretty = true

Huei Tan

1

Ini adalah jawaban yang luar biasa, persis apa yang saya cari. Sangat menyegarkan untuk melihat bagaimana hal ini dilakukan untuk versi Express yang berbeda. Saya telah mencari masalah lain dan menemukan jawaban yang tidak menyebutkan versi Express untuk apa.

SnowInferno

50

Untuk output html "format cantik" di Jade / Express:

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

Jonathan Julian
sumber

3

Solusi bagus! Saya berharap ini akan cocok dengan level indentasi antara tata letak / halaman juga.

Stephen

34

Ketinggalan jaman. Express 3 bekerja sedikit berbeda, lihat tulisan yang ditulis oleh EhevuTov.

7

Di express 4.x, tambahkan ini ke app.js Anda:

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

alarive
sumber

Bekerja di sini - terima kasih! Dalam kasus saya, saya tidak memiliki set 'env' var. Anda dapat menambahkannya ke file .js utama dengan satu baris ini: process.env.NODE_ENV = 'development';

Gene Bo

Mengapa Anda memberikan jawaban ini jika jawaban lain sudah memberikan solusi ini?

tanggal

Saya adalah orang pertama yang memberikan jawaban ini, jawaban lainnya diperbarui setelahnya.

alarive

6

Ada opsi "cantik" di Jade sendiri:

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

... memberimu ini:

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

Saya tampaknya tidak terlalu canggih tetapi untuk apa yang saya cari - kemampuan untuk benar-benar men-debug HTML yang dihasilkan oleh pandangan saya - tidak apa-apa.

Kevin Frost
sumber

3

Jika Anda hanya perlu debugging HTML, Anda selalu bisa 'memeriksa' HTML menggunakan Webkit atau Firebug inspector. Itu selalu menghasilkan pohon DOM yang diformat sempurna.

Roshambo

@Roshambo benar, tetapi menavigasi melalui pohon itu memakan waktu, ketika Anda hanya dapat memindai sumber lebih cepat (kadang-kadang)

Val

4

Jika Anda menggunakan konsol untuk dikompilasi, maka Anda dapat menggunakan sesuatu seperti ini:

$ jade views/ --out html --pretty

Tom Sarduy
sumber

0

Apakah Anda benar-benar membutuhkan html yang diformat dengan baik? Bahkan jika Anda mencoba menampilkan sesuatu yang terlihat bagus di satu editor, itu bisa terlihat aneh di editor lain. Memang, saya tidak tahu untuk apa html Anda butuhkan, tetapi saya akan mencoba menggunakan alat pengembangan krom atau pembakar untuk Firefox. Alat-alat itu memberi Anda pandangan yang baik tentang DOM daripada html.

Jika Anda benar-benar membutuhkan html yang diformat dengan baik, maka coba gunakan EJS alih-alih batu giok. Itu berarti Anda harus memformat html sendiri.

Oscar Kilhed
sumber

Saya lebih suka ej sekarang karena saya sudah menggunakannya untuk sementara waktu. Saya kira saya hanya sangat khusus tentang beberapa hal.

Stephen

0

Anda bisa menggunakan rapi

ambil contoh file jade ini:

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

sekarang Anda dapat memprosesnya dengan node 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);
});

akan memberi Anda s.th. Suka:

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

lalu menjalankannya dengan rapi dengan rapi -m output.html akan menghasilkan:

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
sumber

0

membangun dari saran oliver, inilah cara cepat dan kotor untuk melihat html yang dipercantik

1) unduh rapi

2) tambahkan ini ke .bashrc Anda

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

3) lari

$ tidyme localhost:3000/path

perintah terbuka hanya berfungsi pada mac. berharap itu bisa membantu!

ebaum
sumber

tidak tahu tentang opsi indentasi ... bagus! Saya menggunakan pemformat bawaan vim.

oliver

0

Di express 4.x, tambahkan ini ke app.js Anda:

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

petkovic43
sumber

Bagaimana saya bisa mendapatkan Express to output HTML diformat dengan baik?

Jawaban: