⭐⭐⭐ Spring Boot 项目实战	⭐⭐⭐ Spring Cloud 项目实战
《Dubbo 实现原理与源码解析 —— 精品合集》	《Netty 实现原理与源码解析 —— 精品合集》
《Spring 实现原理与源码解析 —— 精品合集》	《MyBatis 实现原理与源码解析 —— 精品合集》
《Spring MVC 实现原理与源码解析 —— 精品合集》	《数据库实体设计合集》
《Spring Boot 实现原理与源码解析 —— 精品合集》	《Java 面试题 + Java 学习指南》

摘要: 原创出处 juejin.cn/post/7393312386571337768 「寅时码」欢迎转载，保留摘要，谢谢！

🙂🙂🙂关注微信公众号：【芋道源码】有福利：

RocketMQ / MyCAT / Sharding-JDBC 所有源码分析文章列表

RocketMQ / MyCAT / Sharding-JDBC 中文注释源码 GitHub 地址

您对于源码的疑问每条留言都将得到认真回复。甚至不知道如何读源码也可以请教噢。

新的源码解析文章实时收到通知。每周更新一篇左右。

认真的源码交流微信群。

引言

当你熟悉某一门语言后，你就会发现，你的大部分时间

都是在写大量的重复代码，比如 for、while、try、函数、class 等

其实你写这些重复代码的时间，都属于是毫无意义且折磨自己的

如果你学习的是高度约定式的框架，那么你每个文件的重复代码则会更多

所以今天，我来把重复的代码提取出来，做成代码片段

让大家一键配置，且教会你大多数配置项的意思，让你可以自定义

本文将教会你一键 CV，或者一键修改插件源码，实现懒人式配置

QA 环节：

Q：可能有人会说，我下载个插件就行了，你这多麻烦啊？闲的没事干吗？疑
A：如果说我不喜欢插件作者的前缀和部分代码行为怎么办呢？我自己改不是更加方便吗。悟！

另外，你也可以在 VSCode 下载插件，然后去 VSCode 源码目录复制插件的代码片段

复制好后自行修改即可，我的 SVG 片段就是复制作者的代码

插件源码位置在 C:\Users\YourUsername\.vscode\extensions

Users 后面的名字，是你的用户名，这是 window 的文件路径

我已经准备了如下代码片段，放在了文末的 Git，供大家一键复制使用

js、ts、jsx、tsx、vue
java
xml、html、svg
scss
shader
markdown
shellscript

配置

配置项解读

先来打开配置看看吧

你可以针对全局、文件或者某个语言进行代码片段配置

随便新建一个配置文件，然后就能看到如下的注释介绍

prefix - 激活代码片段配置的代码前缀
body - 代码片段的详细代码体。使用数组描述，一个子项，就是一行。
你可以使用 \n | \t 等，但是写多了很乱，所以我很少用
description - 代码片段的详细描述
scope - 代码作用域（创建全局代码片段用的，.code-snippets 结尾的文件），比如指定作用域为 js，多个语言用逗号分隔

{
 // Place your snippets for c here. Each snippet is defined under a snippet name and has a prefix, body and 
 // description. 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": {
 //  "prefix": "log",
 //  "body": [
 //   "console.log('$1');",
 //   "$2"
 //  ],
 //  "description": "Log output to console"
 // }
}

基础示例

接下来是一个简单示例，让我们快速上手：

当我输入 pri 时，会触发代码补全
而 $1，则是我光标最后的位置（光标可输入位置）

"javascript print": {
    "prefix": "pri",
    "body": [
       "console.log($1)",
    ],
    "description": "print"
},

效果如下

默认代码示例

这个 ${1:'我要打印喽'}，就是第一个光标默认的值
你的光标默认在 $1 位置
当你按下 Tab 键时，光标会移动到 $2 的位置

"javascript print": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "pri",
    "body": [
-        "console.log($1)",
+        "console.log(${1:'我要打印喽'}, $2)",
    ],
    "description": "print"
},

这就意味着这个默认值你随时可以改，或者保留，或者直接跳到下一个位置

效果如下

同时编辑多个区域示例

两个地方都是 $1，那么我们就能同时编辑这个光标
实现醒目的打印，这样打印时，就能更加方便的了解打印的变量名是什么，同时还能触发代码补全

 "javascript print": {
    "scope": "javascript,typescript,javascriptreact,typescriptreact",
    "prefix": "pri",
    "body": [
-       "console.log(${1:'我要打印喽'}, $2)",
+       "console.log('打印的是: $1', $1)",
    ],
    "description": "print"
},

特殊字符

$ 表示光标位置，这和 SCSS 的变量名重复

如果你就想用 $ 的话，那就要写 $$

如下所示

 "while": {
    "prefix": "whlie",
    "body": [
        "\\$i: 6;",
        "@while \\$i > 0 {",
        "    .item-#{\\$i} {",
        "        width: 2em * \\$i;",
        "    }",
        "    \\$i: \\$i - 1;",
        "}"
    ],
    "description": "while"
}

内置变量

${TM\_FILENAME\_BASE} - 当前的文件名

这个变量可以帮助我们快速生成文件名关联代码

比如 vue 代码的文件名和组件名关联（vue2/ 3 的代码片段我都写了，大家放心复制即可）

"vue3": {
        "prefix": "vue3",
        "body": [
            "<template>",
            "    <div class=\"${TM_FILENAME_BASE}-container\">",
            "        ",
            "    </div>",
            "</template>",
            "",
            "<script setup lang=\"${2:ts}\">",
            "",
            "",
+           "defineOptions({ name: '${TM_FILENAME_BASE}' })",
            "const props = withDefaults(",
            "    defineProps<{",
            "        modelValue: any",
            "    }>(),",
            "    {",
            "    }",
            ")",
            "",
            "const emit = defineEmits<{",
            "    (e: 'update:modelValue', data: any): void",
            "}>()",
            "",
            "</script>",
            "",
            "<style lang=\"${1:scss}\" scoped>",
            "",
            "</style>",
            "",
        ],
        "description": "vue3"
    },

内置函数

capitalize - 首字母大写

有时候代码变量名有关联，比如驼峰命名法

常见的场景就是 react 的 useState 场景

我需要实现只输入 val，实现下面的代码

const [val, setVal] = useState(1)

"useState": {
    "scope": "javascriptreact,typescriptreact",
    "prefix": "uses",
    "body": [
        "const [${1}, set${1/(.*)/${1:/capitalize}/}] = useState($2)"
    ],
    "description": "React useState"
},

高度重合代码设置

很多语言有相同的代码，比如 return

但是有的语言是强制分号，有的不用

所以可以创建全局代码片段设置一下

这种以 code-snippets 就是全局代码片段

你可以写 scope 属性表示代码的作用域，使用逗号隔开每一种语言

下面这段代码，让代码片段在 java 的带分号，其他的不带

 "semicolon return": {
            "prefix": "re",
+    "scope": "java",
            "body": [
                    "return $1;"
            ],
            "description": "semicolon return"
    },
"return": {
            "prefix": "re",
+    "scope": "javascript,typescript,javascriptreact,typescriptreact",
            "body": [
                    "return $1"
            ],
            "description": "return"
    },