Vue开发好伙伴--Visual Studio Code编辑器

目录

前言

一、下载安装软件

 二、界面介绍

1、活动栏部分：

2、侧边栏

3、状态栏

三、插件安装

四、项目开发中常用的插件

①代码编辑类

②网页项目效果类

③Vue项目插件

五、VS code 常用到的快捷键

---

前言

     对于Vue开发的编辑器--vscode你都了解了多少？vscode，全称Visual Studio Code，是一款微软公司旗下开发的可以跨平台运行的免费的源代码编辑器，其中含有很多方便的智能快捷键、多样化的插件功能、智能提示功能等等，在vue前端开发中起到了很便利的开发作用，本文主要是讲解一些vscode的使用，非常值得刚刚入门的萌新朋友参考学习。

一、下载安装软件

可以登录官方Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.  Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.https://code.visualstudio.com/

根据自己电脑上的系统进行安装下载即可，由于这个步骤很简单，这里就不过多编写，主要是因为已经下载过了，不想再卸载重新下载一次了，哈哈哈！

 二、界面介绍

主要界面：根据下图可以大致的知道，我们的vscode有以下的六大部分：菜单栏、活动界面、侧边选择栏、代码编辑面板栏、代码运行命令栏、状态栏。

 主要介绍的是以下三个部分：

1、活动栏部分：

2、侧边栏

这个部分只要“活动栏” 如上的任意一个功能按钮点击，侧边栏才会显示相应的功能操作界面。比如，我们代码编写用到的“文件资源管理”，我们通过点击这一栏，就会出现相应的操作管理，资源管理这个部分主要存放的功能是，代码编辑是的文件、文件夹，可以自行打开并且浏览编辑，项目中的文件/文件夹都可以进行增（创建文件/文件夹）、删（删除文件/文件夹）、改（更改文件/文件夹的命名）、查（查看文件）等操作。

3、状态栏

 

三、插件安装

在活动栏选择"插件"这个按钮，然后侧边栏就会出现相应的功能选择项目，我们在搜索栏搜索相应的插件，这里我们搜索一个例子插件--background（背景插件），只需要点击“安装”就可以了。如下：

 安装以后，关闭你的编辑器，就可以看到你的背景已经发生了变化，

 当然，卸载的话只要在相应的插件里面选择“卸载”即可。这个当你需要下载的时候，当我们安装完成以后“Install”就会变成“Uninstall”，这样点击Uninstall就可以进行卸载这个插件了。

四、项目开发中常用的插件

①代码编辑类

这一类的插件主要是为了提高代码的效率，主要可以分成两类，一类是代码提示插件：包括完整HTML代码提示（Snippets 插件）、css样式提示插件（css support插件）等等；另一类就是代码格式以及显示效果类插件：比如格式化代码插件（Beautify插件）、显示代码对齐辅助线插件（Guides插件）等等

②网页项目效果类

第一种：Live Serve插件，这一插件功能是你安装了这个插件以后，具有实时加载功能的小型服务器可以用于本地搭建零食使用的服务器的类似功能，使用这个后可以进行实时的查看网页开发的效果，还可以在你文件修改后保存即可在浏览器进行自动刷新，很方便。

第二种：View In Browser插件。安装该插件后,在文件资源管理器中右键单击HTML文件,会出现“View In Browser”选项，单击该选项就可以打开浏览器预览HTML文件。

③Vue项目插件

一般用到的有Vue vS Code Snippets插件、Vetur插件(语法高亮、智能感知、Emmet、Vue提示等)、JavaScript (ES6) Code Snippets插件、ESLint插件(代码规范提示)、VueHelper插件(Snippets 代码片段)、Prettier 插件(代码规范性插件)等，这一些都是可以在脚手架部分再进行详细的介绍这些插件。

五、VS code 常用到的快捷键

本人目前能够罗列的就只有那么多，其他我还没有用到，到时候大家编程学习的时候遇到别的可以自行添加，学习是自己的，还有很多你是需要学的！