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.

扫描二维码关注公众号,回复: 11035690 查看本文章

快捷键

菜单栏中点击,Help > Keyboard Shortcut Reference,打开快捷键的参考文档。
下面是三个特定平台的版本链接:

模板

  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.jsnpm会同步安装成功。在命令行中分别输入(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)

官网升级介绍

发布了39 篇原创文章 · 获赞 16 · 访问量 4423

猜你喜欢

转载自blog.csdn.net/u010019244/article/details/105450993