VSCode 如何操作用户自定义代码片段（模板）

最新推荐文章于 2024-07-03 08:50:20 发布

@阿猫阿狗~

最新推荐文章于 2024-07-03 08:50:20 发布

阅读量1.3k

点赞数

原文链接：https://blog.csdn.net/qq_40191093/article/details/82915028

版权

文章目录

（1）VSCode 如何操作用户自定义代码片段（快捷键）

原文链接：https://blog.csdn.net/qq_40191093/article/details/82915028

第一步：文件==>首选项==>用户代码片段
在这里插入图片描述

第二步：选择代码片段文件 html.json
在这里插入图片描述

第三步：输入要自定义的快捷键和模板代码段

{
	"vh": {
		"prefix": "vh", // 触发的关键字 输入vh按下tab键
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"",
			"<head>",
			"    <meta charset=\"UTF-8\">",
			"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"    <title>Document</title>",
			"    <script src=\"./lib/vue-2.4.0.js\"></script>",
			"</head>",
			"",
			"<body>",
			"    <div id=\"app\"></div>",
			"    <script>",
			"        var vm=new Vue({",
			"           el:'#app',",
			"           data:{},",
			"           methods:{}",
			"        });",
			"    </script>",
			"</body>",
			"",
			"</html>",
		],
		"description": "vh components"
	},
	"vuec": {
		"prefix": "vuec",
		"body": [
			"<template>",
			"  <div>",
			"    $0",
			"  </div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"",
			"  data () {",
			"    return {",
			"    }",
			"  },",
			"",
			"  methods: {},",
			"",
			"  created () {",
			"  }",
			"}",
			"</script>",
			"",
			"<style lang='less' scoped>",
			"",
			"</style>",
			""
		],
		"description": "Log output to console"
	}
}

在这里插入图片描述

第四步：进入 .html 后缀的文件中按快捷键 vh 后按 tab 键即可实现快速输入代码段
在这里插入图片描述

PS: 设置成功

（2）vetur的配置

安装vue扩展之后在设置里的代码片段搜vue 替换里面的代码片段就可用vuec+tab快速搭建vue页面结构
原文链接：https://blog.csdn.net/qq_43688916/article/details/98728495

{
    "Print to console": {
        "prefix": "vuec",
        "body": [
            "<template>",
            "  <div>",
            "    $0",
            "  </div>",
            "</template>",
            "",
            "<script>",
            "export default {",
            "",
            "  data () {",
            "    return {",
            "    }",
            "  },",
            "",
            "  methods: {},",
            "",
            "  created () {",

            "  }",
            "}",
            "</script>",
            "",
            "<style lang='less' scoped>",
            "",
            "</style>",
            ""
        ],
        "description": "Log output to console"
    }
}

（3）安装了Vetur之后setting.json的配置

原文链接：https://blog.csdn.net/weixin_37580235/article/details/82021921
VSCode本身自带了Emmet，能够通过Tab键对HTML5的代码进行快速开发，不过，VSCode中需要修改Emmet配置才能对Vue进行支持。打开文件->首选项->设置，就会进入到 settings.json 文件中，在左侧是VSCode默认的配置，在窗口右侧就可以进行一系列的配置：

右侧写入：

{
 // 强制单引号
 "prettier.singleQuote": true,
 // 尽可能控制尾随逗号的打印
 "prettier.trailingComma": "all",
 // 开启 eslint 支持
 "prettier.eslintIntegration": true,
 // 保存时自动fix
 "eslint.autoFixOnSave": true,
 // 添加 vue 支持
 "eslint.validate": [
  "javascript",
  "javascriptreact",
  {
   "language": "vue",
   "autoFix": true
  }
 ],
 // 使用插件格式化 html
 "vetur.format.defaultFormatter.html": "js-beautify-html",
 // 格式化插件的配置
 "vetur.format.defaultFormatterOptions": {
  "js-beautify-html": {
   // 属性强制折行对齐
   "wrap_attributes": "force-aligned"
  }
 },
 "vetur.format.defaultFormatter": {
     "html": "prettier",
     "css": "prettier",
     "postcss": "prettier",
     "scss": "prettier",
     "less": "prettier",
     "js": "prettier",
     "ts": "prettier",
     "stylus": "stylus-supremacy"
 },
 // html颜色高亮
 "files.associations": {
     ".eslintrc": "json",
     "*.vue": "html"
 },
 "emmet.syntaxProfiles": {
     "javascript": "jsx",
     "vue": "html",
     "vue-html": "html"
 }
}

（5）2020/11/06 更新（代码片段文件目录新增片段请修改此文件【vue.json.code-snippets】）

C:\Users\huilong.han\AppData\Roaming\Code\User\snippets

在这里插入图片描述

全局代码片段

{
	// Place your 全局 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": "log",
	// 	"body": [
	// 		"console.log('$1');",
	// 		"$2"
	// 	],
	// 	"description": "Log output to console"
	// }
	"vh1": {
		"prefix": "vh1", // 触发的关键字 输入vh按下tab键
		"body": [
			"<!DOCTYPE html>",
			"<html lang=\"en\">",
			"<head>",
			"    <meta charset=\"UTF-8\">",
			"    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
			"    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">",
			"    <title>Document</title>",
			"    <script src=\"vue.min.js\"></script>",
			"<!--   <script src=\"https://cdn.staticfile.org/vue/2.2.2/vue.min.js\"></script> -->",
			"<link rel=\"stylesheet\" href=\"base.css\">",
			"</head>",
			"<body>",
			"    <div id=\"app\"></div>",
			"    <script>",
			"        var vm=new Vue({",
			"           el:'#app',",
			"           data:{},",
			"           methods:{}",
			"        });",
			"    </script>",
			"</body>",
			"</html>",
		],
		"description": "vh1 components"
	},
	"vuec": {
		"prefix": "vuec",
		"body": [
			"<template>",
			"  <div>",
			"    $0",
			"  </div>",
			"</template>",
			"",
			"<script>",
			"export default {",
			"",
			"  data () {",
			"    return {",
			"    }",
			"  },",
			"",
			"  methods: {},",
			"",
			"  created () {",
			"  }",
			"}",
			"</script>",
			"",
			"<style lang='less' scoped>",
			"",
			"</style>",
			""
		],
		"description": "Log output to console"
	}
}

@阿猫阿狗~

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
VSCode 如何操作用户自定义代码片段（模板）

VSCode 如何操作用户自定义代码片段（快捷键）第一步：文件==>首选项==>用户代码片段第二步：选择代码片段文件 html.json第三步：输入要自定义的快捷键和模板代码段{ "vh": { "prefix": "vh", // 触发的关键字输入vh按下tab键 "body": [ "<!DOCTYPE html>", "<html lang=\"en\">", "", "<head>", "
复制链接

扫一扫