Visual Studio Code最強教程

工欲善其事，必先利其器。——《論語·衛靈公》

概述

https://code.visualstudio.com/
官網介紹文檔

Windows平臺安裝Visual Studio Code分以下版本：

• User Installer（如：VSCodeUserSetup-x64-1.44.0.exe），單個用戶可見
• System Installer（如：VSCodeSetup-x64-1.44.0.exe），計算機上所有用戶可見

軟件漢化

1. 打開VS Code
2. 按Ctrl + Shift + P，在彈出搜索框中輸入Configure Display Language，點擊打開
3. 在左側擴展菜單列表中，安裝相應語言包即可

Settings

https://code.visualstudio.com/docs/getstarted/settings
VS Code provides two different scopes for settings:

• User Settings - Settings that apply globally to any instance of VS Code you open.
• Workspace Settings - Settings stored inside your workspace and only apply when the workspace is opened.

Workspace settings override user settings. Workspace settings are specific to a project and can be shared across developers on a project.

Note: A VS Code “workspace” is usually just your project root folder. Workspace settings as well as debugging and task configurations are stored at the root in a .vscode folder. You can also have more than one root folder in a VS Code workspace through a feature called Multi-root workspaces.

設置文件位置
Depending on your platform, the user settings file is located here:

• Windows %APPDATA%\Code\User\settings.json
• macOS $HOME/Library/Application Support/Code/User/settings.json
• Linux $HOME/.config/Code/User/settings.json

The workspace settings file is located under the .vscode folder in your root folder.

Note: In case of a Multi-root Workspace, workspace settings are located inside the workspace configuration file.

快捷鍵

菜單欄中點擊，Help > Keyboard Shortcut Reference，打開快捷鍵的參考文檔。
下面是三個特定平臺的版本鏈接：

• Windows
• macOS
• Linux

模板

1. Ctrl + Shift + P，在彈出窗口中輸入snippets
2. 選擇首選項（Perferences：Configure User Snippets）
3. 在配置列表中選擇已有文件類型設置模板或者自定義模板

例如，vue模板的設置：

{
	// Place your snippets for vue 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"
	// }
	"Print to console": {
		"prefix": "vue",
		"body": [
			"<template>\n",
			"</template>\n",
			"<script>\n",
			"</script>\n",
			"<style>\n",
			"</style>"
		],
		"description": "A vue file template"
	}
}

Debug

https://code.visualstudio.com/docs/editor/debugging

擴展(Extension)

https://code.visualstudio.com/docs/editor/extension-gallery

• Auto Close Tag（自動關閉標籤）
• Material Icon Theme
• Vetur，vue開發時使用，使代碼高亮

版本控制

https://code.visualstudio.com/docs/editor/versioncontrol

Integrated Terminal

https://code.visualstudio.com/docs/editor/integrated-terminal

Vue項目開發

配置環境

1. 安裝Node.js，npm會同步安裝成功。在命令行中分別輸入（node -v 與 npm -v）查看是否安裝成功。
2. 安裝VS Code
3. 安裝vue/cli，在命令行中輸入npm install -g @vue/cli。輸入vue -V查看版本

命令行中輸入 node -v 無效怎麼辦？
打開系統環境變量，在path最後一行添加node安裝路徑，如D:\xxx\nodejs\

創建項目

• vue create my-app
• 跳到轉碼工具選擇頁面，回車
• npm run serve

在終端切換到項目根目錄，輸入code .，將在VS Code中打開項目。

歷史版本

1.44(March 2020)

官網升級介紹