vscode设置自定义代码片段模板snippet
我们常开发一些功能类似的模块，比方说模态框（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文件试试
作者：钱厚端小菜
链接：https://juejin.cn/post/7018740408813355038