代码国际化是个非常枯燥繁琐的重复性工作，你需要创建多个语言文件，把中文复制进去，给中文取个名称，再把名称复制代码里中文的位置，按照不同的格式写完整。
其中有大量重复代码，比如 {{}}，this.$t，还有国际化模块对应的名称main.，drawer.之类的，需要复制来复制去。
而设置用户代码片段可以简化复制黏贴这个步骤，减少国际化30%的时间。
这里以vscode为例，点击设置 ——> 选择用户代码片段——>新建全局代码片段——>输入文件名，会得到一个 .code-snippets的文件。
将下面的代码复制进去，body中的passenger 可以根据国际化模块名修改。
{
"vue-i18n-mall": {
"scope": "vue-html",
"prefix": "vt",
"body": "\$t('passenger.$1')",
"description": "vue i18n mall"
},
"vue-i18n-mall-close": {
"scope": "vue-html",
"prefix": "vtc",
"body": "{{\$t('passenger.$1')}}",
"description": "vue i18n mall"
},
"vue-i18n-mall-js": {
"scope": "javascript, typescript",
"prefix": "vt",
"body": "this.\$t('passenger.$1')",
"description": "vue i18n mall"
},
"vue-i18n-mall-external": {
"scope": "javascript, typescript",
"prefix": "vte",
"body": "i18n.t('passenger.$1')",
"description": "vue i18n mall"
}
}
vue-i18n-mall是代码片段对应的名称，可随意设置，触发代码片段的时候会展示匹配到的代码片段名称。
scope是代码片段生效的范围。因为创建的是全局代码片段，需要设置scope。目前我知道的scope有vue-html，javascript,，typescript，html，css。编辑器里已有一些默认的对应语言代码片段，可以直接使用，不需要加scope。
prefix是触发代码片段的字符，可随意设置。
body对应代码片段内容，可以是字符串，也可以为数组。
body中的 $1 代表输入prefix回车后光标出现的位置。比如按照上面的代码，光标会出现在 passenger. 之后。也有$2 $3 ...... ，表示使用tab键后光标的位置。
description对应代码片段描述。
在代码中表现为
好了，现在大家可以愉快地进行国际化了。
当然，代码片段还能在其它地方提升开发效率。
比如输入log，会得到 console.log(); 。这个是vscode自带的片段，不需要我们设置。
比如在vue.json中写入下面的代码，新建vue文件时，直接输入vue就能得到一个基础vue模板。
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div>",
" $1", // 光标位置
" </div>",
"<\/template>",
"", // 表示空行
"<script>",
"export default {",
" components: {},",
"",
" props: {},",
"",
" data () {",
" return {$2}",
" },",
"",
" computed: {},",
"",
" watch: {},",
"",
" created () {},",
"",
" mounted () {},\n",
" methods: {}",
"}",
"<\/script> ",
"",
"<style lang=\"scss\" scoped>", // 双引号需要加上转义符\，其它符号其实不用加
"",
"<\/style>",
],
"description": "Vue"
}
}
如果你想删除代码片段文件，只需要去指定的文件夹删除就行了。
