简单的 HTML 原子片段不起作用答案

【问题标题】：Simple HTML atom snippet not working简单的 HTML 原子片段不起作用
【发布时间】：2015-07-27 08:04:13
【问题描述】：

我只是想在 Atom 文本编辑器中创建一个简单的 HTML sn-p，我正在按照 tutorial 的说明进行操作。

我基本上将以下 sn-p 添加到我的 sn-ps.cson 文件中：

".source.html":
     "HTML snippet":
        "prefix": "spithtml"
           "body": """<!doctype html>
            <html>
                <head>
                    <meta charset="utf-8">
                    <meta name="description" content="">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <title>Title here</title>
                    <link rel="author" href="humans.txt">
                </head>

                <body>

                </body>

                    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

                </body>
            </html>
            """

上面的 sn-p 意味着每次我在我的文本编辑器中输入spithtml，我希望 HTML 骨架出现。

上面的 sn-p 不起作用，实际上我在编辑器中收到错误消息：

C:\Users\myname\.atom\snippets.cson: unexpected :

这没有意义，因为我的另一个 jQuery 的 sn-p 工作得很好，就像这样：

".source.js":
  "document ready":
     "prefix": "$ready"
     "body": """$(function(){
            $1
      });"""

并且具有完全相同的语法。那么我错过了什么，如何在 Atom 中创建一个简单的 HTML sn-p ？令人惊讶的是，有很多关于如何使用 atom 包的文档，但没有关于如何创建简单的 HTML sn-p 的文档。

谢谢。

亚历克斯-z。

【问题讨论】：

我在创建 HTML sn-ps 时遇到问题，我的 JS 和 jQuery sn-ps 似乎工作正常。

标签： jquery html atom-editor

【解决方案1】：

你的 body 属性缩进到很远，它应该内联这样的前缀：

".source.html":
     "HTML snippet":
        "prefix": "spithtml"
        "body": """<!doctype html>
            <html>
                <head>
                    <meta charset="utf-8">
                    <meta name="description" content="">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <title>Title here</title>
                    <link rel="author" href="humans.txt">
                </head>

                <body>

                </body>

                    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

                </body>
            </html>
            """

【讨论】：

另请注意，如果您希望它与任何 .html 文件一起使用，请将“.source.html”更改为“.html”
您的解决方案有效，但现在我有两个 sn-ps，请参阅此处chopapp.com/#4e3h4rxm，第一个不起作用，第二个不起作用，知道吗，为什么？
您已经声明了“.html”，所以第二个 sn-p 将覆盖它。 pastebin.com/KzT3uG8i

【解决方案2】：

对于 html sn-ps，您必须使用 .text.html 而不是 .source.html：

".text.html":
     "HTML snippet":
        "prefix": "spithtml"
           "body": """<!doctype html>
            <html>
                <head>
                    <meta charset="utf-8">
                    <meta name="description" content="">
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <title>Title here</title>
                    <link rel="author" href="humans.txt">
                </head>

                <body>

                </body>

                    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

                </body>
            </html>
            """

【讨论】：