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

背景

以前一直是隻用WebStorm做爲IDE來編寫代碼，可是因爲：

1. 手中的這臺Mac接了兩個顯示器之後，使用WebStorm會有卡頓。
2. WebStorm須要付費（雖然能夠經過某方法和諧）。

因此須要尋找一個新的編輯器或者IDE來進行邊寫代碼。

爲何選擇VS Code

1. VS Code的性能明顯因爲Atom。
2. VS Code的插件系統使用方便程度遠高於Sublime。
3. 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	具體文本內容，在選擇此片斷後，會將此數組根據\n進行組合輸出到編輯器中。 其中有部分特定的常量，能夠獲取輸入時的部分信息，如： ${CURRENT_YEAR}:當前年份，具體字段能夠見此處 說明：在寫此文章時，部分1.20.0版本增長的常量並不在上面的文檔中，具體字段爲： CURRENT_YEAR：年（4位數） CURRENT_YEAR_SHORT：年（2位數） CURRENT_MONTH：月 CURRENT_DATE：日 CURRENT_HOUR：小時 CURRENT_MINUTE ：分鐘 CURRENT_SECOND：秒
description	描述說明，在片斷說明中會顯示此字段的文本內容。

具體示例效果以下：

插入後效果以下：

插件

在左側插件面板中，能夠進行插件的搜索、安裝與卸載。推薦插件以下：

• Auto Close Tag，可以在你編寫HTML中自動幫你加上閉合的標籤。
• Auto Rename Tag，可以在你修改一個標籤時自動調整與之成對的另外一個標籤。
• js-beautify for VS Code，可以格式化你的JavaScript文件。固然，它還提供了格式化JSON的能力。
• Beautify css/sass/scss/less，它可以讓你對CSS相關文件進行格式化。
• Better Comments，可以讓你的註釋看上去更加友好。
• Document This，可以自動的給函數和方法添加註釋。
• ESLint，這個不用多說，給VS Code提供了ESLint相關功能。
• PostCSS Syntax Highlighting，可以讓VS Code支持PostCSS語法。
• vscode-icons，可以讓你的文件樹增長圖標標識。

總結

VS Code整體上來講是一個使用比較方便的編輯器，可以經過一些特定的插件提升你的工做效率。相較於其餘的IDE或者編輯器來看，他有着本身獨特的優點。