我们常开发一些功能类似的模块，比方说模态框（modal）
常见做法是从已实现的地方复制一套过来
-
高级程序员是不屑于用复制这种手法的，他们用ctrl c
-
其他地方复制过来的modal夹杂着许多业务代码，要删删改改
这里可以使用代码片段，一键生成模板代码
如何写一些自定义的代码片段呢？
打开vscode，文件 -> 首选项 -> 代码片段
根据代码类型选择，我们用的是react + ts，这里选typescriptreact.json
{
"modal 模板": {
"prefix": "modal",
"body": [
"import { Modal } from '@/components';",
"import React, { Component } from 'react';",
"",
"interface ${1:$TM_FILENAME_BASE}ModalProps {",
" visible: boolean;",
" setVisible: (visible: boolean) => void;",
"}",
"",
"interface ${1:$TM_FILENAME_BASE}ModalState {}",
"",
"export default class ${1:$TM_FILENAME_BASE}Modal extends Component<${1:$TM_FILENAME_BASE}ModalProps, ${1:$TM_FILENAME_BASE}ModalState> {",
" submit() {",
" console.log('submit')",
" }",
"",
" render() {",
" const { visible, setVisible } = this.props;",
"",
" return (",
" <Modal",
" className=\"setting-modal\"",
" title=\"设置\"",
" visible={visible}",
" onClose={() => setVisible(false)}",
" onCancel={() => setVisible(false)}",
" onOk={() => this.submit()}",
" >",
" ${2:content}",
" </Modal>",
" );",
" }",
"}",
""
]
}
}
基础语法
-
scope: 代码片段作用于哪种语言。 不同语言之间以
,隔开。 常用的有javascript, typescript,html,css,vue等。 如果设置为""就代表所有地方都生效 -
prefix：前缀，代码片段名称， 即输入此名字就可以调用定义的代码片段
-
body：一个数组， 主体，即模板的主体内容，需要编写的代码写在这里。每一行一个字符串
-
description：代码片段描述，输入名字后编辑器显示的提示信息。未定义的情况下直接显示对象名。把上面的设置更改为自己想要的样子
-
$1: 生成代码后光标的初始位置，允许重复。按tab键可以在按照定义的顺序切换。还可以定义
$2, $3, ..., $n。 注意: $0 是结束位置。 -
${1: placeholders} : 生成代码后光标的初始位置(其中1表示光标开始的序号，字符表示生成代码后光标会直接选中字符
-
\t: 制表符。 如果想让代码缩进， 前边加个
\t。 同理\n是换行 -
${1|one,two,three|} : 占位符(Placeholders)可以有多选值，每个选项的值用 , 分隔，选项的开始和结束用管道符号(|)将选项包含。当插入代码片段，选择制制表位(Tabstops)的时候，会列出选项供用户选择
-
一些较常用变量， 使用语法: ${TM_SELECTED_TEXT}
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_MONTH 当前月
CURRENT_DATE 当前日
CURRENT_DAY_NAME_SHORT 当天的短名称（’Mon’）
CURRENT_HOUR 当前小时
CURRENT_MINUTE 当前分钟
CURRENT_SECOND 当前秒
BLOCK_COMMENT_START 块注释开始标识,如 PHP /* 或 HTML <!--
BLOCK_COMMENT_END 块注释结束标识,如 PHP */ 或 HTML -->
LINE_COMMENT 行注释，如： PHP // 或 HTML <!-- -->
打开一个tsx文件试试
