Visual Studio Code 最强教程_vs code workspace configuration

工欲善其事，必先利其器。——《论语·卫灵公》

概述

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"
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Debug

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

扩展(Extension)

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

• WebStorm IntelliJ Darcula Theme（设置 WebStorm 主题）
• Material Icon Theme（文件图标主题）
• Code Runner
• Auto Close Tag（自动关闭标签）
• 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)

官网升级介绍