配置代码片段,通过自己设置的一些暗号可以快速的完成一些代码段,然后非一般的写代码
如果你以前没有配置过代码片段:
首先打开vs code先在你的任意一个项目中新建一个文件比如page.vue,在里面随便写上点你常用的代码,然后在vs code的页面左下角找到设置按钮,点开找到配置用户代码片段,如图:
点击以后选择新建代码片段,然后输入你刚才的那个文件名称,然后vs code会新建一个json文件,然后就可以在里面写你的预设代码片段啦
仿照着他给你的这个来写
Print to console:写你的暗号
prefix:写你的暗号,和上面的的一样
body:里面是你的代码片段,每一行用双引号扩上,如果你的代码片段中有双引号改成单的,然后每一行末尾要加逗号。
以下是我常用的一些代码片段:
"newpage": {
// "scope": "javascript,typescript",
// 快速得到一个页面
"prefix": "newpage",
"body": [
"<template>",
"<div class='content'>",
"</div>",
"</template>",
"<script>",
"export default {",
"components: {},",
"data() {",
"return {",
"};",
"},",
"methods: {},",
"mounted() {},",
"};",
"</script>",
"<style scoped>",
".content {",
"width: 100%;",
"height: 100%;",
"background-color: rgba(4, 30, 43, 0.8);",
"}",
"</style>",
],
"description": "Log output to console"
},
"getfor": {
// "scope": "javascript,typescript",
// 快速得到for循环
"prefix": "getfor",
"body": [
"for( let i = 0 ; i < .length ; i++ ){",
"}"
],
"description": "Log output to console"
},
"getif": {
// "scope": "javascript,typescript",
// 快速得到if语句
"prefix": "getif",
"body": [
"if( ){",
"}"
],
"description": "Log output to console"
},
"getifelse": {
// "scope": "javascript,typescript",
// 快速得到ifelse语句
"prefix": "getifelse",
"body": [
"if( ){",
"} else{",
"}"
],
"description": "Log output to console"
},
"rflex": {
// 快速得到横向弹性布局
"prefix": "rflex",
"body": [
"display: flex;",
"flex-direction: row;",
"justify-content:;",
],
"description": "Log output to console"
},
"cflex": {
// 快速得到纵向弹性布局
"prefix": "cflex",
"body": [
"display: flex;",
"flex-direction: column;",
"justify-content:;",
],
"description": "Log output to console"
},
"gbox": {
// 快速得到一个盒子
"prefix": "gbox",
"body": [
"width: 100%;",
"height: 100%;",
"background-color: ;",
],
"description": "Log output to console"
}