vscode js 實(shí)用的代碼片段

wuyangchun 發(fā)布于2019-08-23 17:13 / 2103人閱讀

摘要：目的是為了減少工作量。入口在選擇圖示的文件，那么這里就是可以自定義的代碼片斷的地方。我舉一個(gè)例子你們就明白了，看代碼打印在這段代碼中，是指你要提示的代碼前綴，效果如圖第二個(gè)就是我們自定義的代碼片段選擇之后的效果這個(gè)就是我們?cè)诖a中定義的。

作為一名前端開發(fā)工程師，我們每天都想著代碼怎么抽成組件，公共方法。目的是為了減少工作量。
但是你有沒有想過我們一直在寫重復(fù)的代碼，比如每天都會(huì)寫

import {xxx} from "antd";

或者

function name() {
    return (
        
            xxxx
        
    )
}

等等。這些代碼其實(shí)總是一樣的，你每天都會(huì)去敲，那我們能不能有個(gè)快捷鍵，能幫我們一鍵生成，而且可以根據(jù)我們的定義生成呢？答案是有的，vscode里面的用戶代碼片段（User Snippets）就幫我們實(shí)現(xiàn)這個(gè)功能。
入口在file -> preferences -> User Snippets

選擇圖示的文件，那么這里就是可以自定義的代碼片斷的地方。
我舉一個(gè)例子你們就明白了，看代碼：

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

在這段代碼中，prefix是指你要提示的代碼前綴，效果如圖：

第二個(gè)就是我們自定義的代碼片段
選擇之后的效果：

這個(gè)就是我們?cè)诖a中定義的body。
怎么樣，方便吧。
在body中還有一些常用的符號(hào)：

${1} ${2}：代表著光標(biāo)跳轉(zhuǎn)的地方，按tab鍵會(huì)直接跳轉(zhuǎn)到你定義的地方，特殊的$0表示光標(biāo)最后停留的地方
/t /n：分別代碼tab縮進(jìn)，換行

還有一個(gè)小問題是自定義的代碼提示有時(shí)候會(huì)在其他代碼提示后面，類似：

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

"editor.snippetSuggestions": "top",
"editor.tabCompletion": "on", // 按tab快速補(bǔ)全自定義代碼片段

就可以了，效果：

大概就這些啦，還有更詳細(xì)的你們可以參考文章：
地址

下面貼上本作配置的幾個(gè)實(shí)用的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 導(dǎo)入資源",
        "body": "import {$0} from "";",
        "description": "導(dǎo)入"
    },
    "react": {
        "prefix": "react 新建類",
        "body": [
            "import React from "react";",
            "",
            "export default class ${1:Name} extends React.Component {${2}}",
        ]
    },
    "return": {
        "prefix": "return 返回組件",
        "body": "return (
	$0
);"
    }
}

后續(xù)還會(huì)更新。記得收藏哦。