vscode 自定义代码片段

SHERlocked93 发布于2019-07-01 12:34 / 3433人阅读

摘要：插件描述语法制表位使用制表位可是在代码片段中移动光标位置，使用来指定光标的位置数字代表光标的移动的顺序，值得注意的时代表光标的最后位置。

实现效果

起因

最近在写一个全新的项目，在项目中频繁创建各种类，这就导致很多重复的东西需要频繁的写，例如类名，命名空间，继承关系...那么有没有一种办法能解决这个问题呢？

提出设想

我想起了，最初用 sublime text 的时候，可以利用代码片段功能大段的生成html代码，当时就觉得十分的方便，那么 vscode 有没有这个功能呢?经过 google 之后我知道 vscode 是有代码片段功能的。既然有了想法，也具备了基础实施条件，那么接下来开始尝试实现之前的想法。

资料查询

经过一番 google 后发现对于 vscode snippet 介绍都在相对基础的简单应用（只是一些插入固定代码和光标介绍），者显然无法实现我们生成类名和明明空间的想法，google 无果，那么只能看看 vscode 官方文档果然有意想不到的收获，看完官网介绍后，基本就确定此路是可行的。

snippet 示例

在 File > Preferences (Code > Preferences on macOS) 中选择 User Snippets 在弹出框里选择对应的代码片段语言，我这里使用的是php

 "Print to console": {
         "prefix": "log",
         "body": [
             "console.log("$1");",
             "$2"
         ],
         "description": "Log output to console"
    }

在打开的 php.json 中有示例代码：

Print to console 代码片段名称

prefix 插件前缀

body 插件内容可以是字符串，也可以为数组，若为数组每个元素都做为多带带的一行插入。

description 插件描述

Snippet 语法 制表位(Tabstops)

使用制表位(Tabstops)可是在代码片段中移动光标位置，使用$1,$2来指定光标的位置,数字代表光标的移动的顺序，值得注意的时$0代表光标的最后位置。如果有多个相同的制表位(Tabstops)会在编译器里同时出现多个光标（类似编译器的块编辑模式）。

占位符(Placeholders)

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

选择项(Choice)

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

