【猿说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 (查找文件)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章