vscode中配置代码片段
下面在赠送一波vue3的代码片段吧。
·
步骤如下:
- 设置->用户代码片段
- 新增全局代码片段
- 起全局代码片段文件名“
xxx.code-snippets
”
这里以配置vue2初始代码片段为例
- 配置具体代码片段
按enter进入文件配置,以下是vue2的代码片段示例,具体可以自己随意配置
{
"Print to console": {
"prefix": "vue2",
"body": [
"<template>",
" <div>",
"",
" </div>",
"</template>",
"",
"<script>",
"export default {",
" data() {",
" return {",
"",
" }",
" },",
" created() {",
"",
" },",
" mounted() {",
"",
" },",
" methods: {",
"",
" },",
"}",
"</script>",
"<style scoped lang='scss'>",
"",
"</style>"
],
"description": "Log output to console"
}
}
- 使用
新建一个vue文件,开始输入vue,vscode会有提示的
这就ok拉
下面在赠送一波vue3的代码片段吧
{
"Print to console": {
"prefix": "vue3",
"body": [
"<template>",
" <div $1></div>",
"</template>",
"",
"<script setup>",
"import { ref, onMounted } from 'vue';",
"import { useRoute, useRouter } from 'vue-router';",
"const route = useRoute();",
"const router = useRouter();",
"onMounted(() => {",
" //console.log('3.-组件挂载到页面之后执行-------onMounted')",
"})",
"</script>",
"<style scoped lang='scss'>",
"</style>"
],
"description": "Log output to console"
}
}
更多推荐
已为社区贡献3条内容
所有评论(0)