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插件,很方便我们同步插件配置.引用网上教程: 在 ...
随机推荐
- java自带的xml解析工具类
public class JaxbUtil { /** * java对象转换为xml文件 * * @param xmlPath xml文件路径 * @param load java对象.Class * ...
- 65 TCP连接中，流的关闭会造成Socket的关闭
转自:https://blog.csdn.net/u012525096/article/details/76924627 今天写安卓向服务器发送图片,过程为:客户端发送数据->服务器接收.处理数 ...
- SQL系列（五）—— 排序（order by）
对查询结果进行排序是日常应用开发中最为常见的需求,在SQL中通过order by实现.order by是select语句中一部分,即子句. 1.order by 1.1 单列排序 其实,检索出的数据并 ...
- python matplotlib 设置x轴文本间隔显示（数字的话可以转为字符之后处理）
一个国际友人绘图遇到的问题,查了一手资料.主要参考的是这个老哥的做法(https://blog.csdn.net/wyquin/article/details/80508260) #totalSeed ...
- JavaScript由来
在互联网时代,网速还很差劲的时候,表单输入数据的合法性验证需要与服务器交换数据,从而加重了使用者的负担. 网景公司为了解决这种简单问题开发了JavaScript.在1995年2月网景公司在发布自己的浏 ...
- winform+cefSharp实现窗体加载浏览器
1:新建winform项目 2:安装cefSharp 3:配置管理器更改为X86 4:添加引用 using CefSharp; using CefSharp.WinForms; 5:项目启动,打开网页 ...
- Django:RestFramework之-------分页
9.分页操作 分页,看第n页,每页显示n条数据 分页,在n个位置,向后查看n条数据. 加密分页,上一页和下一页 1.基于PageNumberPagination分页 1.路由: url(r'^(?P& ...
- 封装axios，带请求头和响应头
import axios from "axios"; import qs from "qs"; //处理参数 import router from '../ro ...
- RPC相关知识
为什么要进行系统拆分,为什么要用dubbo RPC的由来,基本架构,实现原理,整个调用过程经历了哪几步 Java动态代理及 RPC框架介绍 一篇文章了解RPC框架原理 dubbo详解及demo实例 d ...
- 关于ThinkPHP5.1+的Log无法记录SQL调试记录的小经历
项目开发阶段,除了基本编码外,性能也需要实时关注与优化.之前我的大部分项目都是使用ThinkPHP5.0以及ThinkPHP3.2,对于框架提供的日志记录和日志配置都差不多,然后使用ThinkPHP5 ...