Jade - 玉文件第 x 行的文本前缺少空格答案

【问题标题】：Jade - missing space before text for line x of jade fileJade - 玉文件第 x 行的文本前缺少空格
【发布时间】：2014-04-06 13:40:54
【问题描述】：

我正在制作一个基于 Express 的网络应用程序，每次有人访问这个玉文件时，我都会收到以下错误：

Warning: missing space before text for line 28 of jade file "C:\x\app\view
s\login.jade"

它还会为它发生的每一行吐出几次。

我查看了这些行，但我无法弄清楚它在抱怨什么。

我的玉文件如下：

doctype html
html
    head
        meta(charset='utf-8')
        link(href='style.css', rel='stylesheet')
    body
        .wrapper
            header.header
                a(href="/", style="color: #000000;")
                    h1(style="position: absolute; top: 30px;") Hello
            .middle
                .container
                    main.stream
                        p Login
                    main.name
                        form(id="login",    method="POST", action="/login")
                            table(cellspacing="15")
                                tr
                                    td Email
                                    td
                                        input(type='email', name='email' style="width: 250; height: 18px; border: 1px solid #999999; padding: 5px;")
                                tr
                                    td Password
                                    td
                                        input(type='password', name='password' style="width: 250; height: 18px; border: 1px solid #999999; padding: 5px;")
                                tr
                                    td
                                        input(style="width:75px;height:30px;", type="submit", value="Login")    

                aside.left-sidebar
                    main.dir
                        a(href="/") Home
                    main.dir
                        a(href="/signup")   Register                        
        footer.footer
            h3 Hello
            p This is a footer

【问题讨论】：

我认为这没什么大不了的，但是您在元素语法中混合使用了逗号而没有逗号。 input(type='password', name='password' style="width: 250; height: 18px; border: 1px solid #999999; padding: 5px;") 与 input(style="width:75px;height:30px;", type="submit", value="Login")
@WaynePincence 确实，我不知道我怎么没听懂，谢谢！

标签： pug

【解决方案1】：

玉石用途 |仅以文本开头时

错误->

td
  {{anything}}
  br
  Hello

正确->

td
  | {{anything}}
  br
  | Hello

【讨论】：

要补充一点： 如果你有一个以script. 开头的脚本块，那么报告的问题行将是错误的：此类脚本的所有行都不算了！
感谢@ishahak！我感觉行号不匹配，因为它在空白行上给了我这个错误。仔细计算一下，我发现了这个问题。

【解决方案2】：

我在使用 !{} 语法时遇到了这个错误并且有一个额外的返回：

.row 
  !{marked(val)}

应该是：

.row !{marked(val)}

【讨论】：

是的，我也遇到了这个错误，脚本标签只包含一行 javascript，之后缩进。看来你必须把它放在同一条线上。谢谢 - 你的小费为我解决了。

【解决方案3】：

为什么即使您的所有玉石似乎都在github issue 中突出显示，也会出现此问题。引用原始问题本身：

警告是因为!{} 和#{} 用于文本内插值。即你必须是 in(side) 文本（块） 才能开始。您应该使用= 和!= 来缓冲JavaScript 表达式。

这意味着!{} 和#{} 仅在您在现有文本块内插值时使用。像咖啡脚本的 #{} 插值在这里：

a = "Hi #{name}!"

翻译成（在 javascript 中）

a = "Hi " + name + "!";

因此，在 Jade 中，您也将在运行文本（段落或字符串）中使用 !{} 和 !{}。要从变量中输出字符串而不显式启动新的文本块，您可以使用 = 或 !=。

.row
  != marked(val)
.another-row
  = marked(val)

另一种方法是显式开始一个新的文本块：

.row 
  | !{marked(val)}

.another-row 
  | #{marked(val)}

【讨论】：

这是最好的答案，因为它解释了 Jade 为何会这样。
我不知道这与有问题的代码有何关系，或者缺少空格的位置。
@DrazenBjelovuk 换行符开始一个新块，并且插值无法按您期望的方式工作。虽然问题没有这种情况，但 same 错误是由翡翠抛出的错误插值，这个答案试图解释。如果您点击 github 问题的链接，您将获得更多关于此的信息。

【解决方案4】：

我把你的代码复制到 Notepad++ 中并打开 View Whitespace。

第 28 行末尾有 4 个额外的空格（此处显示为破折号）：

input(style="width:75px;height:30px;", type="submit", value="Login")----

此外，第 34 行的“注册”之后还有几个额外的空格。

【讨论】：

【解决方案5】：

这也可能是由于使用制表符而不是空格引起的

div(attr="val")[\t]text

或\t 行尾字符

【讨论】：

在崇高的文本中 - 点击右下角的“空格”菜单，然后“将缩进转换为空格”...

【解决方案6】：

或者，如果你有这样的东西，你会遇到这个问题..

\t \t p    Foo
\t \t p \t Foo

我上面的答案也产生了这个错误，所以我们在技术上都是正确的。 ;)

另外，如果你使用 vim。你可以通过做看到空间，

:set hlsearch
/ /

【讨论】：