VS Code 自定义快捷输入-低调大师

VS Code 自定义快捷输入

2018-05-13 642

位置

ctrl+shift+p
搜索: snippets
输入类型: 比如 html、javascript

参数说明

prefix：使用代码段的快捷入口
body：需要设置的代码放在这里,字符串间换行的话使用\r\n换行符隔开.如果值里包含特殊字符需要进行转义,多行代码以","分隔(在引号后面写逗号)
$0：定义最终光标位置
$1：定义第一次光标位置，按tab键可进行快速切换, 还可以有 $2, $3, $4, $5 ...
description：代码段描述,在使用智能感知时的描述

常用字符说明

\\ 反斜杠
\a 警告
\b 退格符
\f 换页符
\n 换行符
\r 回车符
\t Tab 符
\v 垂直 Tab 符
\u 使用数字指定的Unicode 字符, 如 \u2000
\x 使用十六进制数指定的Unicode 字符, 如 \xc8
\0 空值

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) {\r\n\t$3\r\n}"
        ],
        "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 () {\r\n\t$1\r\n})"
        ],
        "description": "on"
    },
    "for": {
        "prefix": "fo",
        "body": [
            "for (let i = 0; i < $1; i++) {\r\n\t$2\r\n}"
        ],
        "description": "for"
    },
    "if": {
        "prefix": "ifif",
        "body": [
            "if ($1) {\r\n\t$2\r\n}"
        ],
        "description": "if"
    },
    "ifElse": {
        "prefix": "ifel",
        "body": [
            "if ($1) {\r\n\t$2\r\n} else {\r\n\t$3\r\n}"
        ],
        "description": "ifElse"
    },
    "ajax": {
        "prefix": "aj",
        "body": [
            // "$.ajax({\r\n\turl:$1,\r\n\tdata:{\r\n\t\t$2\r\n\t},\r\n\ttype:'post',\r\n\tdataType:'JSON',\r\n\tsuccess:function (res) {\r\n\t\t$3\r\n\t}\r\n})"
            "$.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 风格指南

    // 自定义(移动端)
    "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"
    }

微信关注我们

原文链接：https://yq.aliyun.com/articles/634951

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

Node.js 8

编者：本文作者孝达，经作者允许，刊载于 Alinode 团队博客。未经允许，不得转载。端午节结束了。虽然接下来的四个月都没有节假日，但笔者一点都不烦恼。因为 Node.js 8 在端午后第一个工作日就正式发布，这足以让我与 Node.js 的激情燃烧一个夏天！本文挑选了笔者认为 Node.js 8 最令人兴奋的四大新功能，与大家分享。 async/await 与 util.promisify Node.js 一直以来的关键设计就是把用户关在一个“异步编程的监狱”里，以换取非阻塞 I/O 的高性能，让用户轻易开发出高度可扩展的网络服务器。这从 Node.js 的 API 设计上就可见一斑，很多API——如 fs.open(path, flags[, mode], callback)——要求用户必须把该操作执行成功后的逻辑放在最后参数里，

2018-05-14

681

预览效果图：背景介绍：编写一个模拟记事本的程序通过在控制台输入指令，实现在本地新建文件打开文件和修改文件等功能。要求在程序中：用户输入指令1代表“新建文件”，此时可以从控制台获取用户输入的文件内容；指令2代表打开文件，此时可将指定路径的txt文件的内容展现到控制台，指令3代表修改文件，此时即可以修改新建文件的内容，也可以修改打开文件的内容；指令4代表保存，此时如果是新建的文件需要保存，则将文件保存到用户输入的路径，如果是打开的文件需要保存，则将原来内容覆盖；指令5代表退出系退出本系统，例如输入指令1之后输入内容再输入指令4和文件保存的路径，此时可将输入内容保存至指定的路径。输入指令2之后，输入想要查看的文件的路径，在输入指令3以及要修改内容，再输入指令4，此时完成指定路径下的文件的修改. 示例代码： import java.io.FileReader; import java.io.FileWriter; import java.io.IOException; import java.util.Scanner; import org.junit.Test; /** ...

2018-05-14

655

资源下载

更多资源

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Spring

Spring框架（Spring Framework）是由Rod Johnson于2002年提出的开源Java企业级应用框架，旨在通过使用JavaBean替代传统EJB实现方式降低企业级编程开发的复杂性。该框架基于简单性、可测试性和松耦合性设计理念，提供核心容器、应用上下文、数据访问集成等模块，支持整合Hibernate、Struts等第三方框架，其适用范围不仅限于服务器端开发，绝大多数Java应用均可从中受益。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。