vscode前端代碼註釋模板使用介紹

添加註釋

1. ctrl+shift+p打開
2. 輸入snippets點擊進入用戶代碼片段配置

3. 配置css.json/css
   
   進入之後輸入

"Print to cssTitle": {
    "prefix": "cssNoteTitle",
    "body": [
      "/*",
      " * @description: ",
      " * @author: 韓武洽 ",
      " * @date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
      " * @version V1.0.5 ",
      "*/"
    ],
    "description": " Title對應css註釋標題"
  },
  "Print to cssItem":{
    "prefix": "cssNoteItem",
    "body": [
      "/*",
      " * @description: ",
      " * @author: 韓武洽 ",
      " * @date: $0 ",
      "*/"
    ],
    "description": "Item對應css類註釋"
  }

用法：

在<style> </style>標籤中間
輸入css會出現下面的選項

Title對應css註釋標題
Item對應css類註釋
注意：使用sass或less等css語言需重新設置less.json和sass.json

配置javascript.json/javascript

"Print to jsNoteTitle": {
    "prefix": "jsNoteTitle",
    "body": [
      "/*",
      " * @description:",
      " * @author: 韓武洽",
      " * @date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
      " * @version: V1.0.5",
      "*/"
    ],
    "description": " jsNoteTitle對應開始標題註釋"
  },
  "Print to jsfn": {
    "prefix": "jsfn",
    "body": [
      "/**",
      " *@functionName: ${TM_CURRENT_LINE}",
      " *@params1: ${1:參數1}",
      " *@params2: ${2:參數2}",
      " *@params3: ${3:參數3}",
      " *@params4: ${4:參數4}",
      " *@description:",
      " *@author: 韓武洽",
      " *@date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
      " *@version: V1.0.5",
      "*/"
    ],
    "description": " Jsfn對應方法註釋"
  },
  "Print to jsModify": {
    "prefix": "jsModify",
    "body": [
      "/**",
      " *@ description:",
      " *@modifyContent:",
      " *@ author: 韓武洽",
      " *@date: $0",
      "*/"
    ],
    "description": "JsModify對應方法修改註釋"
  },
  "Print to jsVariable": {
    "prefix": "jsVariable",
    "body": [
      "/**",
      " *@description:",
      " *@author: 韓武洽",
      " *@date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
      " *@variable1: ${1:變量1}",
      " *@variable2: ${2:變量2}",
      " *@variable3: ${3:變量3}",
      " *@variable4: ${4:變量4}",
      " *@variable5: ${5:變量5}",
      "*/"
    ],
    "description": " JsVariable 對應變量註釋"
  },

用法:

用法和css類似在script標籤內輸入js出現以下提示

注意：jsNoteTitle對應開始標題註釋
Jsfn對應方法註釋
JsModify對應方法修改註釋
JsVariable 對應變量註釋

4. 編輯vue-html.json/html

 "Print to htmlStart":{
    "prefix": "htmlStart",
    "body": [
      "<!-- $0start @author: 韓武洽 !-->"
    ],
    "description": " Start在html區塊開始時使用"
  },
  "Print to htmlItem":{
    "prefix": "htmlEnd",
    "body": [
      "<!-- $0end @author: 韓武洽 !-->"
    ],
    "description": " End在html區塊開始時使用"
  }

用法: 在template標籤內輸入html出現以下提示

注意：Start在html區塊開始時使用
End在html區塊開始時使用

5. vue.json/html文件配置

  "Print to vueTitle": {
    "prefix": "vueTitle",
    "body": [
      "<!-- ",
      " * @description: ",
      " * @fileName: ${TM_FILENAME} ",
      " * @author: 韓武洽 ",
      " * @date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
      " * @後臺人員: $1 ",
      " * @version: V1.0.5 ",
      "!-->"
    ],
    "description": "在vue文件開頭配置註釋"
  }

在vue文件開頭配置註釋
使用方法在vue文件開頭輸入vue選擇

出現註釋

7. 最重要的是: 將作者名改爲自己的名字，註釋時請填寫描述和時間若出現排版錯亂請修改body數組裏面的字符串內容 換行使用\n 空格就是空格