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类名以及IDHTML 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 (查找文件)