玉石的缩进错误

Question

对于我的Express网站，我使用jade。因此，我决定尝试修改我的布局文件，以便开始设计我的网站。我修改了原始的布局代码（它可以工作），但是在任何扩展布局的文件中，我开始遇到缩进错误，例如：

500 Error: /home/kevin/Blue/views/layout.jade:6 4| p Hello World Invalid indentation, you can use tabs or spaces but not both
4| p Hello World
Invalid indentation, you can use tabs or spaces but not both
at Object.Lexer.indent (/home/kevin/Blue/node_modules/jade/lib/lexer.js:679:15)
at Object.Lexer.next (/home/kevin/Blue/node_modules/jade/lib/lexer.js:777:15)
at Object.Lexer.lookahead (/home/kevin/Blue/node_modules/jade/lib/lexer.js:107:46)
at Object.Parser.lookahead (/home/kevin/Blue/node_modules/jade/lib/parser.js:115:23)
at Object.Parser.peek (/home/kevin/Blue/node_modules/jade/lib/parser.js:92:17)
at Object.Parser.tag (/home/kevin/Blue/node_modules/jade/lib/parser.js:640:22)
at Object.Parser.parseTag (/home/kevin/Blue/node_modules/jade/lib/parser.js:624:17)
at Object.Parser.parseExpr (/home/kevin/Blue/node_modules/jade/lib/parser.js:198:21)
at Object.Parser.block (/home/kevin/Blue/node_modules/jade/lib/parser.js:592:25)
at Object.Parser.tag (/home/kevin/Blue/node_modules/jade/lib/parser.js:721:26)

所以我拥有的代码如下：

index.jade

extends layout

block content
    p Hello World

并且

doctype 5
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/style.css')

    body
        div#header
            p This is the header
        block content

请记住，我没有拼写错误，并且我知道如何使用extends选项链接文件。事实上，在我开始搞砸布局文件之前，代码完全正常运行。所有这些都是缩进问题。我尝试弄清楚是否是我的文本编辑器引起了问题，但是我一直无法弄清楚，因为我无法再让代码工作。

我正在使用sublime text 2编辑器编写此jade代码。如果是文本编辑器未正确缩进的问题，有人能帮助我学习如何修复它吗？

- Kivo360

---

在Sublime Text的设置中，告诉它用空格替换制表符，然后始终使用空格缩进（启用此设置后，按Tab键时将输入空格）。另外，为什么body标签要放在head标签里呢？ :P - Eldamir

Answer 1

在Sublime Text的右下角，应该有一个标签，上面写着Spaces: N或Tab Size: N，其中N是一个数字。选择它，然后您将看到将整个文档缩进转换为使用制表符或空格的选项：

• 将缩进转换为空格
• 将缩进转换为制表符

- André Dion

---

我花了一些时间才弄清楚如何使用它，但最终成功了。我必须说，这将在不久的将来严重帮助我。谢谢。 - Kivo360

如果有帮助的话，这里有一个对于相同目的非常有用的Brackets编辑器扩展 https://github.com/davidderaedt/tabtospace-extension - Nathan Power

谢谢，救命稻草啊。我对 #Jade 不熟悉，你帮我省了很多时间。 - John Doe

Answer 2

这个答案是对André Dion的回答的扩展（我没有足够的声望在他的帖子上发表评论）。人们也可以直接在Visual Studio Code中执行他所描述的相同过程。如果您在Visual Studio Code中使用Pug，那将非常好。

- Gabriel Beauchemin-Dauphinais

---

这并没有回答问题。一旦您拥有足够的声望，您将能够评论任何帖子；相反，提供不需要询问者澄清的答案。 - Blue

Answer 3

在 server.js 文件上的编辑表单中设置变量如下：

var applications = row;
res.render("edit", { applications : applications[0] }); 

---

针对edit.jade文件:

block content
table
    thead
      tr
        th First Name
        th Last Name
    tbody
      - each item in applications
        tr
          td= item.username
          td= item.email

- Rahul Dhiman