菜单

升迁你的coding效用之snippet大法,vue代码模板的不二等秘书籍_vue

2020年3月28日 - www.2138.com
升迁你的coding效用之snippet大法,vue代码模板的不二等秘书籍_vue

1.设置.vue模板

www.2138.com,一讲到写代码的效率问题,很多程序员同志们都会想到各种编辑器的插件,这些插件有的能帮你快速地规范代码格式,有些能自动补全闭合标签,还有的能智能提示文件路径等。

打开编辑器,点击文件 —— 首选项 —— 用户代码片段,会弹出来一个输入框。

其实除了安装各种插件之外,有些编辑器(如vscode,sublime)内置了自定义代码片段功能,即snippet。

在输入框输入vue,回车,会打开一个vue.json文件。

升迁你的coding效用之snippet大法,vue代码模板的不二等秘书籍_vue。自定义snippet之后,可以通过输入简短的触发指令而生成完整的代码片段。如输入log即可生成console.log('')

{ "Print to console": { "prefix": "vue", "body": [ "", " n", " ", "n", "", "export default {", " data() {", " return {n", " }", " },", " components: {n", " }", "}", "n", "n", "", "$2" ], "description": "Log output to console" }}

然而似乎很多程序员盆友们很少把这个功能用起来。下面以vscode编辑器为例,介绍snippet的玩法。

模板内容可按自己的喜好自行修改。

1.进入菜单 code–首选项–用户代码片段

然后新建一个.vue文件,输入vue然后按tab键。

www.2138.com 1

2.如果第一步没有成功

菜单示意图

如果第一步成功是最好的,万一按tab键没有成功生成模板,而是多了一个空格:

2.选择代码片段的语言,自定义的代码片段只会在选定的语言类型文件里生效

步骤一:点击文件 —— 首选项 —— 设置,修改以下设置:

www.2138.com 2

"emmet.syntaxProfiles": { "vue-html": "html", "vue": "html"},"emmet.triggerExpansionOnTab": true

选择代码片段的语言

步骤二:点击编辑器右下角笑脸左边的文件类型,选择配置文件关联,输入vue然后回车。右下角的文件类型就会从html变成vue。这时再用tab键就可以成功生成模板了~

3.以vue代码片段语言为例,生成vue.json文件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

www.2138.com 3

示例说明

现在我们可以开始自定义我们常用的vue代码片段了,如:

"Vue template": {
   "prefix": "vue",
   "body": [
       "<template>nt<div>ntt$1nt</div>n</template>n<script>nexport default {ntn}n</script>n<style lang="less" scoped>nn</style>",
    ],
   "description": "Log output vue template"
    }

现在我们新建一个test.vue文件,输入vue再回车即可生成vue代码模板

www.2138.com 4

生成的vue代码模板

很方便对吧!简直是“write less,code more”有木有!

4.配置优化
vscode默认的配置是,用户输入指定的prefix字段,然后根据编辑器提示选择并回车生成代码片段,但是有时候编辑器的弹窗提示存在一定的延迟。

www.2138.com 5

image.png

优化建议:进入菜单
code–首选项–设置,添加配置"editor.tabCompletion": true,这样我们就可以在输入prefix字段后按Tab键快速生成代码片段啦~

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图