【猿说VUE】Visual Studio Code安装配置

Visual Studio Code安装配置

现在使用Visual Studio Code编码的人越来越多，凭借着免费，开源，轻量，跨平台的特点得到了大量开发人员的喜爱。该编辑器也集成了所有一款现代编辑器所应该具备的特性，包括语法高亮（syntax high lighting），可定制的热键绑定（customizable keyboard bindings），括号匹配（bracket matching）以及代码片段收集（snippets）。

1.1 VS Code安装

访问Visual Studio Code官网下载适合自己机器的版本。如图所示，点击Download for Windows按钮即可默认下载，也可以点击向下箭头选择别的版本下载。下载完成后，启动安装程序并按照说明进行安装。对于Windows，需要.NET Framework（4.5.2以上），如果未安装，则会另外安装。

Stable和Insiders的区别：Stable版的图标为蓝色，Insiders版的图标为绿色，两者加载配置文件不一样。VS Code的新功能和错误修复将首先应用于Insiders版本，稳定后然后再应用于Stable版本。 Stable版大约每月更新一次。

1.2 VS Code使用

1.2.1 中文插件安装

VS Code默认下载为英语界面，如果有喜欢中文界面的话，可以安装中文插件，输入：chinese搜索后安装。注意安装完成后需要重启应用才能生效。参考如下：

1.2.2 浏览器插件安装

VSCode中默认编写的HTML页面是不能运行的，如果需要在VSCode运行HTML页面，直接打来浏览器查看，也需要安装插件。

输入：open in browser 安装浏览器插件。

1.2.3 安装VUE开发利器

基本模式参考如上，在扩展插件中进行搜索后安装。如下插件是在进行Vue开发前端时经常使用的插件，建议大家自行搜索安装。

Auto Close Tag：自动添加HTML/XML关闭标记
Auto Rename Tag：自动完成另一侧标签的同步修改
Beautify：格式化代码
Bracket Pair Colorizer：给括号加上不同的颜色，便于区分不同的区块，使用者可以定义不同括号类型和不同颜色
Debugger for Chrome：映射vscode上的断点到chrome上，方便调试
ESLint：JavaScript语法纠错，可以自定义配置，不过配置较为复杂，建议使用网上一些广泛使用的eslint配置
HTML CSS Support：智能提示CSS类名以及ID
HTML Snippets：智能提示HTML标签，以及标签含义
JavaScript(ES6) code snippets：ES6语法智能提示，以及快速输入，省去了配置其支持各种包含js代码文件的时间
jQuery Code Snippets：jQuery代码智能提示
Markdown Preview Enhanced：实时预览markdown，markdown使用者必备
markdownlint：markdown语法纠错
Material Icon Theme：VS Code图标主题，支持更换不同色系的图标
Path Intellisense：自动提示文件路径，支持各种快速引入文件
Vetur：Vue多功能集成插件，包括：语法高亮，智能提示，错误提示，格式化，自动补全，debugger。 vscode官方钦定Vue插件，Vue开发者必备。
filesize：编辑器的状态栏中显示焦点文件的大小
Highlight Matching Tag：突出显示匹配的打开或关闭标记。可选地，它还显示状态栏中标记的路径
Vue 3 Snippets：提供一些vue的代码片段

以上列举了经常用的一些插件，其他的插接件内容可以随着开发逐步安装。

1.2.4 VS Code界面构成

VSCode编辑器的主要界面由五部分组成：活动栏，侧边栏，编辑栏，面板栏，状态栏

①活动栏：图标从从上到下依次为：侧边栏，搜索，Git，调试，插件
②侧边栏：新建项目文件和文件夹
③编辑栏：编写代码的区域
④面板栏：包括问题，输出，调试控制台，终端，最重要的是terminal，用来输入相关命令
⑤状态栏，点击该区域可以调出面板栏

1.2.5 VS Code配置项

自动保存设置

File- Preferences- Setting ：在弹出下面界面，选择User（默认选中），

接着如下图选择afterdelay选项即可，接下来设定保存时间：1000表示1秒。

常用快捷键

Ctrl + / （单行注释）
Shift + Alt + A （多行注释）
Ctrl + Shift + Enter （上方插入一行，鼠标光标在当前行的任意位置都可以直接换行到上一行）
Ctrl + Enter （下方插入一行，鼠标光标在当前行的任意位置都可以直接换行到下一行）
Alt + Shift + F （格式化代码，不需要全选中代码，直接格式化即可）
Ctrl + Shift + F （查找文件）