提高開發效率之VS Code基礎配置篇

hjava發表於2019-02-16

背景

之前一直是隻用WebStorm作為IDE來編寫程式碼，但是由於：

手中的這臺Mac接了兩個顯示器以後，使用WebStorm會有卡頓。
WebStorm需要付費（雖然可以通過某方法和諧）。

所以需要尋找一個新的編輯器或者IDE來進行邊寫程式碼。

為什麼選擇VS Code

VS Code的效能明顯由於Atom。
VS Code的外掛系統使用方便程度遠高於Sublime。
VS Code相對於WebStorm來說是免費的。

VS Code配置

注：當前VS Code相關的配置基於v1.20.1版本。

使用者設定

在首選項->設定中，能夠對VS Code相關的屬性進行設定，目前有調整欄位如下：

"editor.fontSize": 16，該設定用來調整編輯器中的字型大小，目前設定大小為16。
"files.autoSave": "onFocusChange"，該設定用來調整編輯器的自動儲存策略，當前欄位含義為當該檔案失焦後儲存，即切換到其他應用或者檔案的時候自動進行一次儲存。
"editor.cursorWidth": 2，該設定是用來控制游標的粗細，目前設定大小為2。
"editor.suggestSelection": "recentlyUsedByPrefix"，該設定是用來控制自動補全的建議，目前設定為根據之前補全過建議的字首來進行建議，大概的意思就是你上次通過co選擇了const，這次你再輸入co的時候，也會建議你選擇const。

程式碼片段

VS Code可以通過名為程式碼片段的功能像編輯器中插入一段指定的文字，具體操作步驟為首選項->使用者程式碼片段->新建全域性程式碼片段。

我們可以增加一些常用的檔案宣告註釋、通用模板等程式碼片段，從而避免頻繁的複製貼上和重複勞動。

我舉一個簡單的檔案宣告註釋的例子來說明下這個功能：

{
    // Place your snippets for javascript 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, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the 
    // same ids are connected.
    // Example:
    // "Print to console": {
    //     "prefix": "log",
    //     "body": [
    //         "console.log(`$1`);",
    //         "$2"
    //     ],
    //     "description": "Log output to console"
    // }
    "JS & TS description": {
        "prefix": "jsfile",
        "body": [
            "/**",
            "* @module ${TM_FILENAME_BASE}",
            "* @author: Hjava",
            "* @since: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
            "*/",
            "",
            "`use strict`;",
            ""
        ],
        "description": "Insert description."
    }
}

其中，JS & TS description表示這個片段的名稱，其他具體欄位含義如下表所示：

欄位	說明
prefix	字首，即你在編輯器中輸入的內容為字首指定內容時，能夠在編輯器建議中選擇此片段。
body	具體文字內容，在選擇此片段後，會將此陣列根據進行組合輸出到編輯器中。其中有部分特定的常量，可以獲取輸入時的部分資訊，如： ${CURRENT_YEAR}:當前年份，具體欄位可以見此處說明：在寫此文章時，部分1.20.0版本增加的常量並不在上面的文件中，具體欄位為： `CURRENT_YEAR`：年（4位數） `CURRENT_YEAR_SHORT`：年（2位數） `CURRENT_MONTH`：月 `CURRENT_DATE`：日 `CURRENT_HOUR`：小時 `CURRENT_MINUTE` ：分鐘 `CURRENT_SECOND`：秒
description	描述說明，在片段說明中會顯示此欄位的文字內容。