当前位置: 首页 > article >正文

vscode 中快捷生成模板快捷键

1. 使用 Emmet 缩写

Emmet 是一个强大的工具,可以帮助你快速生成 HTML、CSS 等代码模板。

  • HTML 模板: 输入 ! 然后按下 Tab 键,Emmet 会自动生成一个基本的 HTML5 模板。

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
      </head>
      <body></body>
    </html>
    
  • 其他 Emmet 缩写: 例如输入 div.container>ul>li*5 然后按下 Tab 键,Emmet 会生成如下代码:

    <div class="container">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    

2. 使用用户代码片段 (User Snippets)

你可以创建自定义的代码片段,以便快速插入常用的代码模板。

  1. 打开用户代码片段:

    • 打开命令面板 (Ctrl + Shift + PCmd + Shift + P),然后输入 “Preferences: Configure User Snippets”。
    • 选择你想要为其创建代码片段的语言(例如 JavaScript、HTML 等)。
  2. 创建代码片段:

    • 在打开的 snippets.json 文件中,添加一个新的代码片段。例如:

      "Print to console": {
          "prefix": "log",
          "body": [
              "console.log('$1');",
              "$2"
          ],
          "description": "Log output to console"
      }
      
    • 在这个例子中,当你输入 log 并按下 Tab 键时,VSCode 会自动插入 console.log('');,并且光标会停留在 '' 中。

3. 使用扩展

你也可以安装一些扩展来快速生成代码模板,例如:

  • HTML Snippets: 提供了一系列 HTML 代码片段。
  • JavaScript (ES6) code snippets: 提供了 ES6 的代码片段。
  • Reactjs code snippets: 提供了 React 相关的代码片段。

4. 自定义快捷键

你可以为常用的代码片段或命令绑定自定义快捷键。

  1. 打开快捷键设置:

    • 打开命令面板 (Ctrl + Shift + PCmd + Shift + P),然后输入 “Preferences: Open Keyboard Shortcuts”。
  2. 添加快捷键:

    • 在快捷键设置中,搜索你想要绑定的命令(例如 “Insert Snippet”),然后点击左侧的加号图标来添加快捷键。

5. 使用文件模板

你可以创建文件模板,以便在创建新文件时自动插入预定义的代码。

  1. 创建模板文件:

    • 创建一个包含你想要插入的代码的文件,例如 template.html
  2. 使用模板:

    • 当你创建新文件时,手动复制模板文件的内容,或者使用扩展(如 “File Templates”)来自动插入模板内容。

总结

  • Emmet: 快速生成 HTML/CSS 代码。
  • 用户代码片段: 自定义代码片段,快速插入常用代码。
  • 扩展: 安装扩展来获取更多代码片段。
  • 自定义快捷键: 为常用命令绑定快捷键。
  • 文件模板: 创建文件模板,快速生成新文件。
原文地址:https://blog.csdn.net/weixin_64684095/article/details/146222089
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/585622.html

相关文章:

  • C#-使用VisualStudio编译C#工程
  • 【区块链】以太坊
  • 【go】函数类型的作用
  • 多线程(超详细) (ε≡٩(๑>₃<)۶ 一心向学)
  • 数据库技术
  • C++内建函数对象
  • QT基础十四、绘图
  • RabbitMQ (Java)学习笔记
  • 高安全可靠MCU芯片AS32X601应用解析
  • 【北上广深杭大厂AI算法面试题】计算机视觉篇...YOLOv4 相较于YOLOv3有哪些改进?速度更快还是更慢,为什么?(二)
  • 关于Django框架的面试题及其解析
  • 嵌入式2-按键
  • Python网络爬虫之BeautifulSoup库的使用流程和方法
  • 力扣hot100_二叉树(5)_python版本
  • 实验5 逻辑回归
  • 梯度下降法以及随机梯度下降法
  • 作业9 (2023-05-05 数组的定义和初始化)
  • 富文本编辑器(Rich Text Editor,RTE)
  • 矩阵交换行(信息学奥赛一本通-1119)
  • 基于NXP+FPGA永磁同步电机牵引控制单元(单板结构/机箱结构)