VSCode 如何操作用户自定义代码片段
自己写了一些根据自己习惯弄成的自定义代码片段，不喜跳过
很简单，快速过一下，F1，然后输入 snippets
vue代码片段
{
// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and
// description. 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": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// },
"doc for vue": {
"prefix": "vue",
"body": [
"<template>",
" <div>",
" ${1:标题}",
" </div>",
"</template>",
"<script>",
" export default{",
" data(){",
" return{",
" ${2}",
" }",
" },",
" created() {//在实例创建完成后被立即调用",
" ${2}",
" },",
" methods:{",
" ${2}",
" }",
" }",
"</script>",
"<style lang=\"scss\" scoped>",
" ${2}",
"</style>"
],
"description": "快速生成vue"
},
"doc for vue父组件": {
"prefix": "vue父组件",
"body": [
"<template>",
" <div>",
" ${1:标题}",
" </div>",
"</template>",
"<script>",
" //1.0导入 xx 组件",
" import xxx from '路径'",
" export default{",
" data(){",
" return{",
" ${2}",
" }",
" },",
" created() {//在实例创建完成后被立即调用",
" ${2}",
" },",
" methods:{",
" ${2}",
" },",
" components:{//1.1 注册 xx 子组件",
" ${2}",
" }",
" }",
"</script>",
"<style lang=\"scss\" scoped>",
" ${2}",
"</style>"
],
"description": "vue使用父组件模板"
},
"doc for vue子组件": {
"prefix": "vue子组件",
"body": [
"<template>",
" <div>",
" ${1:标题}",
" </div>",
"</template>",
"<script>",
" export default{",
" data(){",
" return{",
" ${2}",
" }",
" },",
" created() {//在实例创建完成后被立即调用",
" ${2}",
" },",
" methods:{",
" ${2}",
" },",
" props:['xx']//接收父组件传的值",
" }",
"</script>",
"<style lang=\"scss\" scoped>",
" ${2}",
"</style>"
],
"description": "vue使用子组件模板"
},
}
html代码
{
"doc for html5": {
"prefix": "html5",
"body": [
"<!DOCTYPE html>",
"<html>",
"<head>",
" <meta charset=\"utf-8\">",
" <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\" />",
" <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">",
" <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\">",
" <title>${1:标题}</title>",
" <script src=\"js/flexible.js\"></script>",
" <script src=\"js/jquery-1.11.3.min.js\"></script>",
"</head>",
"<body>",
" ${2}",
"</body>",
"</html>"
],
"description": "快速生成HTML5"
},
"doc for html5vue": {
"prefix": "html5vue",
"body": [
"<!DOCTYPE html>",
"<html>",
"<head>",
" <meta charset=\"utf-8\">",
" <meta name=\"viewport\" content=\"width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no\" />",
" <meta name=\"apple-mobile-web-app-capable\" content=\"yes\">",
" <meta name=\"apple-mobile-web-app-status-bar-style\" content=\"black\">",
" <title>${1:标题}</title>",
" <script src=\"js/flexible.js\"></script>",
" <script src=\"js/jquery-1.11.3.min.js\"></script>",
"</head>",
"<body>",
"<div id=\"app\">",
" ${2}",
"</div>",
"<script type=\"text/javascript\">",
" var vm = new Vue({",
" el: '#app',",
" data: {",
" ${2}",
" },",
" methods: {",
" ${2}",
" }",
" })",
"</script>",
"</body>",
"</html>"
],
"description": "快速生成h5vue"
}
}
自己习惯的快捷键
// Place your key bindings in this file to override the defaults
[
{// ctrl+d 删除一行
"key": "ctrl+d",
"command": "editor.action.deleteLines",
"when": "editorTextFocus"
},
{// 选中当前文件中所有相同的内容
"key": "ctrl+q",
"command": "editor.action.addSelectionToNextFindMatch",
"when": "editorFocus"
},
{//浏览器打开
"key": "ctrl+f1",
"command": "extension.viewInBrowser",
"when": "editorTextFocus"
},
{//浏览器打开
"key": "ctrl+r",
"command": "extension.openInDefaultBrowser"
},
{
"key": "alt+b",
"command": "-extension.openInDefaultBrowser"
},
{//终端打开cmd
"key": "ctrl+shift+t",
"command": "workbench.action.terminal.new"
},
{
"key": "ctrl+shift+oem_3",
"command": "-workbench.action.terminal.new"
},
{//在特有的.js中实现注释 (选中方法之后，使用快捷键)
"key": "alt+shift+l",
"command": "docthis.documentThis"
},
{
"key": "ctrl+oem_2",
"command": "editor.action.commentLine",
"when": "editorTextFocus && !editorReadonly"
},
{
"key": "ctrl+oem_2",
"command": "-editor.action.commentLine",
"when": "editorTextFocus && !editorReadonly"
},
{
"key": "ctrl+shift+oem_2",
"command": "editor.action.blockComment",
"when": "editorTextFocus && !editorReadonly"
},
{
"key": "shift+alt+a",
"command": "-editor.action.blockComment",
"when": "editorTextFocus && !editorReadonly"
},
]
收藏的vscode 插件地址
https://www.cnblogs.com/QQ-Monarch/p/7130783.html?tdsourcetag=s_pcqq_aiomsg
https://www.cnblogs.com/clwydjgs/p/10078065.html
VSCode 如何操作用户自定义代码片段的更多相关文章
- VS Code 用户自定义代码片段(React)
VS Code 用户自定义代码片段(React) .jsxReact组件模板:javascriptreact.json { "Import React": { "pref ...
- vscode wepy 用户自定义代码片段
VSCode wepy 自定义代码片段 { "wepy-page": { "prefix": "wepy", "body" ...
- vscode写vue模板--代码片段
Ctrl+Shift+P打开命令输入 snippet (打开用户代码片段) 在输入vue(选择代码片段的语言) 如果搜索不到,安装一个插件 vueHelper 如果搜索到复制粘贴以下代码 { &quo ...
- 在vscode中，自定义代码片段，例vue组件的模板
1---- 2---- 输入vue, 选 vue.json 3---- 在vue.json中编辑, 有说明 a. tab符,要用空格, 也可以转义 4---- 新建vue文件, 输入自定义 ...
- VSCode添加用户代码片段,自定义用户代码片段
在使用VScode开发中经常会有一些重复使用的代码块,复制粘贴也很麻烦,这时可以在VScode中添加用户代码片段,输入简写即可快捷输入. VScode中添加用户自定义代码片段很简单. 1.在VScod ...
- 2019-01-29 VS Code创建自定义Python代码片段
续前文[日常]Beyond的歌里最多是"唏嘘"吗? - Python分词+词频最后的想法, 发现VS Code支持用户自定义代码片段: Creating your own snip ...
- VSCode--HTML代码片段（基础版，react、vue、jquery）
起因是最近在学习前端,看的网上的demo也是在react.vue.jquery之间穿插,为了方便一键生成html模板(懒)写demo,有了以下折腾. 本人使用的前端编辑工具是vscode(方便.懒), ...
- VSCode插件开发全攻略（八）代码片段、设置、自定义欢迎页
更多文章请戳VSCode插件开发全攻略系列目录导航. 代码片段 代码片段,也叫snippets,相信大家都不陌生,就是输入一个很简单的单词然后一回车带出来很多代码.平时大家也可以直接在vscode中创 ...
- VSCode保存插件配置并使用 gist 管理代码片段
setting sync 保存配置 由于公司和家里都使用 VSCode 作为主要编辑器,同步配置是最紧要的.VSCode 提供了setting sync插件,很方便我们同步插件配置.引用网上教程: 在 ...
随机推荐
- [转帖]进程状态的转换与PCB详解
进程状态的转换与PCB详解 https://blog.csdn.net/qq_34666857/article/details/102852747 挺好的 之前没好好学习. 返回主目录 之前的 ...
- netty心跳机制解决
直接看别个的源码:https://blog.csdn.net/xt8469/article/details/84827443>>https://blog.csdn.net/xt8469/a ...
- [CF852E]Casinos and travel(2019-11-15考试)
题目大意 有一棵\(n\)个点的树,令\(f(u)\)表示给树黑白染色,满足以\(u\)为根的树中,每个叶子节点到根的路径上黑点数量为偶数的染色方案数,求\(\sum\limits_{u=1}^n f ...
- Advanced-REST-client 获取及安装
作为一个java开发人员,大家或多或少的要写或者接触一些http接口.而当我们需要本地调试接口常常会因为没有一款好用的工具而烦恼.今天要给大家介绍一款非常好用.实用且方便的http接口测试工具. 获取 ...
- [转]js获取iframe通过url传递的参数
1.前言 获取iframe的url路径:window.parent.document.getElementById("your-iframe-id").contentWindow. ...
- element-UI级联选择器(Cascader)获取label值 ，this.$refs['新组件名'].currentLabels 在2.7版本给移除了，新的解决方法。
原文参考:https://blog.csdn.net/lijiabinbbg/article/details/97396812 遇到的新的问题是如果设置了ref,那么v-model绑定的值不会动态更新 ...
- 运维利器1-supervisor
supervisor用来管理进程服务很方便 优点: 1.重启方便,无抖动感 2.可以分组管理进程 3.加入系统自动启动后,可以开机自启,程序异常退出能自动启动 操作: 1.在python沙箱环境下操作 ...
- ios app UI自动化测试用到的命令
ios测试的app测试包,真机设备需要开发者证书并且将测试机的udid加入到pp文件文件,configruation 要求为debug模式的ipa包, 1.苹果手机的UDID, a.通过 xcode- ...
- Node.js 中 exports 和 module.exports 的区别
每一个模块中都有一个 module 对象, module 对象中有一个 exports 对象 我们可以把需要导出的成员都放到 module.exports 这个接口对象中,也就是 module.exp ...
- 搭建前端监控系统（五）Nodejs怎么搭建消息队列
怎样定位前端线上问题,一直以来,都是很头疼的问题,因为它发生于用户的一系列操作之后.错误的原因可能源于机型,网络环境,接口请求,复杂的操作行为等等,在我们想要去解决的时候很难复现出来,自然也就无法解决 ...