背景
之前一直是隻用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 | 具體文本內容，在選擇此片段後，會將此數組根據\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或者編輯器來看，他有着自己獨特的優勢。