工作中总结的代码片段

snippet [ˈsnɪpɪt], 或者说「 code snippet 」, 也即代码片, 指的是能够帮助输入重复代码模式, 比如循环或条件语句, 的模板. 通过 snippet , 我们仅仅输入一小段字符串, 就可以在代码片引擎的帮助下, 生成预定义的模板代码, 接着我们还可以通过在预定义的光标位置之间跳转, 来快速补全模板.

当然, 看图更易懂. 下图将 ivue 补全为 vue 文件基本骨架, 并通过光标的跳转, 快速补全了待填键值对:

关于基于 vscode 的代码片段配置, 看看这篇文章就够了: 跟我一起在 Visual Studio Code 添加自定义 snippet(代码段), 附详细配置_开发工具_猫科龙-CSDN博客

可以在这个网址将自己的代码生成编辑器可以解析的代码片段, 毕竟手动配置代码片段也是比较麻烦的

好了, 废话说了这么多, 该上干货了. 翠花, 上酸菜

咳咳, 还要再啰嗦几句: 由于本人目前只用 Vue, 那么就说一下代码片段中 vue.json 和 vue-html.json 的区别吧: 如果是在一个空白的 vue 文件中(里面没有内容), 那么 vue.json 里的代码片段生效, 就像 init Vue 这种初始化 Vue 的代码片段就需要写在这个 json 中; 而如果这个 vue 文件中已经有内容了, 比如在 init Vue 以后, 又要添加别的 html 标签代码片段, 那这种代码片段就需要写到 vue-html.json 中了. 当然了, 他俩的共同点就是只在 .vue 文件中生效

Vue 代码片段

vue.json

{
  "init Vue": {
    "prefix": "ivue",
    "body": [
      "<template>",
      "  <div class=\"$1\">$2</div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  name: '$TM_FILENAME_BASE',",
      "  components: {},",
      "  props: {},",
      "  data() {",
      "    return {}",
      "  },",
      "  computed: {},",
      "  watch: {},",
      "  methods: {",
      "    init() {}",
      "  },",
      "  created() {",
      "    this.init()",
      "  },",
      "  mounted() {}",
      "}",
      "</script>",
      "",
      "<style lang=\"less\">",
      ".$1 {",
      "}",
      "</style>",
      ""
    ],
    "description": "init Vue"
  }
}

ElementUI 代码片段

html

vue-html.json

{
	"el-dialog": {
		"prefix": "edg",
		"body": [
			"<el-dialog",
			"  :visible.sync=\"$1\"",
			"  :title=\"$2\"",
			"  :close-on-click-modal=\"false\"",
			"  :close-on-click-esc=\"false\"",
			"  :show-close=\"false\"",
			">",
			"  $5",
			"  <span slot=\"footer\">",
			"    <el-button @click=\"reset$3Form\">取消</el-button>",
			"    <el-button type=\"primary\" @click=\"submit$4Form\">确定</el-button>",
			"  </span>",
			"</el-dialog>"
		],
		"description": "el-dialog"
	},
	"el-form": {
		"prefix": "efm",
		"body": [
			"<el-form :model=\"$1\" :ref=\"$2\" :rules=\"$3\" label-width=\"auto\">",
			"  <el-form-item label=\"$4\" prop=\"$5\">",
			"    <el-input v-model=\"$6\" placeholder=\"$7\"></el-input>",
			"  </el-form-item>",
			"</el-form>"
		],
		"description": "el-form"
	},
	"el-table": {
		"prefix": "etb",
		"body": [
			"<el-table :data=\"$1\" height=\"100%\" border>",
			"  <el-table-column label=\"$2\" prop=\"$3\" align=\"center\"></el-table-column>",
			"</el-table>"
		],
		"description": "el-table"
	},
	"el-table-column-template": {
		"prefix": "etct",
		"body": [
			"<el-table-column label=\"${1:操作}\" align=\"center\">",
			"  <template slot-scope=\"scope\">",
			"    <el-button type=\"text\" icon=\"el-icon-edit\" @click=\"edit$2(scope.row)\">编辑</el-button>",
			"    <el-button type=\"text\" icon=\"el-icon-delete\" @click=\"del$2(scope.row)\">删除</el-button>",
			"  </template>",
			"</el-table-column>"
		],
		"description": "el-table-column-template"
	},
	"el-upload": {
		"prefix": "eup",
		"body": [
			"<el-upload",
			"  :action=\"$api.upload($1)\"",
			"  multiple$2",
			"  :data=\"${3:uploadData}\"",
			"  :show-file-list=\"${4:false}\"",
			"  :accept=\"$5\"",
			"  :before-remove=\"${6:beforeRemove}\"",
			"  :on-remove=\"${7:handleRemove}\"",
			"  :on-success=\"${8:handleSuccess}\"",
			"  :on-error=\"${9:handleError}\"",
			"  :file-list=\"${10:fileList}\"",
			">",
			"  <el-button size=\"small\" type=\"primary\">${11:点击上传}</el-button>",
			"</el-upload>"
		],
		"description": "el-upload"
	},
	"acceptExcel": {
		"prefix": "acex",
		"body": [
			"accept=\"application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-project\""
		],
		"description": "acceptExcel"
	}
}

js

javascript.json

{
	"el-confirm": {
		"prefix": "ecfm",
		"body": [
			"this.$$confirm(`此操作将永久删除该$1, 是否继续`, '提示', {",
			"  type: 'warning'",
			"}).then(() => {",
			"  $2",
			"})"
		],
		"description": "el-confirm"
	},
	"el-resetFields": {
		"prefix": "erf",
		"body": [
			"this.$$refs[this.$1].resetFields()"
		],
		"description": "el-resetFields"
	},
	"el-validate": {
		"prefix": "evf",
		"body": [
			"this.$refs[this.$1].validate(valid => {",
			"  if (valid) {",
			"    $2",
			"  }",
			"})"
		],
		"description": "el-validate"
	}
}

html5 代码片段

html.json

{
	"html5": {
		"prefix": "html5",
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"  <head>",
			"    <meta charset=\"UTF-8\">",
			"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"    <title>${1:Document}</title>",
			"    <style type=\"text/css\">",
			"      ",
			"    </style>",
			"  </head>",
			"  <body>",
			"    $2",
			"  </body>",
			"</html>"
		],
		"description": "HTML5"
	}
}

md 代码片段

markdown.json

{
	"initPost": {
		"prefix": "ipost",
		"body": [
			"---",
			"layout: post",
			"title: $1",
			"date: ${2:$CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE}",
			"categories: [$3]",
			"tags: [$4]",
			"keywords: $5",
			"thumbnail: /img/$6/thumbnail.png",
			"---",
      "",
      "$6"
		],
		"description": "initPost"
	}
}