VS code如何配置代码片段和一些快速搭建页面的代码片段

配置代码片段,通过自己设置的一些暗号可以快速的完成一些代码段,然后非一般的写代码

如果你以前没有配置过代码片段:

首先打开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"
	}

猜你喜欢

转载自blog.csdn.net/weixin_45905700/article/details/125499180
今日推荐