这是我参与更文挑战的第 3 天，活动详情查看： 更文挑战
前文【效率工具】VsCode 扩展插件(二) 介绍了前端开发过程中一些常用的插件扩展，可以当做参考当然也有也不足，有些好用插件没有罗列，欢迎各路大佬不吝赐教，补充完善，欢迎分享
本文分享在日常 coding 过程中，快速输入 代码段的一些设置， 实践（偷懒）促进科技发展
自用代码片段 Snippets
这里列举自己在开发过程中用到的代码片段， 方便快速输入，重复代码片段的复用，比如快速输入文件信息头部注释、js 中快速注释todo list,comments、vue文件中只需敲几个字母 vue2/vue3 快速输入自动生成一大段代码 .vue文件的模板等等，极大提高我们码代码的效率
当然也有一些插件，生成代码片段的
Vue 3 Snippets， 也可以使用， 当然自定义的还是熟悉，可定制，记得牢
设置方法：
快捷键复习：
Ctrl + shift + p输入 snippets(并不一定输入整个单词)，选择配置用户代码片段设置（管理）>用户代码片段>新建（一般选择创建
全局代码片段）>输入文件名
在打开的 json 文件中，我们可以看到如下图注释说明，提示把整个 vscode 全局的 snippets 放在这里，每个代码片段包含四个字段
scope： 作用域，也就是该 snippets 生效的文件类型，例如javascript,typescript等
prefix： 前缀，就是在编辑器中敲下这个前缀以后就会出现的生成代码
body： 就是通过prefix生成出来的代码
description： 这个代码片段的描述
上图代码说明: $1 、$2 是生成代码后按 tab 会停留给你输入的地方，而 $0 是生成代码后首先停留的光标的位置。后面还会遇到诸如 ${1:label}, ${2:another} 这样的占位符，其实是一样的，但占位符会有数字后面的英文名，例如上面的就是 label， another. 下面列举自用一些代码片段
1. 注释相关
1.1 auth.code-snippets
使用方法： 文件内输入 ac 回车（enter）即可快速输入 body 里的内容
// comment.snippets
"author & create_at": {
"prefix": "ac",
"body": [
"/**",
" * @author: xn213",
" * @create_at: $CURRENT_MONTH_NAME_SHORT $CURRENT_DATE, $CURRENT_YEAR",
" */",
"",
"$1"
]
},
1.1 comments.code-snippets
输入对应字母，输出对应代码： log、comment、attention、...
"Print to console": {
"prefix": "log",
"body": ["console.log('$1', $2)", "$3"],
"description": "Log output to console"
},
"comment": {
"prefix": "comment",
"body": [
"/************* ↓↓ '$1' by xn213 *************/",
"$2",
"/************* ↑↑ '$1' by xn213 *************/"
],
"description": "注释"
},
"attention": {
"prefix": "attention",
"body": ["/************* ATTENTION '$1' by xn213 **************/"],
"description": "注意⚠️"
},
"todo": {
"prefix": "todo",
"body": ["/************* TODO '$1' by xn213 **************/"],
"description": "待做事项"
},
2. 代码段
当然 可以都写在一个文件中，#2.1 和 #2.2 这里作了分类 模块化
2.1 vue3.code-snippets
输入 vue3 快速生成 Vue3 代码段
"vue3 template": {
"prefix": "vue3",
"body": [
"<template>",
" <div class=\"${3:test}\">",
" $4",
" </div>",
"</template>",
"",
"<script lang=\"ts\">",
"import { defineComponent } from 'vue'",
"export default defineComponent({",
" name: '${1:test}',",
" props: {}",
"})",
"</script>",
"<style lang=\"${2:scss}\" scoped>",
"",
"</style>",
"",
]
},
2.2 vue2.code-snippets
"vue template": {
"prefix": "vue2",
"body": [
"<template>",
" <div class='${3:test}'>",
" $4",
" </div>",
"</template>",
"",
"<script>",
" export default {",
" name: '${1:test}',",
" props: {},",
" data() {",
" return {",
" ",
" }",
" },",
" created(){ ",
" ",
" },",
" methods: {",
" ",
" },",
" }",
"</script>",
"<style lang=\"${2:scss}\" scoped>",
"",
"</style>",
"",
]
},
2.3 代码段 相关
快速引入模块，接口，工具等： import、api、utils ...
"引入 api 接口": {
"prefix": "api",
"body": [
"import { $1 } from '@/api$2'"
],
"description": "引入 api 接口"
},
"引入 utils 工具方法": {
"prefix": "utils",
"body": [
"import { $1 } from '@/utils/index.js'"
],
"description": "引入 utils 工具方法"
},
"选择单个 dom 元素": {
"prefix": "qs",
"body": [
"document.querySelector('$1')"
],
"description": "选择单个 dom 元素"
},
当然这里列举一部分，抛砖引玉， 这些都是可以根据自己需求来定制的， 可以大大提高码字效率，有没有
get到呢?
预告
下文我将更新【效率工具】Vscode 的一些优化配置， 敬请期待.. hahah
