VS Code 折騰記 - (6) 基本配置/快捷鍵定義/程式碼片段的錄入（snippet）

CRPER發表於2017-02-23

前言

本來分成三篇來寫的，但是想了想沒必要，大家都是聰明人。。。簡單的東西點一下就曉得了。複製程式碼

基本配置

這裡寫圖片描述
這裡寫圖片描述

這裡寫圖片描述
這裡寫圖片描述

快捷鍵自定義（Ctrl+K Ctrl + S）

這裡寫圖片描述
這裡寫圖片描述

  • 那個when支援條件表示式返回一個布林值

  • 支援的快捷鍵組合快捷鍵的鍵值

    這裡寫圖片描述
    這裡寫圖片描述

更加詳細的可以閱讀這裡： 你可以看到when的具體範圍解釋，非常詳細。。這裡我就不一一列舉出來了。。。直接在連結的文章內搜尋when Clause Contexts

程式碼片段

進入程式碼片段自定義有兩種方式：

  1. 【選單欄->檔案->首選項->使用者程式碼片段】
  2. 全域性命令【ctrl+shift + p => snippet】

VSCODE的程式碼片段支援30多種程式語言，所以也免了程式碼片命名唯一和全域性生效【所有檔案】的尷尬

這裡就選擇一個sass的說下，內部有這麼一段註釋嗯

{
    /*
     // Place your snippets for Sass here. Each snippet is defined under a snippet name and has a prefix, body and 
     // description. 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, ${id} and ${id:label} and ${1:label} for variables. Variables with the same id are connected.
     // Example:
     "Print to console": {
        "prefix": "log",
        "body": [
            "console.log('$1');",
            "$2"
        ],
        "description": "Log output to console"
    }
*/
    "utf-8": {
        "prefix": "utf-8",
        "body": [
            "@charset 'UTF-8';"
        ],
        "description": "插入檔案編碼"
    },
    "impout": {
        "prefix": "impcfg",
        "body": [
            "@import '../../../assets/scss_styles/custom_scss/_custom-export.scss';"
        ],
        "description": "插入配置檔案"
    },
    "toRem": {
        "prefix": "rem",
        "body": [
            "toRem($0)"
        ],
        "description": "插入px轉換函式"
    },
        "removeDedault": {
        "prefix": "ra",
        "body": [
            "@include remove-a-default-behavior"
        ],
        "description": "移除a的下劃線"
    }

}複製程式碼

直接給效果圖再來解釋比較好理解

這裡寫圖片描述
這裡寫圖片描述

  • toRem: 只是一個單純的描述
  • prefix: 是觸發snippet的簡寫
  • body: 是展開的程式碼片段
    • $1,$2表示佔位符，用於使用者展開程式碼片段所需要替換的，也可以寫成${1:label}鍵值對的方式
  • description : 使用者你在輸出snippet之前，方便自己識別的註釋，而不用強行記憶那些簡寫的

總結

VS Code編輯器的專案很活躍，基本一個月到一個半月釋出一個版本，每次都帶來一些挺不錯的特性。。
下篇文章讓我想想寫個什麼好。。。。。

相關文章