VSCode常用代码片段

介绍

TIPS

每个代码段都在代码段名称下定义，并具有 前缀 、 正文 和 描述 。

• Print to Vue 代码片段名称
• prefix 前缀
• body 正文，可以是字符串，也可以为数组，若为数组每个元素都做为单独的一行插入。
• description 描述

前缀 是用来触发代码段的，正文 将被展开和插入。

输入前缀prefix 然后按 tab 或者 enter 可以直接插入 正文body 里面的代码

Snippet 语法

1. 制表位（Tabstops）

   使用制表位（Tabstops）可以在代码片段中移动光标位置，使用$1，$2来指定光标的位置，数字代表光标的移动的顺序，$0代表光标的最终位置。如果有多个相同的制表位（Tabstops）会在编译器里同时出现多个光标并且同步更新。

2. 占位符（Placeholders）

   占位符（Placeholders） 是带默认值的制表位（Tabstops），如 ${1:foo}，占位符（Placeholders）的文本会被插入到制表位（Tabstops）所在位置并且全选以方便修改，占位符（Placeholders）可以嵌套使用，比如 ${1:another ${2:placeholder}} 。

3. 选择项（Choice）

   占位符（Placeholders）可以有多选值，每个选项的值用 , 分隔，选项的开始和结束用管道符号 | 将选项包含，例如: ${1|one,two,three|}，当插入代码片段，选择制制表位（Tabstops）的时候，选项将提示用户选择其中一个值。

4. 变量（Variables）

   使用 $name 或者 ${name|default} 可以插入变量的值，如果变量未被赋值则插入 default 的值或者空值。当变量未被定义，则将变量名插入，变量（Variables）将被转换为占位符（Placeholders）

   可以使用以下变量：

   • TM_SELECTED_TEXT 当前选定的文本或空字符串
   • TM_CURRENT_LINE 当前行的内容
   • TM_CURRENT_WORD 光标下的单词的内容或空字符串
   • TM_LINE_INDEX 基于零索引的行号
   • TM_LINE_NUMBER 一个基于索引的行号
   • TM_FILENAME 当前文档的文件名
   • TM_FILENAME_BASE 不带扩展名的当前文档的文件名
   • TM_DIRECTORY 当前文档的目录
   • TM_FILEPATH 当前文档的完整文件路径
   • RELATIVE_FILEPATH 相对文件路径当前文档的相对（打开的工作区或文件夹）文件路径
   • CLIPBOARD 剪切板里的内容
   • WORKSPACE_NAME 工作区名称打开的工作区或文件夹的名称
   • WORKSPACE_FOLDER 工作区文件夹打开的工作区或文件夹的路径

   插入当前日期或时间：

   • CURRENT_YEAR 当前年（四位数）
   • CURRENT_YEAR_SHORT 当前年（本年最后两位数）
   • CURRENT_MONTH 当前月（'02'）
   • CURRENT_MONTH_NAME 本月的全名（'July'）
   • CURRENT_MONTH_NAME_SHORT 月份的简称（'Jul'）
   • CURRENT_DATE 当前日
   • CURRENT_DAY_NAME 当天的名称（'Monday'）
   • CURRENT_DAY_NAME_SHORT 当天的短名称（'Mon'）
   • CURRENT_HOUR 当前小时
   • CURRENT_MINUTE 当前分钟
   • CURRENT_SECOND 当前秒
   • CURRENT_SECONDS_UNIX 自Unix时代以来的秒数 1970年1月1日（UTC/GMT的午夜）

   插入随机数：

   • RANDOM 6位的十进制随机数
   • RANDOM_HEX 6位的十六进制随机数
   • UUID A Version 4 UUID

   当前语言的行注释或块注释:

   • BLOCK_COMMENT_START 块注释开始标识,如 PHP /* 或 HTML <!--
   • BLOCK_COMMENT_END 块注释结束标识,如 PHP */ 或 HTML -->
   • LINE_COMMENT 行注释，如： PHP // 或 HTML <!-- -->

