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