Jade - missing space before text for line x of jade file

问题

I'm making an Express based web application and everytime someone visits this jade file i get the following error:

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

It also spits it out a few times for each line it happens on.

I took a look at these lines and I can not figure out what it's complaining about.

My jade file is as follows:

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

回答1:

In Jade use | when start with only text

wrong ->

td
  {{anything}}
  br
  Hello

correct ->

td
  | {{anything}}
  br
  | Hello

回答2:

I got this error when using the !{} syntax and had an extra return:

.row 
  !{marked(val)}

should be:

.row !{marked(val)}

回答3:

Why this problem occurs even when all of your jade seems valid is highlighted in this github issue. Quoting from the original issue itself:

The warning is because !{} and #{} are for interpolation within text. i.e. you have to be in(side) a text (block) to start with. You should use = and != to buffer JavaScript expressions.

This means that the !{} and #{} are only to be used if you are interpolating within an existing text-block. Something like coffee-script's #{} interpolation here:

a = "Hi #{name}!"

translates to (in javascript)

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

Thus, in Jade too, you'll use the !{} and !{} within a running text (a paragraph or a string). To just output a string from a variable without explicitly starting a new text-block, you'd use = or !=.

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

An alternative would be to explicitly start a new text-block as so:

.row 
  | !{marked(val)}

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

回答4:

I took your code and copied into Notepad++ with View Whitespace on.

Line 28 has 4 extra spaces at the end of it (shown as dashes here):

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

Also, line 34 has several extra spaces after "Register" as well.

回答5:

this may also be caused by using tabs instead of spaces

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

or by \t characters at the ends of lines

回答6:

Alternatively you cna have this problem if you have you something like this..

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

I have had the above answer also generate this error so we're both technically right. ;)

Also, if you use vim. You can see spaces by doing,

:set hlsearch
/ /

来源：https://stackoverflow.com/questions/22181813/jade-missing-space-before-text-for-line-x-of-jade-file

标签

pug