5. 变量转换（Variable transforms）

   变量转换（Variable transforms）允许变量在插入前改变变量的值，变量转换（Variable transforms）由三部分组成

   • 正则匹配：使用正则表达式匹配变量值，若变量无法解析则值为空。
   • 格式串：允许引用正则表达式匹配组。格式串允许条件插入和做简单的修改。
   • 正则表达式匹配选项

   ${TM_FILENAME/(.*)\\..+$/$1/}
     |           |         |  |
     |           |         |  |-> 无选项设置
     |           |         |
     |           |         |-> 引用第一个捕获组的内容
     |           |
     |           |
     |           |-> 匹配后缀前的所有字符串
     |
     |
     |-> 文件名（带后缀）
   

6. 语法（Grammar）

   通过正则进行变量转换。

   例如：/upcase | /downcase | /capitalize | /camelcase | /pascalcase，可以进行大小写、驼峰转换。

   文件名下划线转大驼峰：${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/}

来自 Snippets in Visual Studio Code (opens new window)

使用

打开代码片段配置文件：

• 文件 > 首选项 > 用户片段
• Ctrl + Shift + P，输入 用户代码片段

然后选中指定文件类型，在里面按照格式放进去就可以用了

TIPS

本文提供的代码片段都是单独的每个功能，直接拷贝放入 json 文件里面的第一层即可

HTML

1. 生成HTML文档结构

   安装插件 HTML Snippets，在 .html 文件里面输入英文感叹号，然后回车即可。

JS

1. ESLint注释

   • 注释行

   "Print to eslint-disable-line": {
     "prefix": "eslint-disable-line",
     "body": [
       " // eslint-disable-line"
     ],
     "description": "eslint-disable-line"
   }
   

   • 注释下一行

   "Print to eslint-disable-next-line": {
     "prefix": "eslint-disable-next-line",
     "body": [
       "// eslint-disable-next-line"
     ],
     "description": "eslint-disable-next-line"
   }
   

   • 注释块

   "Print to eslint-disable": {
     "prefix": "eslint-disable",
     "body": [
       "/* eslint-disable */\n",
       "/* eslint-enable */"
     ],
     "description": "eslint-disable"
   }
   

2. 代码区域

   "Print to region-block": {
     "prefix": "region-block",
     "body": [
       "// #region $1\n",
       "// #endregion $1",
     ],
     "description": "JavaScript Region Block"
   }
   

Vue

1. 生成Vue文档结构

   "Print to Vue": {
     "prefix": "vue",
     "body": [
       "<template>",
       "  <div>",
       "    $1",
       "  </div>",
       "</template>\n",
       "<script>\n",
       "export default {",
       "  name: '$TM_FILENAME_BASE',",
       "  data() {",
       "    return {};",
       "  },",
       "  methods: {},",
       "};\n",
       "</script>\n",
       "<style lang=\"scss\" scoped>\n",
       "</style>\n"
     ],
     "description": "vue template"
   }
   

   插入后可以直接输入组件名称，此片段的 css 以 scss 为例，可自行修改，也可以配置成 选择项（Choice） ，生命周期可以按自己的需求增删

Markdown

WARNING

使用 markdown 代码片段需要再 setting.json 中添加如下配置：

"[markdown]": {
    "editor.formatOnSave": true,
    "editor.renderWhitespace": "all",
    "editor.quickSuggestions": {
        "other": true,
        "comments": true,
        "strings": true
    },
    "editor.acceptSuggestionOnEnter": "on"
},

1. 生成 Table

   "Print to Table": {
     "prefix": [
       "table",
       "/table"
     ],
     "body": [
       "| header | header |",
       "| ------ | ------ |",
       "| cell   | cell   |"
     ],
   }
   

   暂时没找到可以控制生成几行几列的方法，都是生成一个基础的，然后复制

2. 生成博客文章头部 Front Matter

   "Print Front Matter": {
     "prefix": ["frontmatter", "/frontmatter"],
     "body": [
       "---",
       "title: $TM_FILENAME_BASE",
       "date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",
       "categories:",
       " - ${1|About,Articles,Study|}",
       "tags:",
       " - $1",
       "author: fengchunqi",
       "---\n",
     ],
   },
   

3. 生成代码块

   "Print Code Block": {
     "prefix": ["code block"],
     "body": [
       "```${1|html,js,css,vue,bash,markdown|}\n",
       "```\n",
     ],
   },