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

hjava發表於2019-02-16

背景

之前一直是隻用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 描述說明，在片段說明中會顯示此欄位的文字內容。

具體示例效果如下：

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

插入後效果如下：

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

外掛

在左側外掛皮膚中，可以進行外掛的搜尋、安裝與解除安裝。推薦外掛如下：

  • 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或者編輯器來看，他有著自己獨特的優勢。

相關文章