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插件,很方便我们同步插件配置.引用网上教程: 在 ...
随机推荐
- beego：限制接口访问频率
package utils import ( "github.com/astaxie/beego" "github.com/astaxie/beego/context&q ...
- linux 重启jmeter服务
#!/bin/bash #jmeter kill and start echo -e '\033[32m--------Jmeter---------------\033[0m' echo " ...
- 科大讯飞语音芯片xfs5152CE，分享遇到的一些坑
首先 芯片手册的I2C地址是写地址,是8位的,真正的地址是7位地址,应该是0x40,最低位是读写位,读置1,为0x81,写置0,为0x80. 如果是模拟I2C倒无所谓,最坑的是我用的是寄存器,所以必须 ...
- 自学Dos的随堂笔记
开启DOS控制台的几种方式 开始+windows系统+命令提示符. Win键+R,输入cmd打开控制台. 在任意文件夹下,按住shift键+鼠标右键点击,在此处打开命令窗口. 资源管理器的地址栏前面加 ...
- sqlserver获得数据库非聚集索引的代码
创建Index DECLARE @zindex_sql NVARCHAR(max); SET @zindex_sql = N''; SELECT @zindex_sql = @zindex_sql + ...
- Vue--基础2
目录 Vue--基础2 vue成员获取 分隔符成员 计算属性成员 什么是计算属性 计算属性的用法 注意: 监听属性成员 组件 组件的介绍 组件的优点: 局部组件 全局组件 组件复用的数据隔离 组件之间 ...
- jQuery简易Ajax(六)
一.jQuery中ajax的两种书写方式[一般采用第二种方式]1.$.ajax(url,[setting]); 2.$.ajax([setting]); setting参数说明:setting为一个对 ...
- Java 使用properties配置文件加载配置
一般我们不把数据库的配置信息写死在代码中. 写好代码后,编译.调试,成功后只把输出目录中的东西(jar包..class文件.资源文件等)拷贝到服务器上,由运维来管理.服务器上是没有源文件的(.java ...
- sparkContext的初始化过程
SparkContext 初始化的过程主要的核心:1) 依据 SparkContext 的构造方法中的参数 SparkConf 创建一个SparkEnv2) 初始化,Spark UI,以便 Spark ...
- linux命令实现在当前文件夹下面模糊搜索文件
在当前文件中查找包含的字符串 find . -name "*.txt" | xargs grep 'abc' ,例如:查找txt文件中包含字符串a的字符串