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?

Catherincatherina

In Sublime Text settings, tell it to replace tabs with spaces and then always indent with spaces (with the setting on, you will write spaces when hitting tab). Also, why is body inside head? :P – Upbringing

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

Stamm

Took me a while to figure out how to actually use this, but worked. I must say that this should seriously help me in the near future. Thank you. – Catherincatherina

In case it helps anyone, there is a useful extension for Brackets editor here for the same purpose github.com/davidderaedt/tabtospace-extension – Pluralism

Thanks man. Life saver. Not familiar with #Jade, save me a lot of time. – Fullfaced

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

Apospory

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.

Guanabara

This does not provide an answer to the question. Once you have sufficient reputation you will be able to comment on any post; instead, provide answers that don't require clarification from the asker. – Psycholinguistics