变量(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 当前文档的完整文件路径

CLIPBOARD 剪切板里的内容

插入当前日期或时间：

CURRENT_YEAR 当前年(四位数)

CURRENT_YEAR_SHORT 当前年(两位数)

CURRENT_MONTH 当前月

CURRENT_MONTH_NAME 本月的全名（’七月’）

CURRENT_MONTH_NAME_SHORT 月份的简称（’Jul’）

CURRENT_DATE 当前日

CURRENT_DAY_NAME 当天的名称（’星期一’）

CURRENT_DAY_NAME_SHORT 当天的短名称（’Mon’）

CURRENT_HOUR 当前小时

CURRENT_MINUTE 当前分钟

CURRENT_SECOND 当前秒

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

BLOCK_COMMENT_START 块注释开始标识,如 PHP /* 或 HTML

LINE_COMMENT 行注释，如： PHP // 或 HTML

下面片则会生成 PHP / Hello World /

{
    "hello": {
        "scope": "php",
        "prefix": "hello",
        "body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"
    }
}

变量转换(Variable transforms)

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

正则匹配：使用正则表达式匹配变量值，若变量无法解析则值为空。

格式串：允许引用正则表达式匹配组。格式串允许条件插入和做简单的修改。

正则表达式匹配选项

下面例子是使用变量转换(Variable transforms)将带后缀的文件名转换为不带后缀的文件名

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

需求实现 要解决的问题

生成Class 的命名空间、类名、选择继承关系

问题分析

项目目录结构如下所示

peoject
|
|----application
|--------admin
|------------services
|----------------TestServices.php

类名可以直接使用 TM_FILENAME_BASE 变量的值即可，命名空间则需要使用 TM_DIRECTORY 变量，以 TestServices.php 为例，TM_DIRECTORY 得到的目录为 peojectapplicationadminservices我们只需要将peojectapplication 替换为 app 得到 appadminservices 就是我们的明明空间了，至于继承就是一个选择项就可以了。既然已经全部知道该如何实现，接下来就是代码实现的过程了。

代码实现

"service-construct" :{
        "prefix": "gen",
        "body": [
            "namespace ${TM_DIRECTORY/.*application/app/};
",
            "class $TM_FILENAME_BASE extends ${1|BaseService,BaseController,BaseModel|}",
            "{",
            "	public function __construct() 
    {
		$this->model = new 
	}",
            "}"
        ],
        "description": "generate service class"

    },

一些思考

上述代码基本上完成了我要实现的功能，但是也存在了一些问题，例如：我现在是用 windows 操作系统，因而TM_DIRECTORY 得到的目录为 peojectapplicationadminservices 若是 linux 系统，此代码片段是无法正常的生成命名空间的，我做了一些资料的搜索，代码片段并没有自定义变量的功能（也许可以，只是我么有找到方法，如果有知道的大牛，请留言赐教。
随着对 vscode snippet 的深入了解，我之前所设想的方案要用代码片段的方式实现是有些困难的，vscode 将其作为一个快速生成代码的解决方案，我们所写的代码片段相当于一个带有填空模板，而对代码片段的应用就是生成带有制表符的代码模板，然后根据制表符顺序补全代码。
至于这个不完美的方案，我打算再研究一下代码片段是否能完全实现，如果依旧解决不了，就选用其它方案进行尝试。

参考链接

Creating your own snippets

服务器托管混合云自定义ubb代码 php自定义表单代码代码片段添加代码片段

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/30995.html

vscode js 实用的代码片段

摘要：目的是为了减少工作量。入口在选择图示的文件，那么这里就是可以自定义的代码片断的地方。我举一个例子你们就明白了，看代码打印在这段代码中，是指你要提示的代码前缀，效果如图第二个就是我们自定义的代码片段选择之后的效果这个就是我们在代码中定义的。作为一名前端开发工程师，我们每天都想着代码怎么抽成组件，公共方法。目的是为了减少工作量。但是你有没有想过我们一直在写重复的代码，比如每天都会写 im...

wuyangchun 2019-08-23 17:13 评论0 收藏0
snippet,让你编码效率翻倍

摘要：做个记录，上菜了如何打开配置这里以为例，其他编辑器大概也差不多。时间相关当前年份当前年份的后两位格式化为两位数字的当前月份，如当前月份的全称，如当前月份的简称，如当天月份第几天当天周几，如当天周几的简称，如当前小时小时制当前分钟当前秒数。为什么谈到Snippet 今天下午在用vscode做小程序的时候，发现很不方便，因为商店里提供的代码片段极为有限，而且平时几乎每天都需要用到代码片段...

denson 2019-08-29 16:42 评论0 收藏0
snippet,让你编码效率翻倍

摘要：做个记录，上菜了如何打开配置这里以为例，其他编辑器大概也差不多。时间相关当前年份当前年份的后两位格式化为两位数字的当前月份，如当前月份的全称，如当前月份的简称，如当天月份第几天当天周几，如当天周几的简称，如当前小时小时制当前分钟当前秒数。为什么谈到Snippet 今天下午在用vscode做小程序的时候，发现很不方便，因为商店里提供的代码片段极为有限，而且平时几乎每天都需要用到代码片段...

caspar 2019-08-23 11:57 评论0 收藏0
snippet,让你编码效率翻倍

摘要：做个记录，上菜了如何打开配置这里以为例，其他编辑器大概也差不多。时间相关当前年份当前年份的后两位格式化为两位数字的当前月份，如当前月份的全称，如当前月份的简称，如当天月份第几天当天周几，如当天周几的简称，如当前小时小时制当前分钟当前秒数。为什么谈到Snippet 今天下午在用vscode做小程序的时候，发现很不方便，因为商店里提供的代码片段极为有限，而且平时几乎每天都需要用到代码片段...

wuyangchun 2019-08-05 14:58 评论0 收藏0
VScode快速一键生成html、vue、jsx、ajax、sass、docker等代码片段

摘要：学会添加自定义代码段就可以极大的提高你的开发效率文件首选项用户代码片段选择你需要新建的代码片段的语言进入代码片段编辑界面所有的代码片段需要用或包裹表示制表符空的一行必须用或包裹代表光标第一次出现的位置，代表按下后光标第二次出现的位置一个简单学会添加自定义snippet（代码段）就可以极大的提高你的开发效率 showImg(https://segmentfault.com/img/bV...

Simon 2019-08-21 18:31 评论0 收藏0