文章目录
工欲善其事,必先利其器。——《论语·卫灵公》
概述
https://code.visualstudio.com/
官网介绍文档
Windows平台安装Visual Studio Code分以下版本:
- User Installer(如:VSCodeUserSetup-x64-1.44.0.exe),单个用户可见
- System Installer(如:VSCodeSetup-x64-1.44.0.exe),计算机上所有用户可见
软件汉化
- 打开VS Code
- 按
Ctrl + Shift + P
,在弹出搜索框中输入Configure Display Language
,点击打开 - 在左侧扩展菜单列表中,安装相应语言包即可
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
,打开快捷键的参考文档。
下面是三个特定平台的版本链接:
模板
Ctrl + Shift + P
,在弹出窗口中输入snippets
- 选择首选项(
Perferences:Configure User Snippets
) - 在配置列表中选择已有文件类型设置模板或者自定义模板
例如,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项目开发
配置环境
- 安装Node.js,
npm
会同步安装成功。在命令行中分别输入(node -v 与 npm -v)查看是否安装成功。 - 安装VS Code
- 安装
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中打开项目。