一,需求原因
有些代码是通用的,每次都要重写或者复制太麻烦,希望通过vscode自定义用户代码片段,需要用的时候,直接使用。
二,新建用户代码片段流程
1,打开自定义代码片段文件:文件>首选项>用户代码片段>选择要新建的代码片段类型
这里我要新建的是react native的代码片段,我直接选择全局的:
2,编写自己的代码片段
{
// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
"Print to console": {
"scope": "javascript,typescript",
"prefix": "cl",
"body": [
"console.log('$1');",
],
"description": "Log output to console"
},
"react native template": {
"prefix": "rncom",
"body": [
"import React from 'react';",
"import { Text, View } from 'react-native';",
"class Navigator extends React.Component {",
"render() {",
"return (",
"<View>",
"<Text>组件模板</Text>",
"</View>",
");",
"}",
"}",
"export default Navigator;"
],
"description": "react native的模板文件"
}
}
三,具体使用
四,具体语法:
prefix: 代码片段名字,即输入此名字就可以调用代码片段
body: 这个是代码段的主体.需要编写的代码放在这里
$1: 生成代码后光标的初始位置
$2: 生成代码后光标的第二个位置,按 tab 键可进行快速切换,还可以有 $3,$4,$5.....
${1,字符}: 生成代码后光标的初始位置(其中 1 表示光标开始的序号,字符表示生成代码后光标会直接选中字符)
description: 代码段描述,输入名字后编辑器显示的提示信息
tab键制表符:\t
换行: \r 或者\n
版权声明:本文为weixin_42349568原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。