vscode js 实用的代码片断

做为一名前端开发工程师，咱们天天都想着代码怎么抽成组件，公共方法。目的是为了减小工做量。
可是你有没有想过咱们一直在写重复的代码，好比天天都会写

import {xxx} from 'antd';

或者

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

等等。这些代码其实老是同样的，你天天都会去敲，那咱们能不能有个快捷键，能帮咱们一键生成，并且能够根据咱们的定义生成呢？答案是有的，vscode里面的用户代码片断（User Snippets）就帮咱们实现这个功能。
入口在file -> preferences -> User Snippets

选择图示的文件，那么这里就是能够自定义的代码片段的地方。
我举一个例子大家就明白了，看代码：

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

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

第二个就是咱们自定义的代码片断
选择以后的效果：

这个就是咱们在代码中定义的body。
怎么样，方便吧。
在body中还有一些经常使用的符号：

${1} ${2}：表明着光标跳转的地方，按tab键会直接跳转到你定义的地方，特殊的$0表示光标最后停留的地方
/t /n：分别代码tab缩进，换行

还有一个小问题是自定义的代码提示有时候会在其余代码提示后面，相似：

这就很不爽了，那怎么把它提早呢？
只要在setting.json里面配置

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

就能够了，效果：

大概就这些啦，还有更详细的大家能够参考文章：
地址

下面贴上本做配置的几个实用的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);"
    }
}

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