Jade indentation errors

Question

So for my Express site, I'm using jade. So I decided to try modifying my layout file so I can start designing my site. I modified the original layout code (which worked), but I started getting indentation errors in any file that extends layout like this:

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)

So the code that I have is this:

index.jade

extends layout

block content
    p Hello World

and

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

    body
        div#header
            p This is the header
        block content

Keep in mind that I didn't spell anything incorrectly, and I do know how to link together files using the extends option just fine. In fact, the code worked perfectly fine until I started messing with the layout file. All of this is mostly an indention issue. I tried figuring out if it is my text editor causing the problem, and I have been unsuccessful figuring out if it is, as I can't get the code working again.

I am using the sublime text 2 editor to write this jade code. If it is the text editor not indenting correctly, could somebody help me learn how to fix it?

Answer 1

In the lower right-hand corner of Sublime Text, there should be a label that says Spaces: N or Tab Size: N where N is a number. Select this and you'll see options to convert the entire document's indentation to use either tabs or spaces:

• Convert Indentation to Spaces
• Convert Indentation to Tabs

Answer 2

for edit form on server.js file set variable like this

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

---

for edit.jade file :

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

Answer 3

This answer is an extension to the answer of André Dion (I don't have enough reputation to comment on his post). One can also do the same procedure he described in Visual Studio Code Directly. If you use Pug in Visual Studio Code it will be very nice.