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);"
    }
}

後續還會更新。記得收藏哦。