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

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

前言

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

一、下载安装软件

可以登录官方

image.png

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

2345_image_file_copy_224.jpg

二、界面介绍

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

2345_image_file_copy_225.jpg

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

1、活动栏部分:

2345_image_file_copy_226.jpg

2、侧边栏

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

3、状态栏

2345_image_file_copy_227.jpg

三、插件安装

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

2345_image_file_copy_228.jpg

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

2345_image_file_copy_229.jpg

当然,卸载的话只要在相应的插件里面选择“卸载”即可。这个当你需要下载的时候,当我们安装完成以后“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 常用到的快捷键

image.png

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


相关文章
|
3月前
|
JavaScript 开发工具 C++
探索 Visual Studio Code:开发者的多功能编辑器
Visual Studio Code(VS Code)是由微软开发的一款免费、开源的轻量级代码编辑器,支持 Windows、Linux 和 macOS。它内置了对多种编程语言的支持,并提供了代码高亮、智能补全、调试和 Git 集成等功能。VS Code 的强大之处还在于其丰富的插件生态系统,通过安装插件可以进一步扩展功能。此外,用户还可以通过定制设置来自定义编辑器的行为和外观,从而提升开发效率。本文将详细介绍 VS Code 的核心特性、推荐插件及定制化设置方法。
|
20天前
|
NoSQL 编译器 C语言
C语言调试是开发中的重要技能,涵盖基本技巧如打印输出、断点调试和单步执行,以及使用GCC、GDB、Visual Studio和Eclipse CDT等工具。
C语言调试是开发中的重要技能,涵盖基本技巧如打印输出、断点调试和单步执行,以及使用GCC、GDB、Visual Studio和Eclipse CDT等工具。高级技巧包括内存检查、性能分析和符号调试。通过实践案例学习如何有效定位和解决问题,同时注意保持耐心、合理利用工具、记录过程并避免过度调试,以提高编程能力和开发效率。
36 1
|
1月前
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
2月前
|
JavaScript 前端开发 测试技术
组件化开发:创建可重用的Vue组件
【10月更文挑战第21天】组件化开发:创建可重用的Vue组件
27 1
|
2月前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
62 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
2月前
|
JavaScript 前端开发
vue全局公共组件自动引入并注册,开发效率直接起飞!
【10月更文挑战第14天】vue全局公共组件自动引入并注册,开发效率直接起飞!
59 1
|
2月前
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
448 0
|
2月前
|
JavaScript 开发者
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
【10月更文挑战第8天】vue指令的开发看这篇文章就够了!超详细,赶快收藏!
vue指令的开发看这篇文章就够了!超详细,赶快收藏!
|
2月前
|
JavaScript 前端开发
Vue开发必备:$nextTick方法的理解与实战场景
Vue开发必备:$nextTick方法的理解与实战场景
175 1
|
2月前
|
JavaScript 前端开发
VUE学习三:双向绑定指令(v-mode)、组件化开发(全局组件/局部组卷/组件通信)、组件化高级(slot插槽使用)
这篇文章是关于Vue.js框架中的v-model指令和组件化开发的详细教程,涵盖了从基础使用到高级功能的多个方面。
34 1