VSCode配置快捷html模板1.安装vscode
官⽹地址：code.visualstudio/
2.安装⼀个插件，识别vue⽂件
插件库中搜索Vetur，安装
3.新建代码⽚段
⽂件-->⾸选项-->⽤户代码⽚段-->点击新建代码⽚段--取名xx.json 确定
File-->preferences-->User Snippets-->New Global Snippets file..-->取名xx.json-->Enter
4.删除不要的代码
5.粘⼊⾃⼰写的html模板
{
/
/ Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
"Print to console": {
// "scope": "javascript,typescript",
"prefix": "v", //快捷键
"body": [
"<!DOCTYPE html>",
"<html lang=\"en\">",
"<head>",
"<meta charset=\"UTF-8\">",
"<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
"<title>title</title>",
"<script src=\"cdn.jsdelivr/npm/vue/dist/vue.js\"></script>",
"</head>",
"<style>",
"",
"</style>",
"<body>",
"<div id=\"app\">",
"{{msg}}",
"</div>",
"<script>",
"const obj = {",
"msg:'Hello world!',",
"count:0,",
"};",
"const app = new Vue({",
"el: '#app',",
"data: obj,",
"methods: {",
"",
"},",
"});",
"</script>",
"</body>",
"</html>",
],
// "description": "Log output to console"
"description": "vue html template"
}
}
View Code
6.说明：
上⾯代码中的 "prefix": "v", 就是快捷键；名称可以⾃⼰更换
输⼊v按键盘的tab就⾏
7.同理可⽣成⾃定义.vue⽂件模板
vue.json
{
"Print to console": {
"prefix": "vue",
"body": [
"<!-- $1 -->",
"<template>",
"<div class='$2'>$5</div>",
"</template>",
"",
"<script>",
"//这⾥可以导⼊其他⽂件（⽐如：组件，⼯具js，第三⽅插件js，json⽂件，图⽚⽂件等等）",            "//例如：import 《组件名称》 from '《组件路径》';",
"",
"export default {",
"//import引⼊的组件需要注⼊到对象中才能使⽤",
"components: {},",
"data() {",
"//这⾥存放数据",
"return {",
"",
"};",
"},",
html新年网页中文模板"//监听属性类似于data概念",
"computed: {},",
"//监控data中的数据变化",
"watch: {},",
"//⽅法集合",
"methods: {",
"",
"},",
"//⽣命周期 - 创建完成（可以访问当前this实例）",
"created() {",
"",
"},",
"//⽣命周期 - 挂载完成（可以访问DOM元素）",
"mounted() {",
"",
"},",
"beforeCreate() {}, //⽣命周期 - 创建之前",
"beforeMount() {}, //⽣命周期 - 挂载之前",
"beforeUpdate() {}, //⽣命周期 - 更新之前",
"updated() {}, //⽣命周期 - 更新之后",
"beforeDestroy() {}, //⽣命周期 - 销毁之前",
"destroyed() {}, //⽣命周期 - 销毁完成",
"activated() {}, //如果页⾯有keep-alive缓存功能，这个函数会触发",
"}",
"</script>",
"<style lang='scss' scoped>",
"//@import url($3); 引⼊公共css类",
"$4",
"</style>"
],
"description": "Log output to console"
}
}
View Code
输⼊vue按键盘的tab就⾏
参考：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。