作为一名前端开发工程师，我们每天都想着代码怎么抽成组件，公共方法。目的是为了减少工作量。
但是你有没有想过我们一直在写重复的代码，比如每天都会写
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);" }}后续还会更新。记得收藏哦。