设计网站官网国外网站设计流程

在 Visual Studio Code (VS Code) 中，可以通过自定义**代码片段（Snippets）**快速插入常用代码模板。以下是详细设置步骤：

---

步骤 1：打开代码片段设置

1. 按下快捷键 Ctrl + Shift + P（Windows/Linux）或 Cmd + Shift + P（Mac）打开命令面板。

2. 输入 Snippets，选择 Preferences: Configure User Snippets。

   • 全局片段：选择 New Global Snippets File（适用于所有文件类型）。

   • 语言特定片段：选择对应语言（如 Python、JavaScript 等）。

---

步骤 2：编辑代码片段文件

选择语言或创建全局片段后，会打开一个 .json 文件。按照以下格式添加代码片段：

json

{"Print to console": {"prefix": "clog","body": ["console.log('$1');","$2"],"description": "快速插入 console.log"}
}

• 键名（如 "Print to console"）：代码片段名称，可自定义。

• prefix：触发代码片段的快捷词（如输入 clog 后按 Tab）。

• body：插入的代码内容（每行一个字符串，支持多行）。

• description：代码片段的描述（可选）。

---

步骤 3：高级功能

1. 光标占位符：使用 $1, $2 指定光标位置，按 Tab 跳转。

   json

   "body": ["function ${1:name}($2) {","  $3","}"
   ]

2. 预设变量：使用 ${变量名} 或内置变量（如 TM_FILENAME 当前文件名）。

   json

   "body": ["// File: ${TM_FILENAME}","console.log('${1:Hello World}');"
   ]

3. 多选项占位符：用 | 分隔选项。

   json

   "body": ["${1|one,two,three|}"
   ]

---

步骤 4：保存并测试

1. 保存 .json 文件。

2. 在代码文件中输入 prefix 设置的快捷词（如 clog），按 Tab 或 Enter 插入片段。

---

示例：Python 的 main 函数片段

json

{"Python Main Function": {"prefix": "main","body": ["if __name__ == '__main__':","    $1"],"description": "插入 Python 主函数入口"}
}

---

注意事项

• JSON 语法：确保逗号、引号正确，避免格式错误。

• 语言作用域：确认代码片段文件对应正确的语言（如 python.json 仅对 .py 文件生效）。

• 冲突处理：若多个片段有相同 prefix，按 Tab 后会弹出选择列表。

通过以上步骤，你可以高效创建和管理常用代码片段，大幅提升编码速度！🚀

在 Visual Studio Code 中设置好代码片段后，可以通过以下方式快速使用它们：

---

基础使用方式

1. 输入前缀触发

   • 在代码文件中输入你定义的 prefix（快捷词，例如 clog）。

   • 按下 Tab 或 Enter，代码片段会自动插入。

2. 光标跳转与编辑

   • 代码片段中的 $1, $2 表示光标停留的位置。按 Tab 键可依次跳转到下一个占位符，按 Shift + Tab 返回上一个。

   • 直接编辑占位符内容，完成后按 Enter 或继续编码。

---

高级用法示例

1. 多选项占位符

如果代码片段中设置了多选占位符（例如 ${1|one,two,three|}），输入后会弹出选项列表，用方向键选择后按 Enter 确认。

json

{"React Component": {"prefix": "rfc","body": ["import React from 'react';","","export default function ${1|Button,Card,Header|}() {","  return (","    <div>$2</div>","  );","}"]}
}

• 输入 rfc → 按 Tab → 选择组件名（如 Card）→ 按 Tab 跳转到 <div> 位置。

---

2. 变量占位符

使用内置变量（如 TM_FILENAME 当前文件名）或自定义变量：

json

{"File Header": {"prefix": "header","body": ["// File: ${TM_FILENAME}","// Author: ${1:Your Name}","// Created: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"]}
}

• 输入 header → 按 Tab → 自动填充文件名和日期，并等待输入作者名。

---

使用技巧

1. 手动触发建议列表
   如果代码片段未自动弹出，按下 Ctrl + Space（Windows/Linux）或 Cmd + Space（Mac）手动唤出建议列表，选择对应的代码片段。

2. 语言特定限制

   • 确保代码片段文件作用于当前文件类型（例如 python.json 仅在 .py 文件中生效）。

   • 在非目标语言文件中，代码片段不会触发。

3. 全局片段与局部片段

   • 全局片段：适用于所有文件类型（需在命令面板中选择 New Global Snippets File）。

   • 语言特定片段：仅对指定语言生效（如 javascript.json 只对 .js 文件有效）。

---

常见问题

1. 代码片段未触发？

• 检查项：

  • 确认 prefix 输入正确（区分大小写）。

  • 确保代码片段文件与当前文件类型匹配。

  • 检查 JSON 文件是否有语法错误（如缺少逗号或引号）。

2. 如何快速查找已定义的片段？

• 按下 Ctrl + Shift + P → 输入 Insert Snippet → 选择对应语言的片段库查看列表。

---

实战演示

假设你为 Python 定义了一个 for 循环片段：

json

{"For Loop": {"prefix": "forloop","body": ["for ${1:i} in range(${2:10}):","    $3"]}
}

• 使用步骤：

  1. 在 .py 文件中输入 forloop。

  2. 按 Tab → 自动插入代码，光标停留在 i 处。

  3. 输入变量名（如 index）→ 按 Tab → 编辑范围（如 5）→ 按 Tab → 在循环体内编写代码。

---

总结

• 核心操作：输入 prefix → Tab/Enter → 编辑占位符 → Tab 跳转。

• 高效技巧：

  • 用 $0 指定片段插入后的最终光标位置。

  • 结合内置变量（如时间、文件名）实现动态内容。

  • 使用多选项占位符减少重复输入。

通过熟练使用代码片段，你可以将编码效率提升数倍！ 🚀

---

操作示例

以.vue文件为例：

需求目标：新建一个.vue文件时，输入vts，通过代码片段生成以下代码：

<script setup lang="ts" name=""></script><template></template><style scoped lang="scss"></style>

并且光标定位在 name=""的双引号中间 

设置操作记录

 

 

	"vue3-ts-template": { //快捷输入的时候显示的提示"prefix": "vts", //输入的前缀，就是输入这个会有提示"body": [ //这个是一个字符串数组，就是会输出的内容，如果内容含有双引号，需要在双引号前面使用\进行转义"<script setup lang=\"ts\" name=\"$1\">","$2","</script>","","<template></template>","","<style scoped lang=\"scss\"></style>",]}

使用操作记录 

输入vts，自动弹出代码片段提示，按回车确认

 输入name，按Tab，光位定位到下一个占位，就是第2行开头位置