VSCode的使用

devtools/2024/10/18 12:27:28/

一、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.ppmy.cn/devtools/118380.html

相关文章

Redis-持久化

首先,我们明白一个概念, 硬盘>持久 内存>不持久 而Redis是一个内存数据库,不持久,相比于Mysql这样的关系型数据库,最明显的特点是快/效率高 为了保证速度快,数据要保存再内存中,为了持久,存储在硬盘上 所以redis决定: 插入>内存&#xff0b;硬盘(硬盘是为了在re…

98. 验证二叉搜索树

文章目录 98. 验证二叉搜索树思路递归法迭代法 总结 98. 验证二叉搜索树 98. 验证二叉搜索树 给你一个二叉树的根节点 root&#xff0c;判断其是否是一个有效的二叉搜索树。 有效 二叉搜索树定义如下&#xff1a; 节点的左子树只包含 小于 当前节点的数。节点的右子树只包含…

58 深层循环神经网络_by《李沐:动手学深度学习v2》pytorch版

系列文章目录 文章目录 系列文章目录深度循环神经网络1. 模型复杂性增加2. 训练数据不足3. 梯度消失和爆炸4. 正则化不足5. 特征冗余总结 函数依赖关系简洁实现训练与预测小结练习 深度循环神经网络 &#x1f3f7;sec_deep_rnn 到目前为止&#xff0c;我们只讨论了具有一个单…

【机器学习(十二)】机器学习回归案例之二手汽车价格预测—XGBoost回归算法—Sentosa_DSML社区版

文章目录 一、算法和背景介绍二、Python代码和Sentosa_DSML社区版算法实现对比(一) 数据读入与统计分析(二) 数据处理(三) 特征选择与相关性分析(四) 样本分区与模型训练(五) 模型评估和模型可视化 三、总结 一、算法和背景介绍 关于XGBoost的算法原理&#xff0c;已经进行了介…

【系统规划与管理师】【案例分析】【考点】【答案篇】第10章 团队建设与管理

【问题篇】☞【系统规划与管理师】【案例分析】【考点】【问题篇】第10章 团队建设与管理 【移动端浏览】☞【系统规划与管理师】【案例分析】【模拟考题】章节考题汇总&#xff08;第10章&#xff09;&#xff08;答案篇&#xff09;&#xff08;共15个知识点&#xff09; 第1…

AR传送门+特定区域显示内容+放大镜 效果着色器使用

AR传送门特定区域显示内容放大镜 效果 关键词&#xff1a;Portal Mask 1、教程链接&#xff1a; AR 传送门教程 Unity - Portal Mask Implementation - Part 4_哔哩哔哩_bilibili 应用案例效果&#xff1a; 2、案例下载地址&#xff1a;使用unity 2021.3.33f1 obi 工具…

【二十七】【QT开发应用】VS如何复制项目,QT无边窗窗口Pro版本,信号与信号槽的应用,背景图片自适应控件大小

VS复制项目 在使用VS的过程中,有的时候我们需要复制我们已经存在的项目. 我们可以先创建一个新的项目. 接着把需要复制的项目的文件复制粘贴到新的项目文件夹中. 不要忘记添加现有项目. CFrameLessWidgetBase.h #pragma once #include <QWidget> class CFrameLessWi…

828华为云征文 | 解锁高效项目管理,Zentao在华为云Flexusx容器化部署与应用指南

前言 在当今快速迭代的商业环境中&#xff0c;高效且灵活的项目管理成为企业竞争力的关键。华为云Flexusx实例&#xff0c;以其灵活的vCPU内存配比、热变配功能及按需计费模式&#xff0c;为项目管理软件如Zentao的部署提供了理想平台。Flexusx实例采用按需计费的灵活定价模式&…