VSCode 如何操作用户自定义代码片段
2024-08-30 01:51:17
自己写了一些根据自己习惯弄成的自定义代码片段，不喜跳过
很简单，快速过一下，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
最新文章
- 【单点登录】【两种单点登录类型:SSO/CAS、相同一级域名的SSO】
- OD使用教程9
- d3 API scale
- 【iOS】UIKit框架 学习笔记
- opencv--图像轮廓检测
- (leetcode)Reverse Linked List 脑子已经僵住
- Python之MYsql、数据库
- audio autoplay 是pause 不会停止播放
- CentOS 7 安装telnet服务
- 【git】git一些命令使用记录
- [Bayes] Understanding Bayes: A Look at the Likelihood
- Java Script的用途(简介)
- springboot+mybatis整合(单元测试，异常处理，日志管理，AOP)
- jenkins systemctl启动失败
- C语言入门教程-(1)简介及搭建环境
- python traceback捕获并打印异常
- 添加机构organizations模块
- JS原型学习笔记
- US Open 2016 Contest
- lnmp 环境搭建