VSCode的使用

一、VS code快捷键大全

打卡终端 CTRL + `
显示/隐藏侧边栏 CTRL + B
查找下一个(需要先选中) CTRL + D
格式化代码 ALT + SHIFT + F (实在不习惯 我修改为 CTRL + ALT + L)
注释代码 CTRL + /
向右缩进 Tab
向左缩进 SHIFT + Tab
向上向下复制一行 ALT + SHIFTt + Up 或 ALT + SHIFT + Down
同时选中所有匹配: CTRL + SHIFTt + L
打卡命令窗口 CTRL + SHITF + P
> Reload Window 重启窗口 (释放内存用)

向上或向下移动一行: Alt+Up 或 Alt+Down

向上或向下复制一行: Shift+Alt+Up 或 Shift+Alt+Down

在当前行下方插入一行: Ctrl+Enter

在当前行上方插入一行: Ctrl+Shift+Enter

查找:Ctrl + F

查找和替换:Ctrl + H

选中多个内容:shift + 鼠标左键

多行编辑:alt + 鼠标左键

向上/向下移动代码行 Alt + Up / Down 

向上/下复制代码 Shift + Alt + Up / Down

选定多个相同的单词  ctrl + d

全局替换某写单词 ctrl + h

重命名变量 (选择一个变量,按住F2键,填写一个新名称然后按enter键,所有相同名称的变量都会同时修改。) 

格式化代码 Shift + Alt + F 

跳转到错误和警告处 Ctrl + Shift + M

查看快捷键 Ctrl + K 再按 S

删除行 ctrl+shift+k

编辑器快捷方式:

        Ctrl + Shift + P:打开命令面板
        Ctrl + `:打开/关闭终端
        Ctrl + B:打开/关闭侧边栏

调试快捷方式:

        F5:开始调试
        Shift + F5:停止调试
        F9:设置/清除断点
        F10:逐过程(跳过函数)
        F11:逐语句(进入函数)

vue快捷方式:

        vue:输入vue后按Tab键,自动生成Vue单文件模板
        vuec:输入vuec后按Tab键,自动生成Vue组件模板
        vfor:输入vfor后按Tab键,快捷生成v-for指令
        vbind:输入vbind后按Tab键,快捷生成v-bind指令
        ve:输入ve后按Tab键,快速生成事件监听器

插件推荐:

        Vetur:提供对Vue单文件的支持,包括语法高亮、智能补全、错误检查等功能。
        Vue 2 Snippets:提供了丰富的Vue代码块,可以快速生成常见的Vue代码。
        Vue Peek:允许您通过鼠标悬停在Vue组件上,直接查看其模板和样式代码。

快速创建Vue项目
        使用Vue CLI脚手架创建新的Vue项目,打开终端(Terminal)并运行以下命令:
“`vue create my-app“`
        根据提示选择想要的配置,等待项目创建完成。
        在VSCode中打开新创建的Vue项目。

