Nodejs jade模板代码格式错误，用什么编辑器才行？

Nodejs jade模板代码格式错误，用什么编辑器才行？

用notepad++编写jade模板代码，总是抱Invalid indentation, you can use tabs or spaces but not both错误，该用什么编辑器好啊

6 回复

当然可以！下面是关于如何解决使用 Notepad++ 编写 Jade 模板代码时遇到的“Invalid indentation”问题的详细内容。我们将介绍一个更适合编写 Jade 模板代码的编辑器，并提供一些具体的示例代码来帮助你理解。

Nodejs Jade 模板代码格式错误，用什么编辑器才行？

在使用 Notepad++ 编写 Jade 模板代码时，可能会遇到“Invalid indentation, you can use tabs or spaces but not both”的错误。这是因为 Jade 对代码的缩进非常敏感，需要保持一致。为了解决这个问题，推荐使用一些专门为编写 HTML 和模板语言设计的编辑器，比如 Visual Studio Code 或 Atom。

示例代码

以下是一个简单的 Jade 模板代码示例：

doctype html
html
  head
    title= pageTitle
    script(type='text/javascript').
      if (foo) {
        bar();
      }
  body
    h1.page-title #{pageTitle}
    p.welcome Welcome to #{title}
    ul#user-list
      each user in users
        li.user
          a(href='/user/' + user.name)= user.name

在这个示例中，所有的标签都使用了统一的缩进方式（例如，两个空格）。如果你在 Notepad++ 中编写这段代码，确保你的缩进设置是统一的，或者你可以考虑更换一个更合适的编辑器。

如何使用 Visual Studio Code 编写 Jade 代码

  1. 安装 Visual Studio Code：

  2. 安装 Jade 扩展：

    • 打开 Visual Studio Code。
    • 点击左侧活动栏中的扩展图标（四个方块组成的图标）。
    • 在搜索框中输入 Jade，找到 Jade 扩展并点击安装。

  3. 配置 Jade 文件类型：

    • 创建一个新的 .jade 文件。
    • 确保文件扩展名为 .jade。

通过这些步骤，你可以更轻松地编写和调试 Jade 模板代码。Visual Studio Code 提供了更好的语法高亮、自动补全等功能，能够显著提高你的开发效率。

希望这些建议对你有所帮助！如果你有任何其他问题，欢迎继续提问。


建议你使用sublime text然后安装一个插件jade build，每次使用command+b就可以直接生成html，如果有问题还可以提示你， 还有推荐你使用sublime,这玩意很好用， 使用快捷的介绍：http://sublime.emptystack.net/ jade bulid插件的安装和使用：https://sublime.wbond.net/packages/Jade Build

恩恩，谢谢啊

唉，JADE，没事找罪受，好好的格式化的HTML，多好啊……

没必要去折腾jade。又加重了学习成本！ejs足矣！

使用 Notepad++ 编写 Jade（现在称为 Pug）模板时遇到的 “Invalid indentation” 错误通常是由于不正确的缩进导致的。Jade/Pug 对缩进非常敏感，必须保持一致。你可以选择更合适的编辑器来编写 Jade/Pug 模板，例如 Visual Studio Code 或 Sublime Text。

以下是推荐的编辑器以及如何避免缩进错误的一些提示：

推荐的编辑器

  1. Visual Studio Code:

    • 安装 Pug 语言支持插件。
    • 确保设置为使用空格而不是制表符，并且设置适当的空格数量（通常为 2 或 4 个空格）。

  2. Sublime Text:

    • 安装 Pug 语法高亮插件。
    • 配置文件类型以使用空格而非制表符。

示例代码

假设你要创建一个简单的 Jade/Pug 模板文件 index.pug，正确的格式应该如下：

doctype html
html
  head
    title My Page Title
  body
    h1 Hello, World!
    p This is a paragraph.

解释

  • 使用缩进来表示嵌套关系。
  • 保持一致的缩进风格（通常使用两个或四个空格）。
  • 不要在同一行中混合使用制表符和空格。

通过使用上述推荐的编辑器并遵循这些规则，你应该可以避免缩进错误并正确编写 Jade/Pug 模板。

回到顶部