vscode js 实用的代码片段

栏目: JavaScript · 发布时间: 4年前

内容简介:作为一名前端开发工程师,我们每天都想着代码怎么抽成组件,公共方法。目的是为了减少工作量。但是你有没有想过我们一直在写重复的代码,比如每天都会写或者

作为一名前端开发工程师,我们每天都想着代码怎么抽成组件,公共方法。目的是为了减少工作量。

但是你有没有想过我们一直在写重复的代码,比如每天都会写

import {xxx} from 'antd';

或者

function name() {
    return (
        <div>
            xxxx
        </div>
    )
}

等等。这些代码其实总是一样的,你每天都会去敲,那我们能不能有个快捷键,能帮我们一键生成,而且可以根据我们的定义生成呢?答案是有的,vscode里面的用户代码片段(User Snippets)就帮我们实现这个功能。

入口在file -> preferences -> User Snippets

vscode js 实用的代码片段

选择图示的文件,那么这里就是可以自定义的代码片断的地方。

我举一个例子你们就明白了,看代码:

"console": {
    "prefix": "log 打印",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
},

在这段代码中,prefix是指你要提示的代码前缀,效果如图:

vscode js 实用的代码片段

第二个就是我们自定义的代码片段

选择之后的效果:

vscode js 实用的代码片段

这个就是我们在代码中定义的body。

怎么样,方便吧。

在body中还有一些常用的符号:

${1} ${2} :代表着光标跳转的地方,按tab键会直接跳转到你定义的地方,特殊的$0表示光标最后停留的地方

/t /n :分别代码tab缩进,换行

还有一个小问题是自定义的代码提示有时候会在其他代码提示后面,类似:

vscode js 实用的代码片段

这就很不爽了,那怎么把它提前呢?

只要在setting.json里面配置

"editor.snippetSuggestions": "top",
"editor.tabCompletion": "on", // 按tab快速补全自定义代码片段

就可以了,效果:

vscode js 实用的代码片段

大概就这些啦,还有更详细的你们可以参考文章:

地址

下面贴上本作配置的几个实用的javascript配置:

{
    "console": {
        "prefix": "log 打印",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    },
    "function": {
        "prefix": "function 新建方法",
        "body": "function ${1:name}() {${2}}",
        "description": "方法"
    },
    "import": {
        "prefix": "import 导入资源",
        "body": "import {$0} from '';",
        "description": "导入"
    },
    "react": {
        "prefix": "react 新建类",
        "body": [
            "import React from 'react';",
            "",
            "export default class ${1:Name} extends React.Component {${2}}",
        ]
    },
    "return": {
        "prefix": "return 返回组件",
        "body": "return (\n\t$0\n);"
    }
}

后续还会更新。记得收藏哦。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

高效算法

高效算法

[法] Christoph Dürr、[法] Jill-Jênn Vie / 史世强 / 人民邮电出版社 / 2018-5 / 55.00元

本书旨在探讨如何优化算法效率,详细阐述了经典算法和特殊算法的实现、应用技巧和复杂度验证过程,内容由浅入深,能帮助读者快速掌握复杂度适当、正确率高的高效编程方法以及自检、自测技巧,是参加ACM/ICPC、Google Code Jam 等国际编程竞赛、备战编程考试、提高编程效率、优化编程方法的参考书目。一起来看看 《高效算法》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具