快速打开终端
        在VSCode中,按下Ctrl+`(反引号)打开终端。
        或者点击菜单栏中的”视图(View)”,然后点击”终端(Terminal)”。

快速打开文件
        使用Ctrl+P打开文件搜索框。
        输入文件名的一部分来快速定位和打开文件。
        使用Ctrl+Shift+N打开一个新的空白文件。

快速编辑文件
        使用Ctrl+D选择多个相同的单词,然后进行同时编辑。
        使用Ctrl+F查找特定的内容,并使用Ctrl+H进行替换。
        使用Ctrl+鼠标左键点击来快速跳转到函数的定义。

快速注释代码
        选中要注释的代码块,使用Ctrl+K Ctrl+C注释代码。
        使用Ctrl+K Ctrl+U取消已注释的代码。

快速格式化代码
        使用Shift+Alt+F格式化整个文档。
        或者选中特定的代码块,然后使用Shift+Alt+F格式化选中的代码。

快速运行和调试
        点击菜单栏中的”调试(Debug)”,然后点击”启动调试(Start Debugging)”。
        在调试面板中,可以设置断点并执行调试操作。

使用插件
        VSCode提供了许多与Vue开发相关的插件,可以大大提升开发效率。
        一些常用的Vue插件包括:Vetur、Vue 2 Snippets、Vue Peek等。

二、基础指令

v-bind可以简写成   :

<img src="{{url}}">→<img  :src="url" :width="50px">

v-on:click可以写成@click

<button @click="up()"></button>

v-if实例  可以通过对对象操作条件来实现想要展示的效果

v-for实例:v-for是可以做循环数组使用的

v-show实例:v-show可以操作true/false来实现效果

:class实例:

三、VSCode是一种流行的文本编辑器,被广泛用于开发Vue.js应用程序。使用VSCode的快捷键可以提高开发效率和生产力。以下是一些在VSCode中快捷编辑Vue的技巧:

1. 自动完成:VSCode具有强大的自动完成功能,可以在编写Vue代码时自动提示相关内容。例如,当您输入Vue关键字时,VSCode将显示Vue的各种选项。您可以使用Tab键来选择自动完成的选项,从而加快编码速度。

2. 代码片段:VSCode提供了许多有用的代码片段,可以通过简单的快捷键输入并生成常用的Vue代码。例如,键入“vuep”并按下Tab键,将生成一个完整的Vue组件的代码骨架。您还可以通过在VSCode的“用户代码片段”设置中添加自定义代码片段来进一步提高效率。

3. 快速导航:在Vue项目中,你可能有很多组件、页面和文件夹。VSCode 提供了一些快捷键,可以帮助您快速导航并定位到代码中的特定位置。例如,使用Ctrl+P可以快速打开文件,Ctrl+Shift+O可以快速切换到符号(如函数或变量)。

4. Emmet快捷键:Emmet是一个文本编辑器插件,可以通过缩写快速生成HTML、CSS和其他前端代码。在VSCode中,默认支持Emmet缩写。您可以使用Emmet缩写来快速编写Vue模板代码。例如,键入“div#app”并按下Tab键,将生成一个具有id为”app”的div标签。

5. 快速注释:注释代码是编写高质量代码的重要步骤之一。在VSCode中使用快捷键可以更快速地添加和删除注释。例如,在选中一段代码后,使用Ctrl+/ 可以快速添加或删除注释。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/1541000.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

高质量的翻译:应用程序可用性和成功的关键

在日益全球化的应用市场中&#xff0c;开发一款优秀的产品只是成功的一半。另一半&#xff1f;确保你的用户&#xff0c;无论他们在哪里或说什么语言&#xff0c;都能无缝理解和使用它。这就是高质量翻译的用武之地——不是事后的想法&#xff0c;而是应用程序可用性和最终成功…

攻防世界---->ReverseMe-120

做题学习笔记。 前言&#xff1a;目前遇见的reverse都是&#xff0c;已知密文&#xff0c;去求解明文flag&#xff1b; 此题逆着来&#xff0c;通过明文&#xff0c;去求解密文flag。 base加密的识别&#xff0c;还算容易。 那么&#xff0c;base解码的识别呢&#xff1f; 攻…

Java调用数据库 笔记06 (修改篇)

1.创建Java的普通class类 2.加载驱动 Class.forName("com.mysql.jdbc.Driver"); 3.驱动管理类调用方法进行连接&#xff0c;得到连接对象 DriverManager.getConnection(url, user, password); 其中设置参数&#xff1a; static final String url "jdbc:my…

聊天组件 Vue3-beautiful-chat 插槽

前言 Vue3-beautiful-chat 组件有四个插槽可以定制 一、user-avatar(头像) 首先是头像插槽,我们可以直接在 <beautiful-chat></beautiful-chat> 中间使用; 作用: 我们可以在用户头像上添加自定义样式,比如添加节日边框、可以使用首字母作为头像。。。 …

《使用 LangChain 进行大模型应用开发》学习笔记(五)

前言 本文是 Harrison Chase &#xff08;LangChain 创建者&#xff09;和吴恩达&#xff08;Andrew Ng&#xff09;的视频课程《LangChain for LLM Application Development》&#xff08;使用 LangChain 进行大模型应用开发&#xff09;的学习笔记。由于原课程为全英文视频课…

kafka动态认证 自定义认证 安全认证-亲测成功

kafka动态认证 自定义认证 安全认证-亲测成功 背景 Kafka默认是没有安全机制的&#xff0c;一直在裸奔。用户认证功能&#xff0c;是一个成熟组件不可或缺的功能。在0.9版本以前kafka是没有用户认证模块的&#xff08;或者说只有SSL&#xff09;&#xff0c;好在kafka0.9版本…

【全网首发】2024华为杯数学建模ABCDEF选题方向+完整思路代码+数据集处理+可视化结果

2024华为杯研究生数学建模比赛ABCDEF选题分析 建议选哪道题&#xff1f; 点击链接加入群聊【2024华为杯数学建模助攻资料】&#xff1a;http://qm.qq.com/cgi-bin/qm/qr?_wv1027&kxtS4vwn3gcv8oCYYyrqd0BvFc7tNfhV7&authKeyedQFZne%2BzvEfLEVg2v8FOm%2BWNg1V%2Fiv3H…

Apifox Mock使用教程

Apifox是一个功能强大的可视化接口文档管理工具&#xff0c;使用Apifox可以让接口Mock变得更简单容易。Apifox具有出色的Mock功能&#xff0c;不仅兼容Mock.js语法&#xff0c;同时提供Nunjucks 和自定义脚本支持&#xff0c;能够满足不同场景需求&#xff0c;为前端接口调试提…

Element 表格相关操作

数据和页面展示分离操作 <script setup> // 从Element Plus中导入需要的图标组件 import {Check,Delete,Edit,Message,Search,Star, } from element-plus/icons-vue // 导入Vue的ref和onMounted函数 import {ref,onMounted} from vue;// 使用ref创建一个响应式的use…

vue-使用refs取值,打印出来是个数组??

背景&#xff1a; 经常使用$refs去获取组件实例&#xff0c;一般都是拿到实例对象&#xff0c;这次去取值的时候发现&#xff0c;拿到的竟然是个数组。 原因&#xff1a; 这是vue的特性,自动把v-for里面的ref展开成数组的形式&#xff0c;哪怕你的ref名字是唯一的&#xff01…

Java集合(List篇)

List a.使用List i.最基础的一种集合&#xff0c;是一种有序列表&#xff0c;内部按照放入元素的先后顺序存放&#xff0c;每个元素都可以通过索引确定自己的位置。 ii.数组的删除和新增 iii.ArrayList集合的新增和删除。 iv.LinkedList&#xff08;链表式集合&#x…

Ceph 基本架构(一)

Ceph架构图 Ceph整体组成 Ceph 是一个开源的分布式存储系统&#xff0c;设计用于提供优秀的性能、可靠性和可扩展性。Ceph 的架构主要由几个核心组件构成&#xff0c;每个组件都有特定的功能&#xff0c;共同协作以实现高可用性和数据的一致性。 以下是 Ceph 的整体架构及其…

Tomcat CVE-2017-12615 靶场攻略

漏洞描述 当 Tomcat运⾏在Windows操作系统时&#xff0c;且启⽤了HTTP PUT请求⽅法&#xff08;例如&#xff0c;将 readonly初始化参数由默认值设置为false&#xff09;&#xff0c;攻击者将有可能可通过精⼼构造的攻击请求数据包向服务器上传包含任意代 的 JSP ⽂件&#xf…

队列基础概念

文章目录 &#x1f34a;自我介绍&#x1f34a;现实生活中的例子&#x1f34a;队列的介绍&#x1f34a;循环队列&#x1f34a;小结 你的点赞评论就是对博主最大的鼓励 当然喜欢的小伙伴可以&#xff1a;点赞关注评论收藏&#xff08;一键四连&#xff09;哦~ &#x1f34a;自我介…

LeetCode[中等] 54.螺旋矩阵

给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 思路&#xff1a;定义方向数组&#xff0c;按照顺时针顺序&#xff1a;右(0,1)&#xff0c;下(1,0)&#xff0c;左(0,-1)&#xff0c;上(0,-1) 从矩阵的左上角开始遍历…

了解深度学习,张量,线性代数,激活函数的概念

在人工智能领域&#xff0c;尤其是深度学习中&#xff0c;张量和线性代数是不可或缺的数学工具。这些数学知识的应用主要体现在以下几个方面&#xff1a; 数据表示与运算&#xff1a;张量是多维数组&#xff0c;用于表示和存储数据。在深度学习中&#xff0c;大部分的数据和权重…

常见项目场景题1(数据量很大时如何去重,实现超时处理)

数据很多&#xff0c;限制内存&#xff0c;如何去重 对于大数据量去重的场景&#xff0c;我们可以考虑使用位图(Bitmap) Bitmap 是使用二进制来表示某个元素是否存在的数组。用0和1来表示存在与不存在 使用Bitmap的话&#xff0c;一个数字占用1bit&#xff0c;大大减少内存消耗…

Unity自我实现响应式属性

其实只是写着玩,响应式编程建议使用UniRx插件(一套成熟的响应式编程解决方案),我写的主要是借鉴一下这个思想,实现的也不够优雅,不过逻辑也算严密可以正常使用.你可以查看我写的理解响应式属性的思想. 借鉴UniRx的ReactiveProperty类,且UniRx不仅有响应式属性. using System; …

CertiK协助修复Solana大整数模幂运算中的DOS漏洞

导读&#xff1a; 本文深入探讨了区块链交易费⽤模型的重要性及其在确保网络安全和有效运行中的关键作用。通过对以太坊和Solana区块链网络的交易费⽤模型进行比较分析&#xff0c;揭示了不安全的交易计费可能引发的网络安全风险。特别关注了CertiK团队发现并协助修复的Solana…

【学术会议征稿】第四届计算机、信息工程与电子材料国际学术会议 (CTIEEM 2024)

第四届计算机、信息工程与电子材料国际学术会议 (CTIEEM 2024) The 4th International Conference on Computer Technology, Information Engineering and Electron Materials 随着信息技术的迅猛发展&#xff0c;计算机技术、信息工程以及电子材料领域的研究与创新成为推动现…