企业官网建设流程全解析

CLIPBOARD是vscode提供的变量；因此当你配置如下代码块，你将实现如下效果：先复制你想打印的变量然后再任意位置输入clg回车后你将得到console.log(xxx, 'xxx')

这里再推荐一个VSCode扩展：print-console-log ：选中任意变量按下 ctrl+alt+l即可在合理的位置插入console.log(xxx, 'xxx')其他功能这里不再详细讲解其他功能，感兴趣移步配置

{ // Place your global 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": "html,javascript,typescript,vue,javascriptreact,typescriptreact", // 在.xxx文件下生效 "prefix": "log", "body": [ "console.log(${1:$CLIPBOARD}${2}, '${1:$CLIPBOARD}')${0}" ], "description": "Log output to console" } }

抛砖引玉：编写react时经常使用useState进行数据定义，useState通过数组解构返回原始值以及修改函数，编写起来不是很方便这里推荐配置如下代码块

{ "react useState": { "prefix": "dars", "scope": "javascript,typescript,vue,javascriptreact,typescriptreact", "body": [ "const [${1:$CLIPBOARD}, set${CLIPBOARD/(.*)/${1:/capitalize}/}] = useState(${0})" ], "description": "react useState" }, }

这里再推荐一个扩展VSCode扩展：variable-translator （请移步进行相关配置）搭配扩展；

在内容中输入'用户列表'并选中（搭配扩展快捷键shift+alt+x将翻译写入粘贴板）输入dars你将得到：

const [userList, setUserList] = useState()

另外 VSCode扩展：variable-translator 配置完成后新建文件时会检测是否是英文非英文会进行翻译并将翻译下结果写到剪贴板因此当搭配这个扩展以及如下代码块你将得到如下效果：

"vue3-setup-template": { "prefix": "vueSetup", "scope": "vue", "body": [ "<script setup>", " ", "</script>", "", "<template>", " <div class=\"${1:${CLIPBOARD/(.*)/${1:/kebabcase}/}}\">", " ${CLIPBOARD}$0", " </div>", "</template>", "", "<style lang=\"${2:css}\" scoped>", " .${1:${CLIPBOARD/(.*)/${1:/kebabcase}/}} {}", "</style>" ], "description": "vue3-setup-template" }

这里推荐一个代码块生成网站：snippet generator

事实上vscode提供给了我们很多变量大家可以举一反三自行拓展：Visual Studio Code 代码片段中的变量