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

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


相关文章
|
8月前
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
412 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
JavaScript 开发工具 C++
探索 Visual Studio Code:开发者的多功能编辑器
Visual Studio Code(VS Code)是由微软开发的一款免费、开源的轻量级代码编辑器,支持 Windows、Linux 和 macOS。它内置了对多种编程语言的支持,并提供了代码高亮、智能补全、调试和 Git 集成等功能。VS Code 的强大之处还在于其丰富的插件生态系统,通过安装插件可以进一步扩展功能。此外,用户还可以通过定制设置来自定义编辑器的行为和外观,从而提升开发效率。本文将详细介绍 VS Code 的核心特性、推荐插件及定制化设置方法。
|
10月前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
689 1
|
12月前
|
前端开发
业余时间开发了个海报编辑器
为了满足撰写博客或录制教程视频时对高质量海报的需求,我利用业余时间开发了一款海报编辑器。第一版功能简单,支持固定尺寸、黑底白字的标题。后来经过优化,增加了背景图、模糊效果、文字样式调整等功能,使海报更具吸引力。目前该编辑器已上线,欢迎大家试用并反馈。[访问海报编辑器](https://tool.share888.top/#/poster)
215 6
业余时间开发了个海报编辑器
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
201 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
JavaScript
Vue基础知识总结 4:vue组件化开发
Vue基础知识总结 4:vue组件化开发
|
JavaScript 前端开发 测试技术
组件化开发:创建可重用的Vue组件
【10月更文挑战第21天】组件化开发:创建可重用的Vue组件
147 1
|
JavaScript 前端开发
vue全局公共组件自动引入并注册,开发效率直接起飞!
【10月更文挑战第14天】vue全局公共组件自动引入并注册,开发效率直接起飞!
326 1
|
存储 前端开发 中间件
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
vue3之vite配置vite-plugin-mock使用mock轻松创建模拟数据提高开发效率
1698 0
|
运维 Java Linux
【运维基础知识】掌握VI编辑器:提升你的Java开发效率
本文详细介绍了VI编辑器的常用命令,包括模式切换、文本编辑、搜索替换及退出操作,帮助Java开发者提高在Linux环境下的编码效率。掌握这些命令,将使你在开发过程中更加得心应手。
157 2