Vs Code Vue、Html模板生成(设置用户片段)
程序员文章站
2022-07-05 20:01:19
...
一、目的
使用Vscode编辑器,创建文件很是常见,使用模板文件可以提高效率。下面以创建Vue模板文件为例。并附上Html配置的代码
二、使用步骤
1.打开VsCode—首选项—用户片段。
2.搜索Vue—打开Vue.json文件并添加以下代码
Vue.json代码如下:
{
"Print to console": {
"prefix": "vue",
"body": [
"<template>",
" <div class='$1'></div>",
"</template>",
"",
"<script>",
"export default {",
" name: '$1',",
" data () {",
" return {}",
" },",
" components: {},",
" created () {},",
" mounted () {},",
" methods: {}",
"}",
"</script>",
"<style lang='stylus' scoped>",
"</style>",
""
],
"description": "Vue template" }}
Html模板文件的代码如下。
{
"Print to console": {
"prefix": "html",
"body": [
"<!DOCTYPE html>",
" <html>",
" <head>",
" <meta charset='utf-8'>",
" <title></title>",
" </head>",
" <body>",
" </body>",
" </html>"
],
"description": "html template" }
}
三、测试效果
- 输入vue并敲击Enter,文件中自动生成模板代码。如下图所示。
- 成功界面如下:
加油撒!!!
上一篇: 计算机组成原理(下)
下一篇: 统计字符串中字符出现的个数。