VS Code 中建立文件模板

... 2019-09-03 01:04 大约 3 分钟

做前端开发的同学都知道,我们在编辑器中输入一个 ! 然后按下 tab 键就可以帮我们自动补全 html 结构,那么当我们写 Vue 或者是 React 的时候,页面其实都是有一个初始模板的,我们要怎样做到类似上面简单输入就可以得到文件模板呢,今天就以 Vue 为模板举栗给大家介绍 VSCode 上的一个很好用的功能,叫做 用户代码片段。

# 文件模板创建详解

首先我们选择 文件--> 首选项 --> 用户代码片段

mark

输入 Vue ,在下拉中选择 Vue.json

mark

将文件中的代码覆盖为(注释中的内容可以去掉,在编辑器中鼠标悬浮在对象的键上就可以看到这些提示啦)

{
	"Print to console": {
			"prefix": "vue", // 在 Intellisense 中选择代码片段时将使用的前缀
			"body": [
					"<template>",
					"  <div>template</div>",
					"</template>",
					"",
					"<script>",
					"export default {",
					"  name: '',",
					"  data () {",
					"    return {",
					"",
					"    }",
					"  },",
					"  mounted () {",
					"",
					"  },",
					"  methods: {",
					"",
					"  }",
					"}",
					"</script>",
					"",
					"<style lang=\"less\" scoped>",
					"",
					"</style>",
					"$2"
			],
			"description": "Vue模板" // 代码片段描述。
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

然后新建一个 Vue 文件,输入 vue ,选择我们刚才创建的模板,一般是下拉里面的第一个,然后我们的文件模板就生成好啦

mark

生成效果

<template>
  <div>template</div>
</template>

<script>
export default {
  name: '',
  data () {
    return {

    }
  },
  mounted () {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

同样的,我们可以根据上述语法片段来创建我们自己的文件模板,比如项目中自定义的 api 文件等

# 删除代码片段

通过打开的代码片段json文件,右键选择在 finder 中打开,直接在文件夹中删掉对应文件即可。为文件夹创建的代码片段在文件夹下的 .vscode 文件夹中。

# 代码片段未生效的可能解决办法

  1. md 文件中不生效,在 settings.json 中添加一段 "[markdown]": { "editor.quickSuggestions": true }
  2. 如果你建立的是特定文件的代码片段,看看编辑器右下角识别的文件类型是否符合你的预期
  3. 网上还有说要将设置中的 editor.suggest.snippetsPreventQuickSuggestions 置为 false ,我并未用到,关于这项配置可以看看 这篇文章 给出的解析
  4. 被已有代码提示挤到底下了,设置 "editor.snippetSuggestions": "top" 来保持自己的代码片段在最上方

# 文件模板汇总

整理一下常用的文件模板,方便查询使用, vue 的在上面,我就不重复添加了

# cml 文件(Chameleon 多端统一框架)

{
	"Print to console": {
			"prefix": "cml",
			"body": [
					"<template>",
					"  <view>Hello Chameleon!</view>",
					"</template>",
					"",
					"<script>",
					"",
					"class Template   {",
					"",
					"  data = {",
					"  }",
					"",
					"  computed = {",
					"  }",
					"",
					"  watch = {",
					"  }",
					"",
					"  methods = {",
					"  }",
					"",
					"  beforeCreate() {",
					"  }",
					"",
					"  created() {",
					"  }",
					"",
					"  beforeMount() {",
					"  }",
					"",
					"  mounted() {",
					"  }",
					"",
					"  beforeDestroy() {",
					"  }",
					"",
					"  destroyed() {",
					"  }",
					"",
					"}",
					"",
					"export default new Template();",
					"</script>",
					"",
					"<style lang=\"less\">",
					"",
					"</style>",
					"",
					"<script cml-type=\"json\">",
					"{",
					"  \"base\": {",
					"    \"usingComponents\": {}",
					"  },",
					"  \"wx\": {",
					"    \"navigationBarTitleText\": \"index\",",
					"    \"backgroundTextStyle\": \"dark\",",
					"    \"backgroundColor\": \"#E2E2E2\"",
					"    ",
					"  },",
					"  \"alipay\": {",
					"    \"defaultTitle\": \"index\",",
					"    \"pullRefresh\": false,",
					"    \"allowsBounceVertical\": \"YES\",",
					"    \"titleBarColor\": \"#ffffff\"",
					"  },",
					"  \"baidu\": {",
					"    \"navigationBarBackgroundColor\": \"#ffffff\",",
					"    \"navigationBarTextStyle\": \"white\",",
					"    \"navigationBarTitleText\": \"index\",",
					"    \"backgroundColor\": \"#ffffff\",",
					"    \"backgroundTextStyle\": \"dark\",",
					"    \"enablePullDownRefresh\": false,",
					"    \"onReachBottomDistance\": 50",
					"  },",
					"}",
					"</script>",
					"$2"
			],
			"description": "cml模板"
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84

# vue + class api + ts

{
	"Print to console": {
			"prefix": "tsvue",
			"body": [
					"<template>",
					"  <section>template</section>",
					"</template>",
					"",
					"<script lang=\"ts\">",
					"import { Vue, Component, Prop } from 'vue-property-decorator'",
					"// 通过 namespace 便捷引用 store",
					"// import { namespace } from 'vuex-class'",
					"// const SMatedStore = namespace('AutoMatedTests')",
					"",
					"// 注册组件",
					"// @Component({",
					"//    components: { xxComponent }",
					"// })",
					"@Component",
					"export default class XXX extends Vue {",
					"  // prop 数据",
					"  // @Prop({ type: Boolean, default: false }) loading!: boolean",
					"",
					"  // data 数据",
					"  uid: string | number = ''",
					"  flag = false",
					"",
					"  // 计算属性",
					"  get isTagSelected() {",
					"    return this.uid === '123'",
					"  }",
					"",
					"  // 将 store 相关挂载到当前实例",
					"  // @SMatedStore.State('totalInfo') totalInfo!: BasicObject",
					"  // @SMatedStore.Getter('isLogSelected') isLogSelected!: boolean",
					"  // @SMatedStore.Mutation('setMonitorStatus') setMonitorStatus!: Function",
					"",
					"  // 生命周期钩子",
					"  created() {}",
					"}",
					"</script>",
					"",
					"<style lang=\"less\" scoped>",
					"",
					"</style>",
					"$2"
			],
			"description": "Vue-TS模板"
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

用的熟练了之后可以注释等辅助去掉,只留一个基础架子

上次编辑于: 2021年6月18日 19:25