代码片段生成

代码片段生成(code snippet)可以提高我们的编码效率

1.新建全局代码片段

在Vscode中生成代码片段

在Vscode中选择菜单 文件 ->  首选项 -> 配置用户代码片段 -> 新建全局代码片段文件

然后命名，我这里命名为masecho-global-code

2.添加代码片段

推荐使用代码生成网站：https://snippet-generator.app/

{
	"Print to vue": {
		"prefix": "vue",
		"body": [
			"<template>",
			"  <div>",
			"    $1",
			"</div>",
			"</template>",
			"",
			"<script>",
			"",
			"export default {",
			"  name: \"$TM_FILENAME_BASE\",",
			"  data() {",
			"    return {};",
			"  },",
			"  methods: {},",
			"  computed: {},",
			"  mounted() {},",			
			"};",
			"</script>",
			"",
			"<style scoped lang=\"less\">",
			"",
			"</style>",
			""
		],
		"description": "产生vue2模板"
	},	
	"Print to console": {
		"scope": "javascript,typescript",
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	}
}

3.常用变量

TM_SELECTED_TEXT 当前选定的文本或空字符串
TM_CURRENT_LINE 当前行的内容
TM_CURRENT_WORD 光标下的单词内容或空字符串
TM_LINE_INDEX 基于零索引的行号
TM_LINE_NUMBER 基于单索引的行号
TM_FILENAME 当前文档的文件名 (Home.vue  => Home.vue)
TM_FILENAME_BASE 当前文档没有扩展名的文件名 (Home.vue => Home )
TM_DIRECTORY 当前文档的目录
TM_FILEPATH 当前文档的完整文件路径
CLIPBOARD 剪贴板的内容
WORKSPACE_NAME 已打开的工作空间或文件夹的名称

4. 代码片段示例

{
	"vue2 component": {
		"scope": "vue",
		"prefix": "vue",
		"body": [
			"<template>",
			"  <div>",
			"    $1",
			"  </div>",
			"</template>",
			"",
			"<script>",
			"",
			"export default {",
			"  name: \"$TM_FILENAME_BASE\",",
			"  data() {",
			"    return {};",
			"  },",
			"  methods: {},",
			"  computed: {},",
			"  mounted() {},",
			"};",
			"</script>",
			"",
			"<style scoped lang=\"less\">",
			"",
			"</style>",
			""
		],
		"description": "产生vue2模板"
	},
	"vue3 component": {
		"prefix": "vue3",
		"body": [
			"<script setup lang=\"ts\">",
			"import { ref } from \"vue\";",
			"",
			"</script>",
			"",
			"<template>",
			"  <div>",
			"    $1",
			"  </div>",
			"</template>",
			"",
			"<style scoped lang=\"less\"></style>",
			""
		],
		"description": "vue3 component"
	},
	"Print to console": {
		"scope": "javascript,typescript",
		"prefix": "log",
		"body": [
			"console.log('$1');",
			"$2"
		],
		"description": "Log output to console"
	},
	"ng module": {
		"prefix": "ngm",
		"body": [
			"import { IonicModule } from '@ionic/angular';",
			"import { RouterModule } from '@angular/router';",
			"import { NgModule } from '@angular/core';",
			"import { CommonModule } from '@angular/common';",
			"import { FormsModule } from '@angular/forms';",
			"import { app} from './app.page';",
			"import { ComponentsModule } from 'src/app/components/components.module';",
			"import { PipesModule } from 'src/app/pipes/pipes.module';",
			"",
			"@NgModule({",
			"  imports: [",
			"    IonicModule,",
			"    CommonModule,",
			"    FormsModule,",
			"    ComponentsModule,",
			"    PipesModule,",
			"    RouterModule.forChild([{ path: '', component: app}])",
			"  ],",
			"  declarations: [app]",
			"})",
			"export class app Module{}",
			""
		],
		"description": "ng module"
	},
	"ng component": {
		"prefix": "ngc",
		"body": [
			"import { Component, OnInit, OnDestroy } from '@angular/core';",
			"",
			"@Component({",
			"  selector: 'app-$TM_FILENAME_BASE',",
			"  templateUrl: '$TM_FILENAME_BASE.html',",
			"  styleUrls: ['$TM_FILENAME_BASE.scss']",
			"})",
			"export class $TM_FILENAME_BASE Page implements OnInit, OnDestroy {",
			"  constructor() {}",
			"",
			"  /**初始化 ************************************************************************************************/",
			"",
			"  ngOnInit(): void {}",
			"",
			"  ngOnDestroy() {}",
			"}",
			""
		],
		"description": "ng component"
	},
	"ng html": {
		"prefix": "ngh",
		"body": [
			"<ion-header>",
			"  <ion-toolbar class=\"AN-theme\">",
			"    <ador-top-nav mainTitle=\"\"></ador-top-nav>",
			"  </ion-toolbar>",
			"</ion-header>",
			"<ion-content class=\"AN-theme\">",
			"</ion-content>",
			"<ion-footer>",
			"</ion-footer>"
		],
		"description": "ng html"
	},
	"longComment": {
		"prefix": "lc",
		"body": [
			"  /*******************************************************************************************************",
			"  * $1",
			"  */",
		],
		"description": "长注释"
	},
	"middleComment": {
		"prefix": "mc",
		"body": [
			"  /********************************************************************",
			"  * $1",
			"  */",
		],
		"description": "中注释"
	},
	"shortComment": {
		"prefix": "sc",
		"body": [
			"  /***** $1 ***********************/"
		],
		"description": "短注释"
	},
	"try-catch-finally": {
		"prefix": "try",
		"body": [
			" try {",
			"    $1",
			" } catch (error) {",
			"      ",
			" }finally{",
			"      ",
			" }"
		],
		"description": "tryp-catch-finally"
	},
	"`js": {
		"prefix": "`js",
		"body": [
			"```js",
			"$1",
			"```"
		],
		"description": "`js"
	},
	"`sh": {
		"prefix": "`sh",
		"body": [
			"```sh",
			"$1",
			"```"
		],
		"description": "`sh"
	}
}