☰

如何在 Sublime Text 中從幾行產生有序和無序列表

tag-icon • tag-icon sublime-text-2
如何在 Sublime Text 中從幾行產生有序和無序列表

如何從幾行有效地產生有序和無序列表？

比方說：

list item 1
list item 2
list item 3

進入

<ul>
  <li>list item 1</li>
  <li>list item 2</li>
  <li>list item 3</li>
</ul>

答案1

您可以透過 Package Control 安裝 Emmet 軟體包（關聯）或者直接複製Emmet包文件安裝。然後

// don't forget to choose HTML edit mode in the Sublime Text editor

// type 
ul#nav>li.item$*4>a{Item $}
// 1      2     3   4
//1- List ID
//2- class name
//3- list members number
//4- items name

點擊Tab按鈕，你會看到：

<ul id="nav">
    <li class="item1"><a href="">Item 1</a></li>
    <li class="item2"><a href="">Item 2</a></li>
    <li class="item3"><a href="">Item 3</a></li>
    <li class="item4"><a href="">Item 4</a></li>
</ul>

建立清單後，您還可以按下按鈕Tab快速移動到下一個（或上一個）項目。

答案2

如果 Emmet 外掛程式不適合您，您可以嘗試將以下內容儲存為巨集並使用它。它沒有縮進，也沒有錯誤檢查，但它滿足了我的需要。 （首選項->瀏覽套件開啟「使用者」資料夾，建立一個名為「ulmaker」之類的新資料夾，並將其儲存為「ulmaker.sublime-macro」。）然後您可以從下拉清單中使用它（工具->宏）或將其綁定到一個鍵。

（首選項->按鍵綁定使用者）

{ "keys": ["alt+u", "alt+l"], "command": "run_macro_file", "args": {"file": "Packages/User/ulmaker/ulmaker.sublime-macro"} }

這會將其綁定到按住 ALT 並按 u，然後按 l 的組合。

[
    {
        "args": null,
        "command": "split_selection_into_lines"
    },
    {
        "args":
        {
            "extend": false,
            "to": "bol"
        },
        "command": "move_to"
    },
    {
        "args":
        {
            "characters": "<li"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "characters": ">"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "extend": false,
            "to": "eol"
        },
        "command": "move_to"
    },
    {
        "args":
        {
            "characters": "<"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "characters": "/li"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "characters": ">"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "extend": true,
            "to": "bol"
        },
        "command": "move_to"
    },
    {
        "args": null,
        "command": "cut"
    },
    {
        "args": null,
        "command": "single_selection"
    },
    {
        "args":
        {
            "characters": "<ul"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "characters": ">"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "characters": "\n"
        },
        "command": "insert"
    },
    {
        "args": null,
        "command": "paste"
    },
    {
        "args":
        {
            "characters": "\n<"
        },
        "command": "insert"
    },
    {
        "args":
        {
            "characters": "/ul>"
        },
        "command": "insert"
    }
]

更有經驗的人可能會稍微清理一下這段程式碼。我只是用ctrl+q記錄下來，然後儲存。

相關內容