为了减少反复的代码输入,降低开发时的体力,把时间多花在脑力上
开发时有意去了解自己的开发习惯,将通用的代码片段提取并熟悉运用,提升开发效率
因而有了下面的开发前奏
-
打开snippets配置:
2.选择snipTab.code-snippets文件,里面可以配置你想要的代码捷径方式,一些重复性强的代码片段,避免重复敲打不必要的代码。配置例子如下:
//vue页面创建模板
"template": {
"scope": "javascript,typescript,vue",
"prefix": "v5",
"body": [
"<template>",
"</template>",
"<script>",
"export default {",
" name: ${1},",
" data () {",
" return {",
" }",
" }",
"}",
"</script>",
"<style lang='less'>",
"</style>"
]
},
//请求函数
"put operation": {
"scope": "javascript,typescript, vue",
"prefix": "put",
"body": [
"this.$axios",
" .$put($1, $2)",
" .then(() => {",
" this.$message.success('编辑成功')",
" })",
]
},
//函数定义
"function": {
"scope": "javascript,typescript, vue",
"prefix": "fs",
"body": [
"$1() {",
" $2",
"},",
]
},
//函数注释
"comment": {
"scope": "javascript,typescript,vue",
"prefix": "fa",
"body": [
"/**",
" * @func $1",
" * @desc $2",
" * @param {$3} $4 $5",
" * @return {$6} $7",
" */"
]
},
//表单校验
"validate": {
"scope": "javascript,typescript, vue",
"prefix": "vali",
"body": [
"await this.$refs.${1}.validate()",
]
},
//函数API
"map": {
"scope": "javascript,typescript, vue",
"prefix": "map",
"body": [
"array.map(item=>{",
" return",
"})",
]
},
//this输入
"this": {
"scope": "javascript,typescript, vue",
"prefix": "t",
"body": [
"this.$1",
]
},
//... 更多的自定义自己探索
3.上面的变量 $1, $2...等是光标的流动轨迹,每输入一个变量按tab,光标会跳转到下一个变量处,利用这个技巧可以减少鼠标的点击和键盘的移动,极其舒适。