VS code 自定义快捷键
Posted aer2005
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了VS code 自定义快捷键相关的知识，希望对你有一定的参考价值。
ctrl+shift+p
搜索: snippets
输入类型: 比如 html、javascript
参数说明
prefix：使用代码段的快捷入口
body：需要设置的代码放在这里,字符串间换行的话使用
换行符隔开.如果值里包含特殊字符需要进行转义,多行代码以”,”分隔(在引号后面写逗号)
$0：定义最终光标位置
$1：定义第一次光标位置，按tab键可进行快速切换, 还可以有 $2, $3, $4, $5 …
description：代码段描述,在使用智能感知时的描述
HTML
————————————————
//自定义
"phone": {
"prefix": "ph",
"body": [
"<!DOCTYPE html>",
"<html lang=‘en‘>",
"<head>",
" <meta charset=‘UTF-8‘>",
" <meta http-equiv=‘X-UA-Compatible‘ content=‘IE=edge,chrome=1‘>",
" <meta name=‘viewport‘ content=‘width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0‘/>",
" <title>Titile</title>",
"</head>",
"<body>",
"<script type=‘text/javascript‘>",
" $(‘html‘).css({fontSize:$(window).width()/375*100 + ‘px‘});",
" $(‘body‘).css({minHeight:$(window).height()});",
"</script>",
"</body>",
"</html>"
],
"description": "script"
},
"script": {
"prefix": "sc",
"body": [
"<script type=‘text/javascript‘ src=‘$1‘></script>"
],
"description": "script"
}
JavaScript
// 自定义
"function": {
"prefix": "fn",
"body": [
"function$1($2) {
$3
}"
],
"description": "function(){}"
},
"console.log": {
"prefix": "co",
"body": [
"console.log ($1);"
],
"description": "console.log()"
},
"alert": {
"prefix": "al",
"body": [
"alert ($1);"
],
"description": "alert()"
},
"class": {
"prefix": "cl",
"body": [
"$(‘.$1‘)"
],
"description": "class"
},
"id": {
"prefix": "id",
"body": [
"$(‘#$1‘)"
],
"description": "id"
},
"on": {
"prefix": "on",
"body": [
"on (‘click‘,function () {
$1
})"
],
"description": "on"
},
"for": {
"prefix": "fo",
"body": [
"for (let i=0; i<$1; i++) {
$2
}"
],
"description": "for"
},
"if": {
"prefix": "ifif",
"body": [
"if ($1) {
$2
}"
],
"description": "if"
},
"ifElse": {
"prefix": "ifel",
"body": [
"if ($1) {
$2
} else {
$3
}"
],
"description": "ifElse"
},
"ajax": {
"prefix": "aj",
"body": [
// "$.ajax({
url:$1,
data:{
$2
},
type:‘post‘,
dataType:‘JSON‘,
success:function (res) {
$3
}
})"
"$.ajax({",
" url: $1,",
" data:{",
" $2",
" },",
" type: ‘post‘,",
" dataType: ‘JSON‘,",
" success:function (res) {",
" $3",
" }",
"})"
],
"description": "ajax"
},
"axios": {
"prefix": "ax",
"body": [
"axios.$1(__PROJECTPATH__ + `$2`, {",
" $3",
"})",
".then(function (response) {",
" console.log(response);",
"})",
".catch(function (error) {",
" console.log(error);",
"});",
],
"description": "axios"
}
Vue
// 自定义(移动端)
"vue": {
"prefix": "vu",
"body": [
"<!-- $1 -->",
"<template>",
" <div>",
" $2",
" </div>",
"</template>",
"",
"<script>",
" export default {",
" name: ‘‘,",
" components: {",
" ",
" },",
" props: {",
" ",
" },",
" data() {",
" return {",
" ",
" }",
" },",
" computed: {",
" ",
" },",
" watch: {",
" ",
" },",
" created() {",
" ",
" },",
" methods: {",
" ",
" },",
" }",
"</script>",
"",
"<style scoped lang=‘less‘>",
" ",
"</style>"
],
"description": "Vue templet"
}
以上是关于VS code 自定义快捷键的主要内容，如果未能解决你的问题，请参考以下文章