Как я могу получить Express для вывода красиво отформатированного HTML?

165

При использовании Express для Node.js я заметил, что он выводит код HTML без каких-либо символов новой строки или вкладок. Хотя загрузка может быть более эффективной, она не очень удобочитаема во время разработки.

node.js express pug pretty-print Стивен
источник

313

В вашей главной app.jsили что находится на своем месте:

Экспресс 4.х

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

Экспресс 3.x

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

Экспресс 2.x

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

Я положил симпатичный принт, developmentпотому что вы хотите больше эффективности с «уродливым» production. Обязательно установите переменную среды NODE_ENV=productionпри развертывании в производственной среде . Это можно сделать с помощью shсценария, который вы используете в поле «script» package.jsonи который запускается для запуска.

Экспресс 3 изменил это, потому что:

Параметр «Параметры просмотра» больше не требуется, app.locals - это локальные переменные, объединенные с res.render (), поэтому [app.locals.pretty = true - это то же самое, что и передача res.render (view, {pretty) : правда }).

EhevuTov
источник

1

Пожалуйста, измените принятый ответ на это, так как это правильный ответ на сегодняшний день.

Val

Это работало, но я должен был установить кучу дополнительных зависимостей, а именно promise, uglify-js, cssи , lexical-scopeпрежде чем он будет работать снова (это было бы построить, но аварии по первому требованию). Я добавил только одну строку.

CWSpear

2

Как это сделать в Express 4.x?

Антонио Сальвати

3

@AntonioSalvati tryapp.locals.pretty = true

Хуэй Тан

1

Это потрясающий ответ, именно то, что я искал. Приятно видеть, как это делается для разных версий Express. Я искал другие проблемы и нашел ответы, в которых не упоминалось, для какой версии Express это было.

SnowInferno

50

Чтобы «красиво отформатировать» вывод html в Jade / Express:

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

Джонатан Джулиан
источник

3

Отличное решение! Я хотел бы, чтобы это соответствовало уровню отступа между макетом / страницей тоже.

Стивен

34

Устаревшие. Экспресс 3 работает немного по-другому, см. Пост, написанный EhevuTov.

7

В Express 4.x добавьте это в ваш app.js:

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

alarive
источник

Работал здесь - спасибо! В моем случае у меня не было набора переменных env. Вы можете добавить его в основной файл .js одной строкой: process.env.NODE_ENV = 'development';

Джин Бо

Почему вы даете этот ответ, если другие ответы уже дают это решение?

Nbro

Я первым дал этот ответ, другой ответ был обновлен позже.

Alarive

6

В самой Jade есть «симпатичная» опция:

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

... получает вас это:

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

Кажется, я не очень изощренен, но для того, что мне нужно - возможность отладить HTML, который производят мои представления, - это просто прекрасно.

Кевин Фрост
источник

3

Если отладка HTML - это все, что вам нужно, вы всегда можете просто «проверить» HTML с помощью Webkit или Firebug inspector. Это всегда генерирует отлично отформатированное дерево DOM.

Рошамбо

@Roshambo верно, но навигация по дереву отнимает много времени, когда вы можете просто (иногда) сканировать источник

Val

4

Если вы используете консоль для компиляции, вы можете использовать что-то вроде этого:

$ jade views/ --out html --pretty

Том Сардуй
источник

0

Вам действительно нужен красиво отформатированный HTML? Даже если вы попытаетесь вывести что-то, что выглядит хорошо в одном редакторе, это может выглядеть странно в другом. Конечно, я не знаю, для чего нужен HTML, но я бы попробовал использовать инструменты разработки Chrome или Firebug для Firefox. Эти инструменты дают вам хорошее представление о DOM вместо HTML.

Если вам действительно нужно красиво отформатированный HTML, попробуйте использовать EJS вместо Jade. Это будет означать, что вам придется форматировать HTML самостоятельно, хотя.

Оскар Килхед
источник

Мне больше нравятся ejs теперь, когда я работал с ним некоторое время. Я думаю, я просто очень внимателен к некоторым вещам.

Стивен

0

Вы можете использовать приборку

Возьмем, к примеру, этот файл 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

теперь вы можете обработать его с помощью узла 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);
});

даст вам что-то лайк:

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

затем запуск его через tidy с помощью tidy -m output.html приведет к:

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>

Оливер
источник

0

Основываясь на предложении Оливера, вот быстрый и грязный способ просмотра прекрасного HTML

1) скачать приборку

2) добавить это в свой .bashrc

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

3) бегать

$ tidyme localhost:3000/path

Команда open работает только на Mac. надеюсь, это поможет!

ebaum
источник

не знал про вариант отступа ... приятно! Я использовал встроенный формат Vim.

Оливер

0

В Express 4.x добавьте это в ваш app.js:

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

petkovic43
источник

Как я могу получить Express для вывода красиво отформатированного HTML?

Ответы: