百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 热门文章 > 正文

「工欲善其事」一份真香WebStorm快捷键

bigegpt 2024-08-05 11:32 2 浏览

所有快捷键均经过亲自测试!!!

以下的快捷键可以帮助你节约大量时间,我们的口号是:不加班!!!

强烈建议先收藏后阅读!!!

并一定要实际应用起来,可以帮助你节约很多时间,时间=金钱,掌握他们可以让你敲代码喝快乐水的时候能够更加快乐!!!

如需要最新版webstorm pjb 可私信

常用快捷键


command + b 跳到变量声明处
// 跳跳蛙 找爸爸

command + r 当前页替换
command + shift + r 全局替换
// 很巴适的功能

command + d 行复制
// 复制当前行到下一行

command + / 当前行注释
command + shift + / 块注释
// 注释没什么好说的

command + shift + +/- 展开/折叠 当前选中的代码块
// 当你写了很长很长的代码时,你可以使用它快速展开折叠,而节约上下翻页的时间

command + option + L 格式化代码
// 立正 稍息

command + shift + up/down 上下移动当前行代码
// 没什么好说的

command + F 当前页查找
command + shift + F 全局搜索内容
// 查找还是很常用

command + shift + o 搜索文件
// 搜索

command + 1 快速打开或隐藏工程面板
// 也就是打开隐藏侧边栏 

command + x 删除当前行
// 删除后可以粘贴,就是保留了当前行

command + 后退格 删除当前鼠标所在行
// 删除当前行 不可以粘贴

command + e 打开最近打开的文件或者项目(支持文件名搜索)
// 近期浏览文件历史

command + shift + v 选择粘贴剪切板上的内容(具有剪切板记忆功能)
// 粘贴剪切板历史

command + c 复制
command + v 粘贴
// 没啥说的 但这俩元老级别得压轴出场

command + shift + u 大小写转换
// 大小写转换

command + w 关闭当前文件选项卡
// 关闭当前页签

option + 鼠标单击 光标在多处定位 
// 用于统一编辑或修改

option + enter 自动修正 激活小灯泡 
// eslint开启时可以快速点亮小灯泡,来修正代码。不用你滑鼠标或者触控板来回找

shift + 回车 软回车 
//无论光标处于前一行的什么位置,都能定位到下一行

代码标签输入完成后,按Tab,生成代码。
// 没啥说的 基本操作

ok,总结完了基本的快捷键操作,是不是觉得很巴适,有很多在以后的编程中你会逐渐体会到并觉得十分好用,十分节约时间。

快速输入标签的方法

接下来分享一些快速输入标签的方法,首先介绍几个符号的含义

>:下一个子标签,用于父子标签的连接

*:多少个子标签,后面跟子标签的个数

$:标签的名称序号,可以理解为for循环中的i

{}:标签的内容,标签中的文字等需要在{}表示

看不懂没关系,一大堆正在抵达战场,请跟随我一起敲出它们。

1.输入h1,加tab

结果:<h1></h1>
2.输入div#abc,加tab

结果:<div id="abc"></div>
3.输入div.abc,加tab

结果:<div class="abc"></div>
4.输入a[href=#] tab

结果:<a href="#"></a>
5.输入div>p*6,加tab

<div>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
  <p></p>
</div>

6.输入 ul>li*5>a[href=#]{我是第$个},加tab键


<ul>
  <li><a href="#">我是第1个</a></li>
    <li><a href="#">我是第2个</a></li>
    <li><a href="#">我是第3个</a></li>
    <li><a href="#">我是第4个</a></li>
    <li><a href="#">我是第5个</a></li>
</ul>

7.输入 img[src='images/$.jpg']*3,加tab键


<img src="images/1.jpg" alt="">     
<img src="images/2.jpg" alt="">     
<img src="images/3.jpg" alt="">

复制代码

8.输入 li*3>div.img>img[src='images/$.jpg'],加tab键


<li>
    <div class="img"><img src="images/1.jpg" alt=""></div>
</li>
<li>
    <div class="img"><img src="images/2.jpg" alt=""></div>
</li>
<li>
    <div class="img"><img src="images/3.jpg" alt=""></div>
</li>

9.快速生成for循环代码块

 <script>
        /* for循环:输入itar,再点击tab键*/
        for (var i = 0; i < array.length; i++) {
            var obj = array[i];
 
        }
    </script>

10.输入div#tab1+div#tab2,加tab键


+ : 表示并列的标签
 
<div id="tab1"></div>
<div id="tab2"></div>

11.引入link,script标签


<!--引入link,输入link,加tab键-->
<link rel="stylesheet" href="">
 
<!--引入css 输入link:css,加tab键 -->
<link rel="stylesheet" href="css/mycss.css">
 
<!--引入js 输入script:src,加tab键-->
<script src=""></script> 
 
<!--html中插入js 输入script,加tab键-->
<script></script>

12.快速输入ul、li


<!--ul及1个li 输入ul+,加tab键     -->
<ul>
    <li></li>
</ul>
 
<!--ul及3个li 输入ul>li*3,加tab键  -->
<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

<!--输入ul>li.item$*6,加tab键-->
<ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
</ul>

13.快速输入多个标签


<!--输入a:link,加tab键  -->
<a href="http://"></a>

<!--1个P标签:输入p,加tab键-->
<p></p>
 
<!--两个P标签:输入p+p,加tab键-->
<p></p>
<p></p>
 
<!--三个P标签:输入p*3,加tab键-->
<p></p>
<p></p>
<p></p>

14.快速输入带类名的标签


<!--输入div.one.two,加tab键-->
<div class="one two"></div>

<!--输入form:get,加tab键-->
<form action="" method="get"></form>

<!--输入form:post,加tab键-->
<form action="" method="post"></form>

<!--输入input:button,加tab键-->
<input type="button" value="">


希望本文可以帮助大家节约时间,高效率的完成工作和任务,做一个快乐的程序员。

相关推荐

程序员请收好:10个非常有用的 Visual Studio Code 插件

一个插件列表,可以让你的程序员生活变得轻松许多。作者|Daan译者|Elle出品|CSDN(ID:CSDNnews)以下为译文:无论你是经验丰富的开发人员还是刚刚开始第一份工作的初级开发人...

PADS在WIN10系统中菜单显示不全的解决方法

决定由AD转PADS,打开发现菜单显示不正常,如下图所示:这个是由于系统的默认字体不合适导致,修改一下系统默认字体即可,修改方法如下:打开开始菜单-->所有程序-->Windows系统--...

一文讲解Web前端开发基础环境配置

先从基本的HTML语言开始学习。一个网页的所有内容都是基于HTML,为了学好HTML,不使用任何集成工具,而用一个文本编辑器,直接从最简单的HTML开始编写HTML。先在网上下载notepad++文...

TCP/IP协议栈在Linux内核中的运行时序分析

本文主要是讲解TCP/IP协议栈在Linux内核中的运行时序,文章较长,里面有配套的视频讲解,建议收藏观看。1Linux概述  1.1Linux操作系统架构简介Linux操作系统总体上由Linux...

从 Angular Route 中提前获取数据

#头条创作挑战赛#介绍提前获取意味着在数据呈现在屏幕之前获取到数据。本文中,你将学到,在路由更改前怎么获取到数据。通过本文,你将学会使用resolver,在AngularApp中应用re...

边做游戏边划水: 基于浅水方程的水面交互、河道交互模拟方法

以下文章来源于腾讯游戏学堂,作者Byreave篇一:基于浅水方程的水面交互本文主要介绍一种基于浅水方程的水体交互算法,在基本保持水体交互效果的前提下,实现了一种极简的水面模拟和物体交互方法。真实感的...

Nacos介绍及使用

一、Nacos介绍Nacos是SpringCloudAlibaba架构中最重要的组件。Nacos是一个更易于帮助构建云原生应用的动态服务发现、配置和服务管理平台,提供注册中心、配置中心和动态DNS...

Spring 中@Autowired,@Resource,@Inject 注解实现原理

使用案例前置条件:现在有一个Vehicle接口,它有两个实现类Bus和Car,现在还有一个类VehicleService需要注入一个Vehicle类型的Bean:publicinte...

一文带你搞懂Vue3 底层源码

作者:妹红大大转发链接:https://mp.weixin.qq.com/s/D_PRIMAD6i225Pn-a_lzPA前言vue3出来有一段时间了。今天正式开始记录一下梗vue3.0.0-be...

一线开发大牛带你深度解析探讨模板解释器,解释器的生成

解释器生成解释器的机器代码片段都是在TemplateInterpreterGenerator::generate_all()中生成的,下面将分小节详细展示该函数的具体细节,以及解释器某个组件的机器代码...

Nacos源码—9.Nacos升级gRPC分析五

大纲10.gRPC客户端初始化分析11.gRPC客户端的心跳机制(健康检查)12.gRPC服务端如何处理客户端的建立连接请求13.gRPC服务端如何映射各种请求与对应的Handler处理类14.gRP...

聊聊Spring AI的Tool Calling

序本文主要研究一下SpringAI的ToolCallingToolCallbackorg/springframework/ai/tool/ToolCallback.javapublicinter...

「云原生」Containerd ctr,crictl 和 nerdctl 命令介绍与实战操作

一、概述作为接替Docker运行时的Containerd在早在Kubernetes1.7时就能直接与Kubelet集成使用,只是大部分时候我们因熟悉Docker,在部署集群时采用了默认的dockers...

在MySQL登录时出现Access denied for user ~~ (using password: YES)

Windows~~~在MySQL登录时出现Accessdeniedforuser‘root‘@‘localhost‘(usingpassword:YES),并修改MySQL密码目录适用...

mysql 8.0多实例批量部署script

背景最近一个项目上,客户需要把阿里云的rdsformysql数据库同步至线下,用作数据的灾备,需要在线下的服务器上部署mysql8.0多实例,为了加快部署的速度,写了一个脚本。解决方案#!/bi...