VSCode添加用戶代碼片段,自定義用戶代碼片段

在使用VScode開發中經常會有一些重復使用的代碼塊，復制粘貼也很麻煩，這時可以在VScode中添加用戶代碼片段，輸入簡寫即可快捷輸入。

VScode中添加用戶自定義代碼片段很簡單。

1.在VScode主界面->點擊左下角設置圖標->點擊用戶代碼片段

 

2.在彈出的窗口中選擇->新建全局代碼片段文件（也可選擇項目內的代碼片段，使用范圍不一樣而已）

3.輸入文件名-回車 (文件名可自定義)

 

4.這時就會生成並打開對應的配置文件，注釋着相關描述和一個示例

參數描述：

scope：此代碼段使用的語言名稱列表，例如 "typescript,javascript"（非必填）。

prefix：選擇代碼片段時要使用的前綴。

body：代碼片段內容

description：代碼片段描述。

 

接下來我們就可以在這個大括號里添加我們需要的代碼片段了

 

 

 5.比如我插入一段js注釋代碼片段然后保存。

{
    // Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
    // Placeholders with the same ids are connected.
    // Example:
    // "Print to console": {
    //     "scope": "javascript,typescript",
    //     "prefix": "log",
    //     "body": [
    //         "console.log('$1');",
    //         "$2"
    //     ],
    //     "description": "Log output to console"
    // }
    "Print to jsNoteTitle": {
        "scope": "",
        "prefix": "jsNoteTitle",
        "body": [
            "/****************",
            " *@description:",
            " *@author: 小明同學",
            " *@date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
            " *@version: V1.0.0",
            "*************************************************************************/"
        ],
        "description": "對應開始標題注釋"
    },
}

6.在編輯代碼時只要輸入js就會提示出對應的代碼片段，然后回車或者tab就好了~非常的方便哈哈哈~

 

 

 

 

 

vue常用模板代碼片段

<!--  -->
<template>
<div class=''></div>
</template>

<script>
//這里可以導入其他文件（比如：組件，工具js，第三方插件js，json文件，圖片文件等等）
//例如：import 《組件名稱》 from '《組件路徑》';

export default {
//import引入的組件需要注入到對象中才能使用
components: {},
data() {
//這里存放數據
return {

};
},
//監聽屬性 類似於data概念
computed: {},
//監控data中的數據變化
watch: {},
//方法集合
methods: {

},
//生命周期 - 創建完成（可以訪問當前this實例）
created() {

},
//生命周期 - 掛載完成（可以訪問DOM元素）
mounted() {

},
beforeCreate() {}, //生命周期 - 創建之前
beforeMount() {}, //生命周期 - 掛載之前
beforeUpdate() {}, //生命周期 - 更新之前
updated() {}, //生命周期 - 更新之后
beforeDestroy() {}, //生命周期 - 銷毀之前
destroyed() {}, //生命周期 - 銷毀完成
activated() {}, //如果頁面有keep-alive緩存功能，這個函數會觸發
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css類

</style>

 

結束：小明是一名前端小白，第一次寫博客，也是希望能記錄自己的學習過程，和分享一些問題的解決方法，寫得不對的地方歡迎大佬們批評指出。讓我們一起進步。

 

參考資料：Snippets in Visual Studio Code （官網有詳細的使用描述）