Làm thế nào để thực hiện gói thẻ trong mã VS?

Tôi muốn bọc html đã chọn của mình trong một thẻ bằng mã VS. Làm thế nào để làm điều đó?

Emmet nhúng có thể thực hiện các mẹo:

1. Chọn văn bản (tùy chọn)
2. Mở bảng lệnh (thường là Ctrl+ Shift+ P)
3. Hành hình Emmet: Wrap with Abbreviation
4. Nhập một thẻ div(hoặc viết tắt .wrapper>p)
5. Đánh Enter

Lệnh có thể được gán cho một keybinding.

Điều này thậm chí còn hỗ trợ truyền các đối số:

{
    "key": "ctrl+shift+9",
    "command": "editor.emmet.action.wrapWithAbbreviation",
    "when": "editorHasSelection",
    "args": {
        "abbreviation": "span"
    }
},

Sử dụng nó như thế này:

• span.myCssClass
• span#myCssId
• b
• b.myCssClass

Tìm kiếm nhanh trên thị trường VSCode: https://marketplace.visualstudio.com/items/bradgashler.htmltagwrap .

1. Khởi chạy nhanh Mã VS ( Ctrl+ P)

2. dán ext install htmltagwrapvà nhập

3. chọn HTML

4. nhấn Alt+ W( Option+ Wcho máy Mac).

Khi tôi không thể bình luận, tôi sẽ mở rộng câu trả lời tuyệt vời của Alex.

Nếu bạn muốn trải nghiệm giống như Sublime với việc mở gói Tiện ích mở rộng Keymap (Tùy chọn> Tiện ích mở rộng Keymap [ Cmd+ K Cmd+M ]) và thêm đối tượng sau:

{
    "key": "alt+w",
    "command": "editor.emmet.action.wrapIndividualLinesWithAbbreviation",
    "when": "editorHasSelection && editorTextFocus"
}

Cái nào sẽ liên kết lệnh quấn Emmet với Alt + Wkhi văn bản được chọn

(Xin lỗi vì chỉ dẫn OSX)

1. Mở Phím tắt bằng cách gõ ⌘ Command+ k ⌘ Command+ shoặcCode > Preferences > Keyboard Shortcuts
2. Kiểu emmet wrap
3. Nhấp vào dấu cộng ở bên trái của "Emmet: Wrap with Viết tắt"
4. Loại ⌥ Option+w
5. nhấn Enter

Tôi có một câu trả lời tốt hơn cho việc này bằng Snippets

Tạo một đoạn mã với định nghĩa như thế này:

"name_of_your_snippet": {
    "scope": "javascript,html",
    "prefix": "name_of_your_snippet",
    "body": "<${0:b}>$TM_SELECTED_TEXT</${0:b}>"
}

Sau đó liên kết nó với một khóa trong keybindings.json Ví dụ như thế này:

{ 
    "key": "alt+w",
    "command": "editor.action.insertSnippet",
    "args": { "name": "name_of_your_snippet" }
}

Tôi nghĩ rằng điều này sẽ cung cấp cho bạn kết quả chính xác như htmltagwrap nhưng không phải cài đặt tiện ích mở rộng.

Nó sẽ chèn các thẻ xung quanh văn bản đã chọn, mặc định để <b>gắn thẻ và chọn thẻ để nhập cho phép bạn thay đổi nó.

Nếu bạn muốn sử dụng một thẻ mặc định khác, chỉ cần thay đổi bthuộc bodytính của đoạn mã.